Tables

The default table style is a bordered cell layout with a stylized header row.

<table class="s-table">
    <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col"></th>
            <th scope="col"></th>
            <th scope="col"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row"></th>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

Name	Reputation	Joined	Last seen
Aaron Shekey	263 7	Dec 1 ’17 at 20:24	just now
Joshua Hynes	611 11	Feb 12 at 18:47	Aug 10 at 14:57
Paweł Ludwiczak	25 8	Nov 28 ’17 at 20:21	1 hour ago
Piper Lawson	25 3	Jul 5 at 14:32	Aug 14 at 12:41

By default, tables are outlined, have borders on all cells, and have a styled header. Depending on the size and complexity of a table, these can all be configured.

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

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

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

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

Removes all table cell borders.

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

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

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

A table’s padding can be changed to be more or less condensed.

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

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

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

Table columns will size themselves based on their content. To set a specific width, you can use one of the following table cell classes to specify the width for any column.

// Example 1
<table class="s-table">
    <tr>
        <td class="s-table--cell2">…</td>
        <td>…</td>
    </tr>
</table>
// Example 2
<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>
// Example 3
<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>

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.

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

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.

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

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>.

<table class="s-table s-table__sortable">
    <thead>
        <tr>
            <th scope="col" class="is-sorted">Listing @Svg.ArrowDownSm</th>
            <th scope="col">Status @Svg.ArrowUpDownSm</th>
            <th scope="col">Owner @Svg.ArrowUpDownSm</th>
            <th scope="col" class="ta-right">Views @Svg.ArrowUpDownSm</th>
            <th scope="col" class="ta-right">Applies @Svg.ArrowUpDownSm</th>
        </tr>
    </thead>
    <tbody>
        …
    </tbody>
</table>

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-target="s-table.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 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.

<table class="s-table s-table__sortable" data-controller="s-table">
    <thead>
        <tr>
            <th data-target="s-table.column" data-action="click->s-table#sort">
                Season
                @Svg.ArrowUpSm.With("js-sorting-indicator js-sorting-indicator-asc d-none") 
                @Svg.ArrowDownSm.With("js-sorting-indicator js-sorting-indicator-desc d-none") 
                @Svg.ArrowUpDownSm.With("js-sorting-indicator js-sorting-indicator-none") 
            </th>
            <th data-target="s-table.column" data-action="click->s-table#sort">
                Starts in month
                … 
            </th>
            <th data-target="s-table.column" data-action="click->s-table#sort">
                Typical temperature in °C
                … 
            </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>

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.

<table class="s-table">
    <thead>…</thead>
    <tbody>
        <tr>
            <td>…</td>
            <td>…</td>
            <td>…</td>
            <td>…</td>
            <td class="s-table--progress">1,854</td>
            <td class="s-table--progress-bar">
                <div class="s-progress bg-white">
                    <div class="s-progress--bar bg-powder-400" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="67.247" style="width: 67.247%"></div>
                </div>
            </td>
            <td class="s-table--progress">43</td>
            <td class="s-table--progress-bar">
                <div class="s-progress bg-white">
                    <div class="s-progress--bar bg-orange-400" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="72.881" style="width: 72.881%"></div>
                </div>
            </td>
        </tr>
        …
    </tbody>
</table>

Generally for a checkbox input that’s placed first in the table row for bulk actions.

<table class="s-table">
    <thead>
        <tr>
            <th scope="col" class="s-table--bulk">
                <input type="checkbox" class="s-checkbox">
            </th>
            <th scope="col">…</th>
            <th scope="col">…</th>
            <th scope="col">…</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="s-table--bulk">
                <input type="checkbox" class="s-checkbox">
            </td>
            <td>…</th>
            <td>…</td>
            <td>…</td>
        </tr>
    </tbody>
</table>

Used mainly with data tables, the totals row increases the font-size for all cells within a row.

<table class="s-table ta-right">
    …
    <tfoot class="s-table--totals">
        …
    </tfoot>
</table>

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).

<table class="s-table">
    <tbody>
         <tr class="is-disabled">
            <td>…</td>
            <td>…</td>
            <td class="is-enabled">
                <a>Add</a>
            </td>
        </tr>
    </tbody>
</table>