Data Table with Swipe Control
| Year | Annual average | Jan | Feb | Mar | Apr | May | Jun | Jul | Aug | Sep | Oct | Nov | Dec |
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 1988 | 63.5 | 61.9 | 62.1 | 62.3 | 63.1 | 63.4 | 63.6 | 63.6 | 63.8 | 64.1 | 64.4 | 64.7 | 64.8 |
| 1989 | 66.8 | 65.0 | 65.2 | 65.5 | 66.4 | 66.7 | 67.0 | 66.9 | 67.0 | 67.5 | 68.0 | 68.2 | 68.3 |
| 1990 | 71.5 | 68.6 | 69.0 | 69.4 | 70.6 | 71.3 | 71.6 | 71.4 | 72.2 | 72.9 | 73.5 | 73.6 | 73.5 |
| 1991 | 76.8 | 73.5 | 73.9 | 74.1 | 76.6 | 77.2 | 77.6 | 77.4 | 77.7 | 78.1 | 78.5 | 78.8 | 78.8 |
| 1992 | 80.1 | 78.6 | 79.0 | 79.4 | 80.2 | 80.5 | 80.6 | 80.2 | 80.2 | 80.5 | 80.7 | 80.8 | 80.8 |
| 1993 | 82.1 | 80.4 | 80.9 | 81.3 | 82.2 | 82.5 | 82.5 | 82.2 | 82.5 | 82.9 | 82.8 | 82.6 | 82.8 |
| 1994 | 83.8 | 82.5 | 82.9 | 83.1 | 83.9 | 84.1 | 84.1 | 83.6 | 84.1 | 84.2 | 84.0 | 84.1 | 84.5 |
| 1995 | 86.0 | 84.5 | 84.9 | 85.3 | 85.8 | 86.2 | 86.3 | 85.8 | 86.3 | 86.7 | 86.5 | 86.5 | 87.0 |
| 1996 | 88.1 | 86.8 | 87.2 | 87.5 | 88.0 | 88.3 | 88.4 | 87.8 | 88.3 | 88.7 | 88.7 | 88.7 | 89.0 |
| 1997 | 89.7 | 88.6 | 88.8 | 89.0 | 89.4 | 89.6 | 89.8 | 89.5 | 90.0 | 90.3 | 90.3 | 90.4 | 90.5 |
| 1998 | 91.1 | 89.9 | 90.3 | 90.5 | 91.0 | 91.5 | 91.3 | 90.8 | 91.2 | 91.6 | 91.6 | 91.7 | 91.9 |
| 1999 | 92.3 | 91.4 | 91.5 | 92.0 | 92.4 | 92.7 | 92.6 | 92.0 | 92.3 | 92.7 | 92.6 | 92.7 | 93.0 |
| 2000 | 93.1 | 92.1 | 92.4 | 92.6 | 92.9 | 93.2 | 93.3 | 92.8 | 92.8 | 93.6 | 93.5 | 93.7 | 93.7 |
| 2001 | 94.2 | 92.9 | 93.1 | 93.4 | 94.0 | 94.7 | 94.9 | 94.2 | 94.5 | 94.8 | 94.7 | 94.5 | 94.7 |
| 2002 | 95.4 | 94.4 | 94.5 | 94.9 | 95.3 | 95.5 | 95.5 | 95.2 | 95.5 | 95.7 | 95.9 | 95.9 | 96.3 |
| 2003 | 96.7 | 95.7 | 96.0 | 96.3 | 96.7 | 96.7 | 96.5 | 96.5 | 96.8 | 97.1 | 97.2 | 97.2 | 97.5 |
| 2004 | 98.0 | 97.0 | 97.2 | 97.4 | 97.8 | 98.1 | 98.1 | 97.8 | 98.1 | 98.2 | 98.4 | 98.6 | 99.1 |
| 2005 | 100.0 | 98.6 | 98.8 | 99.3 | 99.7 | 100.0 | 100.0 | 100.1 | 100.4 | 100.6 | 100.7 | 100.7 | 101.0 |
| 2006 | 102.3 | 100.5 | 100.9 | 101.1 | 101.7 | 102.2 | 102.5 | 102.5 | 102.9 | 103.0 | 103.2 | 103.4 | 104.0 |
| 2007 | 104.7 | 103.2 | 103.7 | 104.2 | 104.5 | 104.8 | 105.0 | 104.4 | 104.7 | 104.8 | 105.3 | 105.6 | 106.2 |
| 2008 | .. | 105.5 | 106.3 | 106.7 | 107.6 | 108.3 | 109.0 | 109.0 | 109.7 | 110.3 | .. | .. | .. |
Usage notes
Tables that have data that is not always required to be directly comparable suit this pattern.
The swipe table allows the user to browse the columns, using the prev / next controls or by swiping on a device that supports touch events. The only deficiency with this component is that it is harder to compare individual columns that are spread out from one another.
<table class="tablesaw" data-mode="swipe" data-minimap="">
<thead>
<tr>
<th data-priority="persist">Year</th>
<th>Annual average</th>
<th>Jan</th>
<th>Feb</th>
<th>Mar</th>
<th>Apr</th>
<th>May</th>
<th>Jun</th>
<th>Jul</th>
<th>Aug</th>
<th>Sep</th>
<th>Oct</th>
<th>Nov</th>
<th>Dec</th>
</tr>
</thead>
<tbody>
<tr>
<th>1988</th>
<td>63.5</td>
<td>61.9</td>
<td>62.1</td>
<td>62.3</td>
<td>63.1</td>
<td>63.4</td>
<td>63.6</td>
<td>63.6</td>
<td>63.8</td>
<td>64.1</td>
<td>64.4</td>
<td>64.7</td>
<td>64.8</td>
</tr>
<tr>
<th>1989</th>
<td>66.8</td>
<td>65.0</td>
<td>65.2</td>
<td>65.5</td>
<td>66.4</td>
<td>66.7</td>
<td>67.0</td>
<td>66.9</td>
<td>67.0</td>
<td>67.5</td>
<td>68.0</td>
<td>68.2</td>
<td>68.3</td>
</tr>
<tr>
<th>1990</th>
<td>71.5</td>
<td>68.6</td>
<td>69.0</td>
<td>69.4</td>
<td>70.6</td>
<td>71.3</td>
<td>71.6</td>
<td>71.4</td>
<td>72.2</td>
<td>72.9</td>
<td>73.5</td>
<td>73.6</td>
<td>73.5</td>
</tr>
<tr>
<th>1991</th>
<td>76.8</td>
<td>73.5</td>
<td>73.9</td>
<td>74.1</td>
<td>76.6</td>
<td>77.2</td>
<td>77.6</td>
<td>77.4</td>
<td>77.7</td>
<td>78.1</td>
<td>78.5</td>
<td>78.8</td>
<td>78.8</td>
</tr>
<tr>
<th>1992</th>
<td>80.1</td>
<td>78.6</td>
<td>79.0</td>
<td>79.4</td>
<td>80.2</td>
<td>80.5</td>
<td>80.6</td>
<td>80.2</td>
<td>80.2</td>
<td>80.5</td>
<td>80.7</td>
<td>80.8</td>
<td>80.8</td>
</tr>
<tr>
<th>1993</th>
<td>82.1</td>
<td>80.4</td>
<td>80.9</td>
<td>81.3</td>
<td>82.2</td>
<td>82.5</td>
<td>82.5</td>
<td>82.2</td>
<td>82.5</td>
<td>82.9</td>
<td>82.8</td>
<td>82.6</td>
<td>82.8</td>
</tr>
<tr>
<th>1994</th>
<td>83.8</td>
<td>82.5</td>
<td>82.9</td>
<td>83.1</td>
<td>83.9</td>
<td>84.1</td>
<td>84.1</td>
<td>83.6</td>
<td>84.1</td>
<td>84.2</td>
<td>84.0</td>
<td>84.1</td>
<td>84.5</td>
</tr>
<tr>
<th>1995</th>
<td>86.0</td>
<td>84.5</td>
<td>84.9</td>
<td>85.3</td>
<td>85.8</td>
<td>86.2</td>
<td>86.3</td>
<td>85.8</td>
<td>86.3</td>
<td>86.7</td>
<td>86.5</td>
<td>86.5</td>
<td>87.0</td>
</tr>
<tr>
<th>1996</th>
<td>88.1</td>
<td>86.8</td>
<td>87.2</td>
<td>87.5</td>
<td>88.0</td>
<td>88.3</td>
<td>88.4</td>
<td>87.8</td>
<td>88.3</td>
<td>88.7</td>
<td>88.7</td>
<td>88.7</td>
<td>89.0</td>
</tr>
<tr>
<th>1997</th>
<td>89.7</td>
<td>88.6</td>
<td>88.8</td>
<td>89.0</td>
<td>89.4</td>
<td>89.6</td>
<td>89.8</td>
<td>89.5</td>
<td>90.0</td>
<td>90.3</td>
<td>90.3</td>
<td>90.4</td>
<td>90.5</td>
</tr>
<tr>
<th>1998</th>
<td>91.1</td>
<td>89.9</td>
<td>90.3</td>
<td>90.5</td>
<td>91.0</td>
<td>91.5</td>
<td>91.3</td>
<td>90.8</td>
<td>91.2</td>
<td>91.6</td>
<td>91.6</td>
<td>91.7</td>
<td>91.9</td>
</tr>
<tr>
<th>1999</th>
<td>92.3</td>
<td>91.4</td>
<td>91.5</td>
<td>92.0</td>
<td>92.4</td>
<td>92.7</td>
<td>92.6</td>
<td>92.0</td>
<td>92.3</td>
<td>92.7</td>
<td>92.6</td>
<td>92.7</td>
<td>93.0</td>
</tr>
<tr>
<th>2000</th>
<td>93.1</td>
<td>92.1</td>
<td>92.4</td>
<td>92.6</td>
<td>92.9</td>
<td>93.2</td>
<td>93.3</td>
<td>92.8</td>
<td>92.8</td>
<td>93.6</td>
<td>93.5</td>
<td>93.7</td>
<td>93.7</td>
</tr>
<tr>
<th>2001</th>
<td>94.2</td>
<td>92.9</td>
<td>93.1</td>
<td>93.4</td>
<td>94.0</td>
<td>94.7</td>
<td>94.9</td>
<td>94.2</td>
<td>94.5</td>
<td>94.8</td>
<td>94.7</td>
<td>94.5</td>
<td>94.7</td>
</tr>
<tr>
<th>2002</th>
<td>95.4</td>
<td>94.4</td>
<td>94.5</td>
<td>94.9</td>
<td>95.3</td>
<td>95.5</td>
<td>95.5</td>
<td>95.2</td>
<td>95.5</td>
<td>95.7</td>
<td>95.9</td>
<td>95.9</td>
<td>96.3</td>
</tr>
<tr>
<th>2003</th>
<td>96.7</td>
<td>95.7</td>
<td>96.0</td>
<td>96.3</td>
<td>96.7</td>
<td>96.7</td>
<td>96.5</td>
<td>96.5</td>
<td>96.8</td>
<td>97.1</td>
<td>97.2</td>
<td>97.2</td>
<td>97.5</td>
</tr>
<tr>
<th>2004</th>
<td>98.0</td>
<td>97.0</td>
<td>97.2</td>
<td>97.4</td>
<td>97.8</td>
<td>98.1</td>
<td>98.1</td>
<td>97.8</td>
<td>98.1</td>
<td>98.2</td>
<td>98.4</td>
<td>98.6</td>
<td>99.1</td>
</tr>
<tr>
<th>2005</th>
<td>100.0</td>
<td>98.6</td>
<td>98.8</td>
<td>99.3</td>
<td>99.7</td>
<td>100.0</td>
<td>100.0</td>
<td>100.1</td>
<td>100.4</td>
<td>100.6</td>
<td>100.7</td>
<td>100.7</td>
<td>101.0</td>
</tr>
<tr>
<th>2006</th>
<td>102.3</td>
<td>100.5</td>
<td>100.9</td>
<td>101.1</td>
<td>101.7</td>
<td>102.2</td>
<td>102.5</td>
<td>102.5</td>
<td>102.9</td>
<td>103.0</td>
<td>103.2</td>
<td>103.4</td>
<td>104.0</td>
</tr>
<tr>
<th>2007</th>
<td>104.7</td>
<td>103.2</td>
<td>103.7</td>
<td>104.2</td>
<td>104.5</td>
<td>104.8</td>
<td>105.0</td>
<td>104.4</td>
<td>104.7</td>
<td>104.8</td>
<td>105.3</td>
<td>105.6</td>
<td>106.2</td>
</tr>
<tr>
<th>2008</th>
<td>..</td>
<td>105.5</td>
<td>106.3</td>
<td>106.7</td>
<td>107.6</td>
<td>108.3</td>
<td>109.0</td>
<td>109.0</td>
<td>109.7</td>
<td>110.3</td>
<td>..</td>
<td>..</td>
<td>..</td>
</tr>
</tbody>
</table>Developer Notes
All data-tables are based on Filament Group's Tablesaw library, which provides an out of the box solution to responsive tables.
To define a table as a responsive table use class="tablesaw" on the table element and specify the appropriate mode e.g. data-mode="swipe" in this case.
The extent to the customisations for use within the pattern library is limited - specifically, the only additions are to present the tables in keeping with the of the pattern libraries look.
Use <th data-priority="persist">Always shows</th> to fix a column so that it is always visible.
Adding the attribute data-minimap adds an element to the chart indicating to the user which columns are currently visible.