Tables

Horizontal borders

Shows only horizontal table cell borders. Good for tables with lots of data that can be sorted and filtered.

<div class="s-table-container">
    <table class="s-table s-table__bx">
        …
    </table>
</div>

Simple borders

Removes most of the default borders and backgrounds. Good for tables without much data that don’t need to be sorted or filtered.

<div class="s-table-container">
    <table class="s-table s-table__bx-simple">
        …
    </table>
</div>

No borders

Removes all table cell borders.

<div class="s-table-container">
    <table class="s-table s-table__b0">
        …
    </table>
</div>

Zebra striping

When tables have a lot of information, you can help users group information and isolate data by adding zebra striping.

<div class="s-table-container">
    <table class="s-table s-table__stripes">
        …
    </table>
</div>

Small

<div class="s-table-container">
    <table class="s-table s-table__sm">
        …
    </table>
</div>

Default

<div class="s-table-container">
    <table class="s-table">
        …
    </table>
</div>

Large

<div class="s-table-container">
    <table class="s-table s-table__lg">
        …
    </table>
</div>

Classes

Examples

// Example 1
<div class="s-table-container">
    <table class="s-table">
        <tr>
            <td class="s-table--cell2">…</td>
            <td>…</td>
        </tr>
    </table>
</div>
// Example 2
<div class="s-table-container">
    <table class="s-table">
        <tr>
            <td class="s-table--cell3">…</td>
            <td class="s-table--cell6">…</td>
            <td>…</td>
            <td>…</td>
            <td>…</td>
        </tr>
    </table>
</div>
// Example 3
<div class="s-table-container">
    <table class="s-table">
        <tr>
            <td class="s-table--cell4">…</td>
            <td>…</td>
            <td>…</td>
            <td>…</td>
            <td>…</td>
            <td class="s-table--cell2">…</td>
        </tr>
    </table>
</div>

Vertical alignment

The default vertical alignment is middle. You change a table’s or a specific cell’s vertical alignment by using the Vertical Alignment atomic classes.

<div class="s-table-container">
    <table class="s-table">
        <tbody>
            <tr>
                <td class="va-top">…</td>
                <td class="va-middle">…</td>
                <td class="va-bottom">…</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="s-table-container">
    <table class="s-table va-bottom">
        <tbody>
            <tr>
                <td>…</td>
                <td>…</td>
                <td>…</td>
            </tr>
        </tbody>
    </table>
</div>

Text alignment

Text alignment can be changed at a table or cell level by using atomic text alignment classes. Columns containing copy should be left-aligned. Columns containing numbers should be right-aligned.

<div class="s-table-container">
    <table class="s-table">
        <tbody>
            <tr>
                <td class="ta-left">…</td>
                <td class="ta-center">…</td>
                <td class="ta-right">…</td>
            </tr>
        </tbody>
    </table>
</div>
<div class="s-table-container">
    <table class="s-table ta-right">
        <tbody>
            <tr>
                <td>…</td>
                <td>…</td>
                <td>…</td>
            </tr>
        </tbody>
    </table>
</div>

JavaScript sorting

Stacks provides built-in functionality for letting the user sort a table by the values in a column through clicking the column header. This requires the complete data to already exist in the table (e.g. it is not going to work if the table is paged and requires a call to the server to update data on sorting). See the JavaScript introduction for general information about JS in Stacks.

To make your table user-sortable, do the following:

1. Style the table as sortable as explained in the section above.
2. Set data-controller="s-table" on the <table> element.
3. Set data-s-table-target="column" and data-action="click->s-table#sort" on each of the <th> elements that control sorting.
4. 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 be 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.

JavaScript data attributes

JavaScript example

<div class="s-table-container">
    <table class="s-table s-table__sortable" data-controller="s-table">
        <thead>
            <tr>
                <th scope="col" data-s-table-target="column">
                    <button data-action="click-&gt;s-table#sort">
                        Season
                        <svg class="js-sorting-indicator js-sorting-indicator-asc d-none">…</svg>
                        <svg class="js-sorting-indicator js-sorting-indicator-desc d-none">…</svg>
                        <svg class="js-sorting-indicator js-sorting-indicator-none">…</svg>
                    </button>
                </th>
                …
            </tr>
        </thead>
        <tbody>
            <tr><td>Winter</td><td data-s-table-sort-val="12">December</td><td>2</td></tr>
            <tr><td>Spring</td><td data-s-table-sort-val="3">March</td><td>13</td></tr>
            <tr><td>Summer</td><td data-s-table-sort-val="6">June</td><td>25</td></tr>
            <tr><td>Fall</td><td data-s-table-sort-val="9">September</td><td>13</td></tr>
            <tr data-s-table-sort-to="bottom" class="fw-bold">
                <td colspan="2">Average temperature</td>
                <td>13</td>
            </tr>
        </tbody>
    </table>
</div>