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.
Normal table with rows and columns.
Use a conditional to decide whether to display the table and if there are no rows, display this block instead.
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.