A table is used to display associated information in an easily scannable way.


Tables provide the means for users to easily read and compare different pieces of information.

If a column can be sorted it will show an arrow next to the column heading. The actively sorted column is indicated by a black arrow and the user can then re-sort columns.


Default table

Normal table with rows and columns.

Default Table Small
Default Table

Empty table

Use a conditional to decide whether to display the table and if there are no rows, display this block instead.

Empty Table Medium
Empty Table Large

Sortable table

We use a plugin called DataTables to easily search, sort and view tables with a lot of data.

Highlights / Flags

A table row can be highlighted with .m-table__row--highlighted, which adds a pink left border.

Optionally, a small text flag may be added to provide extra context for the highlighted row on larger screens. On smaller screens where there may not be enough space for it, it will not be visible (though the border highlight is visible at all screen sizes).

Tables that have highlighted rows need some left padding on the first cell of each row to make space for the highlight. Using .m-table--highlightable will add this.

Highlights Small