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.

Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
<table class="table"> ... </table>

Striped

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

Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
<table class="table table-striped"> ... </table>

Bordered

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

Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
<table class="table table-bordered"> ... </table>

Borderless

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

Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
<table class="table table-borderless"> ... </table>

Row hover

Rows can have a hover effect to indicate click interactions.

Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
<table class="table table-borderless table-hover"> ... </table>

Condensed

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

Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
<table class="table table-bordered table-condensed"> ... </table>

Comfortable

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

Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
<table class="table table-outline table-comfortable"> ... </table>

Headers

Normal

A normal header scrolls with the data.

Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
<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.

Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000

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

CSS is 20 years old today!
13 points and 4 comments - 2 days ago
3.4%
Motion Experiments
31 points and 7 comments - 11 hours ago
2.5%
Is everyone a designer?
15 points and 3 comments - 3 days ago
0.0%
Introducing GIFV
24 points and 9 comments - 5 days ago
0.1%
<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.

Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
<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.

Event 1 Date 2 Module
user.create 10/21/14 Users
user.create 10/19/14 Users
user.register 10/21/14 Users
user.register 10/18/14 Users
<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.
Note: checkboxes are disabled for demo purposes.
Project name Description Price
Payments Process payments using third party api $5,400
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Account Management Improve account management workflow $6,000
<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.

IMG_234.jpg
2 days ago
IMG_235.jpg
2 days ago
IMG_236.jpg
2 days ago
IMG_237.jpg
2 days ago
<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.

Project name Description Price
Invoice Add invoice confirmation $4,500
Templates Refactor templates to use the new templating library $9,000
Payments Process payments using third party api $5,400
Account Management Improve account management workflow $6,000
<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.

Module 1 Event 2 Date 3
Module: User (2)
Event: Create (2)
Users Create 10/21/14
Users Create 10/19/14
Event: Register (2)

Expandable rows

Expandable rows provide additional information about a row on demand.

Project name Description Price
 Invoice Add invoice confirmation $4,500
Examiner
IP, Sikyin / 69776 / 1742
SPE (multiple)
John Olaskey
Applicants
Roman Amirpur
Inventors
Disney Dale
Law firm
Clayton & Clayton Associates
 Payments Process payments using third party api $5,400
Examiner
IP, Sikyin / 69776 / 1742
SPE (multiple)
John Olaskey
Applicants
Roman Amirpur
Inventors
Disney Dale
Law firm
Clayton & Clayton Associates