• Components
  • Data Tables

Data Table with Toggle

View Data Table with Toggle

Usage notes

The most robust solution to displaying data which is required to be compared, is to give the user control over what they see by allowing them to show and hide the columns of the table.

However, it needs to be kept in mind that presenting data in tables where content editors have the ability to determine which columns are shown by default could be seen as hiding information.

View the original source for this chart.

  
<table class="tablesaw" data-mode="columntoggle" data-minimap="">
  <thead>
    <tr>
      <th data-priority="persist">Publication</th>
      <th data-priority="persist">% of GDP</th>
      <th data-priority="1">Release date</th>
      <th data-priority="1">Month / Quarter of GDP</th>
      <th data-priority="6">Most recent 3 months on a year earlier</th>
      <th data-priority="6">Most recent 3 months on 3 months earlier</th>
      <th data-priority="6">Most recent month on the same month a year ago</th>
      <th data-priority="6">Most recent month on the previous month</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Index of&#xA0;</td>
      <td>14.6</td>
      <td>07 Oct</td>
      <td>Aug</td>
      <td>2.0</td>
      <td>0.0</td>
      <td>2.5</td>
      <td>0.0</td>
    </tr>
    <tr>
      <td>Production
        <sup>1</sup>
      </td>
      <td>&#xA0;</td>
      <td>&#xA0;</td>
      <td>Jul</td>
      <td>2.0</td>
      <td>-0.3</td>
      <td>2.2</td>
      <td>0.4</td>
    </tr>
    <tr>
      <td>Construction&#xA0;</td>
      <td>6.4</td>
      <td>12 Sep</td>
      <td>Jul</td>
      <td>3.9</td>
      <td>0.6</td>
      <td>2.6</td>
      <td>0.0</td>
    </tr>
    <tr>
      <td>Index of&#xA0;</td>
      <td>78.4</td>
      <td>30 Sep</td>
      <td>Jul</td>
      <td>3.4</td>
      <td>1.0</td>
      <td>3.4</td>
      <td>0.3</td>
    </tr>
    <tr>
      <td>Services</td>
      <td>&#xA0;</td>
      <td>&#xA0;</td>
      <td>Jun</td>
      <td>3.2</td>
      <td>1.1</td>
      <td>3.6</td>
      <td>0.3</td>
    </tr>
    <tr>
      <td>Retail&#xA0;</td>
      <td>&#xA0;</td>
      <td>18 Sep</td>
      <td>Aug</td>
      <td>3.2</td>
      <td>0.5</td>
      <td>3.9</td>
      <td>0.4</td>
    </tr>
    <tr>
      <td>Sales</td>
      <td>&#xA0;</td>
      <td>&#xA0;</td>
      <td>Jul</td>
      <td>3.1</td>
      <td>0.6</td>
      <td>2.5</td>
      <td>0.0</td>
    </tr>
    <tr>
      <td>Agriculture</td>
      <td>0.6</td>
      <td>&#xA0;</td>
      <td>Q2</td>
      <td>1.4</td>
      <td>-0.3</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. This implementation is based on the Toggle Table.

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.

To define a table as a responsive table use class="tablesaw" on the table element and specify the appropriate mode e.g. data-mode="columntoggle" in this case.

The columns which are shown by default are controlled as such:


<th data-priority="persist">Not eligible for toggle, always shows</th>
<th data-priority="1">Shows at (min-width: 20em) (320px)</th>
<th data-priority="2">Shows at (min-width: 30em) (480px)</th>
<th data-priority="3">Shows at (min-width: 40em) (640px)</th>
<th data-priority="4">Shows at (min-width: 50em) (800px)</th>
<th data-priority="5">Shows at (min-width: 60em) (960px)</th>
<th data-priority="6">Shows at (min-width: 70em) (1120px)</th>

Adding the attribute data-minimap adds an element to the chart indicating to the user which columns are currently visible.