The .qw-table class applies basic styles to the table element. Additional variant styles can be added to the table.

<table class="qw-table w-100">
    <thead>
        <tr>
            <th>Heading row</th>
            <th>Heading cell</th>
            <th>Heading cell</th>
            <th class="text-right">Numeric heading</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Row heading</th>
            <td>Cell</td>
            <td>Cell</td>
            <td class="text-right">1</td>
        </tr>
        <tr>
            <th>Row heading</th>
            <td>Cell</td>
            <td>Cell</td>
            <td class="text-right">2</td>
        </tr>
        <tr>
            <th>Row heading</th>
            <td>Cell</td>
            <td>Cell</td>
            <td class="text-right">3</td>
        </tr>
        <tr>
            <th>Row heading</th>
            <td>Cell</td>
            <td>Cell</td>
            <td class="text-right">4</td>
        </tr>
    </tbody>
</table>
                

Table widths are set by the contents of the table. Use width utilities on the .qw-table to set specific widths.

Table sizes

Cell padding is responsive, based on the screen width. When space is limited, you can add .qw-table-condensed to a .qw-table to keep padding at the smallest size.

Reminder: decreased white space can affect scannability and lead to parsing errors.

Bordered

The base table style does not include a border around the table. If a border is needed, add a class of .qw-table-bordered.

Layout Types

The default widths of the cells is set by the browser. If all cells of a table row need to be the same width, add .qw-table-layout-fixed to the .qw-table. Width utilities can also set table cell sizes.

Row states

The rows of a table can have different states. The styles are applied to the row's tr element. These states include: info - .qw-table-row-info, success - .qw-table-row-success, warning - .qw-table-row-warning, and danger - .qw-table-row-danger.

Row Highlighting

Add .qw-table-row-highlight to the .qw-table to get a hover/focus state on rows. This can help a user focus on a specific row, but should be reserved for tables with lots of columns.

Column highlighting

A column highlight may be added sparingly to emphasize highly important content and draw attention to one column. To highlight a column, add the class .qw-table-col-highlight to all cells in that column.

Column Divider

A column divider can be used to group contents and separate them from the rest of the data points in a row. They should be used sparingly and never added to every column. Add .qw-table-col-separator to all cells in a column to add separator(s) to a column. The first and last columns in the table will automatically only apply a border to the right and left sides, respectively. If you wish to only apply a border to one side, use .qw-table-col-separator-l or .qw-table-col-separator-r.

Striped Tables

An alternate to borders, striped tables also assist users in scanning contents of a row. To create a striped table, add the modifier class .qw-table-striped to the table.

Striped tables are for use in limited contexts. It's recommended (but not required) that their use is limited to condensed tables. Striped tables must follow the following rules:

• The table does not have row borders.
• The table is guaranteed to have at least 4 rows. It can cause confusion when a row appears highlighted.
• Do not use on a table with selectable rows.
• Do not use on a table with column dividers or highlights.

Table Interaction

Multiple row selection

If you offer the ability to select multiple rows in a table, the first column in the table is where the selection element, a checkbox, is to be placed. A checkbox without a visible label is allowed, but must be only used if the purpose of the control is made clear elsewhere. The label must be hidden in an accessible manner.

Responsive tables

Create responsive tables by wrapping any table in .qw-table-responsive to make them scroll horizontally, particularly on small screen devices. This use should be limited, as users may not be aware the table is scrollable and miss important content.

<div class="qw-table-responsive qw-scrollbar border border-grey-2">
    <table class="qw-table">
    . . .
    </table>
</div>
                

Overflow Tables

Overflow tables limit the height of the table container and allows for large data sets to be displayed in a smaller vertical space. The default height is 40vh, but can be set locally by updating the custom property variable --overflow-table-height via a style attribute.

<div class="qw-table-overflow-y qw-scrollbar border border-grey-2" style="--overflow-table-height: 300px;">
    <table class="qw-table">
    . . .
    </table>
</div>
                

Actions within Tables

Action menus placed within in tables are always the last column of the table.

In tables with a single action per row, links can be display with or without an icon.

If there are two actions, text-only links are used and separated by a pipe character.

If there are more than two actions, the primary action of the page is a text link, with all others in a dropdown menu.