Tables are used to list all information from a data set. The base style establishes preferred padding, font-size, and font-weight treatments. To enhance or customize the look of the table, apply any additional classes listed below.
Tables should be wrapped in a container, .s-table-container. This provides horizontal scrolling when necessary in the smallest breakpoints. The default table style is a bordered cell layout with a stylized header row.
To indicate that the user can sort a table by different columns, add the s-table__sortable class to the table.
The <th> cells should include arrows to indicate sortability or the currently applied sorting. In addition, the column that is currently sorted should be indicated with the is-sorted class on its <th>.
To make your table user-sortable, do the following:
Style the table as sortable as explained in the section above.
Set data-controller="s-table" on the <table> element.
Set data-s-table-target="column" and data-action="click->s-table#sort" on each of the <th> elements that control sorting.
Add the three icons for showing ascending sort, descending sort, and unsorted to each of these header cells, hiding the first two with a d-none class. Add the js-sorting-indicator class to each of the icons, and add js-sorting-indicator-asc, js-sorting-indicator-desc, and js-sorting-indicator-none to the appropriate icon.
Note: Using js-… classes is not really the optimal way of doing this, and will probably replaced with something better eventually. When that happens, the js-… mechanism will be deprecated but continue to be supported for a while, so you have ample time to update things.
By default, the data is sorted by the content of the cell. If you need to use a different value, for example because your cell contains a human-readable date, add a data-s-table-sort-val attribute to the cell.
If a column contains any data that is not an integer, the data will be sorted lexicographically. Otherwise it will be sorted numerically, with empty cells being considered the lowest number.
If the table contains rows that should not be sorted, but rather always be at the top or always be at the bottom, add data-s-table-sort-to="top" or data-s-table-sort-to="bottom" to the <tr> element.
To help users, you can add data visualizations into table cells. These are useful to help visualize the reported data and calling extra attention to the table cell. These graphs should always be paired with a number.
For tables that include inactive or disabled rows, such as inactive users or teams, .is-disabled can be applied to any <tr>. Additionally, .is-enabled can be applied to any <th> or <td> that you’d like to ignoring the parent disabled styling (such as a persistent link to reactivate a disabled account).