Tables

A responsive table that allows the user to see the information they need on any viewport width.

  • Use .persist to stop users hiding particular columns
  • To show columns initially use .essential
  • To hide columns initially use .optional

Data table

Uses the class .data-table to right-align the content.

Company name Last Trade Trade Time Change Prev Close Open Bid Ask 1y Target Est
Column summaries (footers) Footer content 1 Footer content 2 Footer content 3 Footer content 4 Footer content 5 Footer content 6 Footer content 7 Footer content 8
GOOG Google Inc. 597.74 12:12PM 14.81 (2.54%) 582.93 597.95 597.73 x 100 597.91 x 300 731.1
AAPL Apple Inc. 378.94 12:22PM 5.74 (1.54%) 373.2 381.02 378.92 x 300 378.99 x 100 505.94
AMZN Amazon.com Inc. 191.55 12:23PM 3.16 (1.68%) 188.39 194.99 191.52 x 300 191.58 x 100 240.32
ORCL Oracle Corporation 31.15 12:44PM 1.41 (4.72%) 29.74 30.67 31.14 x 6500 31.15 x 3200 36.11
MSFT Microsoft Corporation 25.5 12:27PM 0.66 (2.67%) 24.84 25.37 25.50 x 71100 25.51 x 17800 31.5
CSCO Cisco Systems, Inc. 18.65 12:45PM 0.97 (5.49%) 17.68 18.23 18.65 x 10300 18.66 x 24000 21.12
YHOO Yahoo! Inc. 15.81 12:25PM 0.11 (0.67%) 15.7 15.94 15.79 x 6100 15.80 x 17000 18.16

        <table data-rwdtable  class="data-table" id="tech-companies-2">
            <thead>
              <tr>
                  <th scope="col"   class="persist essential ">
                    Company name
                  </th>
                  <th scope="col"   class="essential ... ">
                    Last trade
                  </th>
              </tr>
            </thead>
        
              <tfoot>
                  <tr>
                      <th scope="row">Footer summaries</th>
                      <td>
                        Footer content 1
                      </td>
                      <td>
                        ...
                      </td>
                  </tr>
              </tfoot>
        
            <tbody>
                <tr>
                    <th scope="row">GOOG Google Inc.</th>
                    <td >
                        597.74
                    </td>
                    <td >
                        ...
                    </td>
                </tr>
            </tbody>
        </table>
  

Content table

Uses the class .content-table to left-align the content.

Registrar Domain Name Status Renewal
View Jisc eg1.ac.uk Pending DD/MM/YYYY
View Jisc eg2.ac.uk Pending DD/MM/YYYY
View Jisc eg3.ac.uk Delegated DD/MM/YYYY
View Jisc eg4.ac.uk Delegated DD/MM/YYYY
View Jisc eg5.ac.uk Delegated DD/MM/YYYY

        <table data-rwdtable  class="content-table" id="tech-companies">
            <thead>
              <tr>
                  <th scope="col"   class="persist essential ">
                    
                  </th>
                  <th scope="col"   class="essential ">
                    Registrar
                  </th>
                  <th scope="col"   class="optional ">
                    Domain Name
                  </th>
              </tr>
            </thead>
        
              <tfoot>
                  <tr>
                  </tr>
              </tfoot>
        
            <tbody>
                <tr>
                    <th scope="row">View</th>
                    <td >
                        Jisc
                    </td>
                    <td >
                        eg1.ac.uk
                    </td>
                    <td >
                        Pending
                    </td>
                    <td >
                        DD/MM/YYYY
                    </td>
                </tr>
                <tr>
                    <td >
                        ...
                    </td>
                </tr>
            </tbody>
        </table>
  

How to use this pattern

Only use when the content is genuinely tabular - where there are logical relationships between entries in two dimensions (horizontally and vertically). Do not use simply for layout purposes.

Sortable table

Allows users to sort the data in a table by its column headings, either ascending or descending (ASCII order). Set class .data-sort-default on the <th> of the column that is to be sorted by default.

Registrar Domain Name Status Traffic
View Jisc eg1.ac.uk Pending 12,132
View Jisc eg2.ac.uk Pending 152,432
View Jisc eg3.ac.uk Delegated 0
View Jisc eg4.ac.uk Delegated 16,123
View Jisc eg5.ac.uk Delegated 124

       <table data-rwdtable data-rwdtable-sortable class="content-table" id="tech-companies">
           <thead>
             <tr>
                 <th scope="col"   class="persist essential ">
                   
                 </th>
                 <th scope="col"   class="essential ">
                   Registrar
                 </th>
                 <th scope="col"   class="optional ">
                   Domain Name
                 </th>
                 <th scope="col"   class="essential ">
                   Status
                 </th>
                 <th scope="col" data-sort-default  class="optional ">
                   Traffic
                 </th>
             </tr>
           </thead>
       
       
           <tbody>
               <tr>
                   <th scope="row">View</th>
                   <td >
                       Jisc
                   </td>
                   <td >
                       eg1.ac.uk
                   </td>
                   <td >
                       Pending
                   </td>
                   <td data-sort-value="12132">
                       12,132
                   </td>
               </tr>
               <tr>
                   <th scope="row">View</th>
                   <td >
                       Jisc
                   </td>
                   <td >
                       eg2.ac.uk
                   </td>
                   <td >
                       Pending
                   </td>
                   <td data-sort-value="152432">
                       152,432
                   </td>
               </tr>
               <tr>
                   <th scope="row">View</th>
                   <td >
                       Jisc
                   </td>
                   <td >
                       eg3.ac.uk
                   </td>
                   <td >
                       Delegated
                   </td>
                   <td >
                       0
                   </td>
               </tr>
               <tr>
                   <th scope="row">View</th>
                   <td >
                       Jisc
                   </td>
                   <td >
                       eg4.ac.uk
                   </td>
                   <td >
                       Delegated
                   </td>
                   <td data-sort-value="16123">
                       16,123
                   </td>
               </tr>
               <tr>
                   <th scope="row">View</th>
                   <td >
                       Jisc
                   </td>
                   <td >
                       eg5.ac.uk
                   </td>
                   <td >
                       Delegated
                   </td>
                   <td >
                       124
                   </td>
               </tr>
           </tbody>
       </table>
 

Technical implementation

To make a table sortable, add the data attribute `data-rwdtable-sortable` to the table element.

The cell values are used to sort the rows. If the cell values are numbers, then the sorting function will be numeric. However, if the contents of the cells is text (or numbers that look like text) the sort function will be alphabetical.

You may need to display the cell value differently from what it needs to be sorted as. For example, you may wish to display large numbers with thousand separators (eg 123,111) or suffix the value with a unit (eg 100k). In this situation these values will be ordered alphabetically not numerically. Therefore add the data attribute `data-sort-value` to the parent `td` element, and set the value of this attribute to the number the cell represents. When sorting, the component will use this value instead of the value in the cell.

To set a default sort order, add `data-sort-default` to the appropriate `th` element in the header of the table.