Tables

Purpose

Users need to see structured data in a manner that makes the data readable, scannable, and comparable.

Description

Tables provide customizable views of tabular data with features including sorting and managing columns. Tables are useful when a collection of data requires vertical alignment through columns for quick scanning and discovery of information, as well as for data that with many attributes that requires sorting, grouping, and a user customizable display.

Basic functionality

Tables list a collection of items in rows that have similar attributes, usually with headers to label each attribute.

The following functionality can be provided by tables:

• Sorting by columns
• Resizing columns
• Showing and hiding columns
• Reordering columns
• Row selection
• Performing actions on a row
• Grouping by attributes
• Expanding rows

A table’s complexity and needs can vary greatly. This pattern provides many different features a table may have. Features can be mixed and matched based on your needs. Don’t include features unless they’re actually needed.

Styles

Standard

A standard table has subtle row borders.

<table class="table"> ... </table>

Striped

A striped table adds an alternating row background color, increasing usability for wider tables.

<table class="table table-striped"> ... </table>

Bordered

A bordered table adds column and row borders, increasing usability for content-dense tables.

<table class="table table-bordered"> ... </table>

Borderless

A borderless table removes all borders, decreasing clutter for simple tables.

<table class="table table-borderless"> ... </table>

Row hover

Rows can have a hover effect to indicate click interactions.

<table class="table table-borderless table-hover"> ... </table>

Condensed

Use the condensed style, which reduces cell padding, for very large amounts of data.

<table class="table table-bordered table-condensed"> ... </table>

Comfortable

Use the comfortable style, which increases cell padding, for making simple data breathe more.

<table class="table table-outline table-comfortable"> ... </table>

Headers

Normal

A normal header scrolls with the data.

<table class="table"> 
    <thead>
        <tr>
            <th>Project name</th>
            <th>Description</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody> ... </tbody>
</table>

Fixed

A fixed header remains visible as the table body is scrolled. This is useful for larger amounts of data.

Headerless

If the content of the table is self-explanatory for your users, it may not need a header. Provide an alternative for sorting, if necessary (e.g., a toolbar with a dropdown).

<table class="table"> 
    <tbody> ... </tbody>
</table>

Sorting

Single sorting

Clicking a header cell sets that column as the currently sorted column. The first click should sort descending, the second click should sort ascending.

<table role="grid" class="table table-sortable table-bordered table-striped">
    <thead>
        <tr role="row">
            <th scope="col" role="columnheader" aria-sort="ascending" class="sortable active" >Project name <i class="icon icon-caret-down"></i></th>
            <th scope="col" role="columnheader" aria-sort="none" class="sortable">Description</th>
            <th>Price</th>
        </tr>
    </thead>
    ...
</table>

Multi sorting

When a table is sorted by multiple columns, the sort order is indicated by the superscript numbers.

Performing a shift+click on a header cell should add that column to the sorted list. A second shift+click on the same header cell should toggle the sort direction. A third shift+click on the same header cell should remove that column from the sort list. A left click should clear the sort list and then behave as a single sort.

<table role="grid" class="table table-sortable table-bordered table-striped">
    <thead>
        <tr role="row">
            <th scope="col" role="columnheader" aria-sort="other" class="sortable active">Event <i class="icon icon-caret-down"></i> <sup >1</sup></th>
            <th scope="col" role="columnheader" aria-sort="none" class="sortable active">Date <i class="icon icon-caret-up"></i> <sup >2</sup></th>
            <th>Module</th>
        </tr>
    </thead>
    ...
</table>

Selection

Checkboxes are generally the best way to facilitate multi-row selection, especially if clicking a row already has a different action (e.g., opening an email).

• Checking a checkbox should highlight the corresponding row.
• If there’s a control for selecting all/none, it should represent the current state of the row selection, including an indeterminate state.
• shift+click should select all items between the previoulsy clicked checkbox and the currently clicked checkbox.

<table class="table">
    <thead>
        <tr>
            <th style="width: 28px;"><input type="checkbox"></th>
            <th>Project name</th>
            <th>Description</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox"></td>
            <td>Payments</td>
            <td><span >Process payments using third party api</span></td>
            <td><span >$5,400</span></td>
        </tr>
    </tbody>
</table>

Row action buttons

Buttons with the btn-hover and btn-icon-only classes.

<table class="table table-outline table-valign table-striped">
    <tbody>
        <tr>
            <td>
                <strong>IMG_234.jpg</strong><br><span >2 days ago</span>
            </td>
            <td class="text-right">
                <button class="btn btn-hover btn-icon-only" title="Delete" data-toggle="tooltip">
                    <i class="icon text-muted icon-close"></i> <span class="sr-only">Delete</span>
                </button>
                <button class="btn btn-hover btn-icon-only" title="More options" data-toggle="tooltip">
                    <i class="icon text-muted icon-ellipsis-v"></i> <span class="sr-only">More</span>
                </button>
            </td>
        </tr>
    </tbody>
</table>

Column customization

To provide column customization, add an icon to the top right corner of the table. Clicking on the icon will show the Show and hide columns dialog.

<table class="table table-bordered">
    <thead>
        <tr>
            <th>Project name</th>
            <th>Description</th>
            <th>Price</th>
            <th class="table-config-column"><button type="button" data-container="body" title="Show and hide columns" data-toggle="tooltip"><i class="icon icon-ellipsis-h"></i></button></th>
        </tr>
    </thead>
    ...
</table>

Show and hide columns dialog

This dialog provides the ability to show/hide columns as desired.

Grouping

Row grouping allows users to show and hide sets of rows that share a similar attribute.

Expandable rows

Expandable rows provide additional information about a row on demand.