Tables

This component can be used to apply basic styles to tabular data.

Tables should contain a thead and tbody at a minimum, and heading labels should make use of the scope attribute to denote where they apply.

Content within tables can also be centered by applying the center class to the entire table.

Default table

By default, tables that have no class applied to them and will appear like this.

Styled table

Add the class zebra to style the table.

Highlighted table

Rows or cells can be highlighted by applying the highlight class appropriately.

Wide table

Add the class wide if you have many columns which are squished together in the normal container.

Responsive table

Wrap the table with <div class="mobile-wrap"></div> so it becomes scrollable horizontally on mobile devices rather than squished to fit on the screen.

View the example below on a mobile device or emulated mode in devtools.

Sortable table

Add the attribute data-sortable to the table, as in the example above and this will allow you to sort the table data by column. Please note, this will only work on a simple table with one tbody and 1:1 headings to columns.

Columns are ordered by a natural sort algorithm, so currency and patterned data (eg. unit codes) will sort as expected. This can be overridden by adding an attribute data-sort-as="text" to the column heading th, to use the older alphabetic sort instead (illustrated with the "Text" column above).

The table will now display unsorted until a column is chosen. If you want the table to run a sort at page load, you can add data-sort-initial to a column heading th.

There may be a circumstance where you don't want the make a column sortable, you can prevent it from acquiring sortable links by adding the attribute data-sort-skip to the column heading th ("Offer made" in the example above).

Complex tables

Another complex table