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
• Row selection

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>

Colored headers

For text heavy pages (e.g., FAQ, APIs, Documentation, Pricing), or pages where there is one primary grid, a colored header may be appropriate. For tables immediately surrounded by other distinguishing elements, a clear header may be appropriate.

Similar to other components, the available styles are .table-{primary, success, info, warning, danger}, as well as table-inverse (black header) and table-clear (clear header).

<table class="table table-striped table-info"> ... </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>

Selection

Built into SharePoint.

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