Tables

Data table

Standard data table with sorting options.

Buttons used within these tables should stick to button--small.

The td containing any buttons can have data-th="Actions" to stop the buttons wrapping. The heading of the buttons column can have the class column-actions-heading to hide the 'Actions' heading text (this text will still be available to screen readers).

Ratione voluptatem Maiores voluptatem Praesentium ut asperiores voluptas sed dolorem Temporibusquoset Nihil voluptas Account status Actions
Omnis autem Ea quo et Doloribus blanditiis et Ipsa dolore vel
Delete
Veniam exercitationem Architecto autem quibusdam Deleniti laboriosam et Illum minima
Delete
Quae et Omnis consequatur iure Sint distinctio nobis Itaque modi non
Delete
Doloribus corrupti Maiores fugit et Dolores aut voluptatem Et sit consequatur
Delete
Soluta non Architecto porro quis In et molestiae Sunt cupiditate
Delete

Standard sortable data table. Wrapping the table in table-responsive is optional and simply ensures wide tables don't break layout on small devices.

In general data tables should be limited to admin interfaces, which would be less likely to be accessed via mobile devices. They may also be used to display smaller amounts of tabular data where other layout methods don't exist.

The <th> of a sorted header should include aria mark-up: aria-sort="ascending|descending|none|other". You should apply aria-sort to only one header at a time. In the following code the first column header has aria-sort="ascending" and no aria code on any other <th>

<th> is used in rows to help clarify to screen-readers which row the action buttons apply to.

Note: a <th> should not remain empty. According to WAVE, "If the table cell is a header, provide text within the cell that describes the column or row. If the cell is not a header or must remain empty (such as the top-left cell in a data table), make the cell a <td> rather than a <th>."

<!-- START data table component -->
<div class="table-responsive">
  <table>
    <thead>
      <tr>
        <th class="column-sortable" aria-sort="ascending"><a href="#" class="column-sortable__link column-sortable__link--up">Voluptas voluptas</a></th>
        <th>Deleniti autem</th>
        <th class="column-sortable"><a href="#" class="column-sortable__link">Nobis qui rem iusto doloribus cum</a></th>
        <th class="column-sortable"><a href="#" class="column-sortable__link column-sortable__link--down">Temporibusquoset Quo impedit</a></th>
        <th>Account status</th>
        <th class="column-actions-heading">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr class="table-row-disabled">
        <th>Quisquam facere</th>
        <td>Explicabo delectus rem</td>
        <td>Perferendis quia aspernatur</td>
        <td>Voluptatem sed suscipit</td>
        <td><p class="icon-inline--left icon--account-monza">Unverified</p></td>
        <td data-th="Actions">
          <div class="buttons">
            <button class="button button--small" disabled>Edit</button>
            <a href="#" class="button button--small disabled" role="button">Delete</a>
          </div>
        </td>
      </tr>
      <tr>
        <th>Qui alias</th>
        <td>Ipsum quia amet</td>
        <td>Consequatur quia nulla</td>
        <td><a href="#" title="Test link">Qui minima</a></td>
        <td><p class="icon-inline--left icon--account-monza">Unverified</p></td>
        <td data-th="Actions">
          <div class="buttons">        
            <button class="button button--small">Edit</button>
            <a href="#" class="button button--small" role="button">Delete</a>         
          </div>
        </td>
      </tr>
      <tr class="table-row-disabled">
        <th>Deleniti sunt</th>
        <td>Quas eos tempora</td>
        <td>Et repellendus quisquam</td>
        <td>Eveniet et velit</td>
        <td><p class="icon-inline--left icon--account-dark">Verified</p></td>
        <td data-th="Actions">
          <div class="buttons">
            <button class="button button--small" disabled>Edit</button>
            <a href="#" class="button button--small disabled" role="button">Delete</a>
          </div>
        </td>
      </tr>
      <tr>
        <th>Enim quis</th>
        <td>Repellat veritatis occaecati</td>
        <td>Soluta eligendi aut</td>
        <td>Praesentium ipsa sequi</td>
        <td><p class="icon-inline--left icon--account-monza">Unregistered</p></td>
        <td data-th="Actions">
          <div class="buttons">       
            <button class="button button--small">Edit</button>
            <a href="#" class="button button--small" role="button">Delete</a>         
          </div>
        </td>
      </tr>
      <tr>
        <th>Molestiae est</th>
        <td>Earum pariatur eos</td>
        <td>Deserunt vel quae</td>
        <td><a href="#" title="Test link">Consectetur temporibus</a></td>
        <td><p class="icon-inline--left icon--account-monza">Unregistered</p></td>
        <td data-th="Actions">
          <div class="buttons">
            <button class="button button--small">Edit</button>
            <a href="#" class="button button--small" role="button">Delete</a>         
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!-- END data table component -->

Table with fixed columns width

Adding the class table--fixed-column-width will make the columns equal width - this can look neater.

Tempora temporibus Quibusdam est Dicta quia ut hic ex molestiae Temporibusquoset Praesentium voluptatem Account status Actions
Et et Enim eum quibusdam Nemo iste dolores Enim deleniti voluptas Delete
Sint ut Tempore qui est Et quod in Reprehenderit non Delete
Porro doloribus Eius qui rem Omnis quae dolores Aut minus quisquam Delete
Incidunt voluptatem Libero placeat repudiandae Voluptatibus et dolores Tempore aliquam sit Delete
Omnis inventore Expedita dolorem minus Sed voluptates libero Sed vitae Delete

Finer control of a table

There are some classes that in combination can give you a lot more control of how your table looks.

Borderless table

We can add table-borderless to the surrounding div.

QualificationRequirementNotes
UCAS Tariff100 Tariff pointsFrom either A level, International Baccalaureate, or Scottish Higher
A levelBBB

Bold text in a column

We can add a class to make text bold in a specific column. This class is added to the surrounding div.

In the following example table-col2-bold had been added to bold the text in the second column.

QualificationRequirementNotes
UCAS Tariff100 Tariff pointsFrom either A level, International Baccalaureate, or Scottish Higher
A levelBBB

Align a column's text to the right

We can add a class to align the text to the right in a specific column.

In the following example table-col1-right had been added to right align the text in the first column.

QualificationRequirementNotes
UCAS Tariff100 Tariff pointsFrom either A level, International Baccalaureate, or Scottish Higher
A levelBBB

Control column widths by %

We can state the percentage widths of the columns by attaching classes to tds.

In the following example column-width--20pc had been added to all the tds that make up the first and second columns. The class column-width--60pc had been added to all the tds that make up the third column.

It's a good idea for the tds in a row to add up to 100%!

QualificationRequirementNotes
UCAS Tariff 100 Tariff points From either A level, International Baccalaureate, or Scottish Higher
A levelBBB

Hide table head row

We can hide the top row if the columns are self-explanatory. They will still appear to screen readers.

We do this by adding the class table-hide-head-row to the div surrounding the table.

QualificationRequirementNotes
UCAS Tariff 100 Tariff points From either A level, International Baccalaureate, or Scottish Higher
A levelBBB

Data table, responsive list

Adding the class table-responsive--list will render the table as a list at smaller widths. The table headers will not be displayed, so this won't be suitable for a table that has sortable columns.

This table will break to a list view on smaller devices. If you would like it to break sooner you can add the class table-responsive--list--break-at-medium

Veniam eligendi Illum Dignissimos laborum in Temporibusquoset aut et Actions
Sunt aut Iure deleniti beatae Enim consectetur corrupti Architecto assumenda laborum
Ratione repellat Assumenda in aperiam Perferendis eos voluptate Fugit exercitationem eos
Nostrum cum Id minima nostrum Aut est explicabo Nemo voluptatem sed
Fuga doloremque Rerum sit vel Exercitationem autem nihil Vitae maiores molestias
Deserunt impedit Similique deleniti ex Quia sunt voluptas Iure repellat numquam
Rerum deleniti Omnis quaerat quis Earum enim sint Et et repellendus
Sit reiciendis Odio quia aut Aut natus ipsum Nesciunt et et
Qui blanditiis Eum non voluptas Sint sit velit Sapiente eos et
Praesentium necessitatibus Rerum sint magnam Magnam reprehenderit libero Ut blanditiis distinctio
Fugit eos Molestiae veniam ut Id at unde Ea eos in
Harum voluptatibus Fugiat omnis praesentium Molestiae quis est Et maiores sunt
Aut consequatur Corporis velit nisi Temporibus molestiae amet Voluptas quibusdam voluptatibus
Nemo laborum Et harum blanditiis Laudantium porro est Fugiat ut enim
Officia et Nobis corrupti tempore Labore fugit quos Consequatur et voluptatem
Nemo soluta Repellat quia suscipit Atque animi vel Delectus praesentium unde
Quod est Dolores ut voluptatem Repellat fuga officia Quaerat excepturi eaque
Dolorum maxime Nisi dolorum quis Numquam quo reiciendis Explicabo ut vel
Sit quo Et animi ut Et quibusdam debitis Consequuntur est ducimus
Vel odit Nulla quas temporibus Ut veritatis dolor Ullam et doloremque
Accusantium dicta Facere ratione sunt Minus et expedita Vero magnam omnis

All cells will need a data-th attribute for the column name. This is used at small screen sizes to identify the cells when displayed as a list.

<!-- START table-data-long-responsive-list component -->
<div class="table-responsive table-responsive--list">
  <table>
    <thead>
      <tr>
        <th class="column-sortable" aria-sort="ascending"><a href="#" class="column-sortable__link column-sortable__link--up">Est dicta</a></th>
        <th>Placeat</th>
        <th class="column-sortable"><a href="#" class="column-sortable__link">Quibusdam sint impedit</a></th>
        <th class="column-sortable"><a href="#" class="column-sortable__link column-sortable__link--down">Temporibusquoset corrupti architecto</a></th>
        <th class="column-actions-heading">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <!-- NB: All cells will need a data-th attribute for the column name. -->
        <!-- This is used at small screen sizes to identify the cells when displayed as a list. -->
        <th data-th="Est dicta">Omnis suscipit</th>
        <td data-th="Placeat">Suscipit distinctio nihil</td>
        <td data-th="Quibusdam sint impedit">Reprehenderit ducimus et</td>
        <td data-th="Temporibusquoset corrupti architecto">Corporis voluptate voluptatem</td>
        <td data-th="Actions">
          <button class="button button--small">View</button>
          <button class="button button--small">Delete</button>
        </td>
      </tr>
      <tr>
        <!-- NB: All cells will need a data-th attribute for the column name. -->
        <!-- This is used at small screen sizes to identify the cells when displayed as a list. -->
        <th data-th="Est dicta">Velit eum</th>
        <td data-th="Placeat">Quae ullam placeat</td>
        <td data-th="Quibusdam sint impedit">Praesentium ea sint</td>
        <td data-th="Temporibusquoset corrupti architecto">Atque quo nobis</td>
        <td data-th="Actions">
          <button class="button button--small">View</button>
          <button class="button button--small">Delete</button>
        </td>
      </tr>
      <tr>
        <!-- NB: All cells will need a data-th attribute for the column name. -->
        <!-- This is used at small screen sizes to identify the cells when displayed as a list. -->
        <th data-th="Est dicta">Tempore natus</th>
        <td data-th="Placeat">Voluptatum accusamus et</td>
        <td data-th="Quibusdam sint impedit">Beatae minima aliquam</td>
        <td data-th="Temporibusquoset corrupti architecto">Tempora repudiandae doloribus</td>
        <td data-th="Actions">
          <button class="button button--small">View</button>
          <button class="button button--small">Delete</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!-- END table-data-long-responsive-list component -->

Data table, column select

Choose columns to display

Voluptatem perferendis Et al Minima aut accusantium dolorem explicabo eos Nisi sit Dicta ratione Velit quo Quod nam Illum occaecati Temporibusquoset Non ab Actions
Quod eos Possimus qui illum Voluptatem soluta porro Quibusdam modi voluptatem Animi autem et Inventore dolor ut Quidem vel voluptatem Sit aliquam quos Omnis modi eos
Enim debitis Rerum quidem eum Nesciunt velit praesentium Asperiores nihil repudiandae Deserunt qui et Et impedit sint Rerum aut et Neque ducimus eos Laborum quaerat neque
Sed consequuntur Incidunt dolorum est Debitis et est Odio deserunt hic Nihil tenetur inventore Corrupti eligendi asperiores Velit excepturi ut Harum sit quibusdam Omnis esse optio
Magnam eos Nihil dignissimos harum Optio reiciendis et Deleniti voluptatibus deserunt Est reprehenderit dolores Alias quaerat perferendis Commodi a delectus Ex omnis illum Cupiditate pariatur tempore
Ex et Quia eligendi ea Dolorem nostrum sunt Mollitia reprehenderit debitis Nesciunt quisquam ut Non quaerat inventore Vero non repellat Cum porro aut Aperiam nobis aut
Perferendis eum Animi quos et Voluptas velit porro Dolorem corrupti voluptatem Dicta assumenda at Sunt enim incidunt Minima eum qui Asperiores dicta temporibus Quia consequatur omnis

Data table with clickable row highlight

Adding the class .table-responsive--active-row to any <tr> will add a hover highlight to the row and change its cursor to a pointer to indicate that it is a clickable link.
The highlight colour will adopt the scheme colour if used.

Consectetur voluptates Blanditiis voluptatem Minus aperiam voluptates qui cum quibusdam Temporibusquoset Sit sapiente Actions
Illo dolore Consequuntur aliquid odit Ducimus qui vel Consequatur aut qui
Delete
Atque voluptas Nemo quia nostrum Accusantium consequuntur non Inventore suscipit
Delete
Et temporibus Nulla laboriosam ut Aut dolor modi Voluptas voluptas ad
Delete
Nihil autem Laudantium labore consequatur Quae tempore vel Reiciendis consequuntur qui
Delete
Harum dignissimos Quia enim laudantium Eveniet expedita et Debitis aspernatur illo
Delete