Table
Search the component library

Table

v2.0.1

This component defines the standard designs and layouts for tables. Use this component for every instance of a standard table. Pair it with the Toolbar component for more advanced use cases. 
 

Standard table

A standard presents data in a static tabular format with headers.

Columns can be left, center, or right aligned.

Multiline cell content should be avoided where possible. Content should be top aligned.

Note: Headers are required for accessibility compliance.

Interactive features

You can enhance a standard table with advanced features to handle more complicated use cases.

Sortable columns

Clicking the heading of a column sorts the table by the values in that column. Selecting the same column heading twice alternates between ascending and descending order.

If a table has a default sort order it should display the relevant icon at initial presentation.

Example of a sortable table showing the header hover state.

Hoverable rows

If you have a long table, you can enable a row hover effect. This makes it easier to scan and parse.

Hovering a row can change its background color.

Selectable rows

In cases where users may need to select and act on one or more rows, you may add a checkbox column and include a toolbar at the top of the table.

Clicking or tapping any non-interactive part of a row is a secondary method for selecting that row (this will also check the relevant checkmark, which is the primary method).

Holding down shift and selecting a second row will select all the intervening rows as well.

Example of a selectable table. Hover effects are enabled by default. (Hovering selected rows adds the border effect.)

Responsive strategies

There are several strategies for ensuring a table works at each breakpoint.

Removing columns

If you determine that certain fields in your table are optional in nature, you can simply remove them to reduce the overall table width until it fits in mobile viewports.

Combining fields

Depending on the type of information presented, a simple way to fit tables into a smaller viewport is combining multiple columns into one. For example, dedicated First and Last name columns can be joined under 'Name'.

Switching designs

For larger, more complex tables with a lot of non-optional data it may be necessary to change from using a table to some other display strategy in the mobile view. For example, you may adopt a list view where each item can be opened up to view its complete dataset.

Redlines

Standard table

Header20px horizontal padding
16px vertical padding
Bold UI Text
1px solid Alto border above and below header row
Vertically aligned to the center (if a header wraps to two columns)
Headers are a non-optional feature of all table types (for accessibility compliance)
Rows20px horizontal padding
16px vertical padding
No lines separating rows
1px solid Alto border following the final row
Basic UI Text
Vertically align to the top (if a cell wraps to two or more columns)

Sortable table

IconsAny row that is sortable, but not currently sorted uses the sortable-18 icon
Any sorted row should use the sort-down-18 and sort-up-18 icons, depending on the current sort order
PositioningIcons are 8px away from the text, always on the right
For right aligned columns, align to the icon
HoverHovering a sortable column gives the header a moonlight background

Hoverable row

BackgroundRow background is Moonlight
CursorPointer style (Hand with finger)

Selectable row

ColorsRow background is Digital Ice Blue
Row has top/bottom borders of 1px solid Digital Marine Turquoise
Hovered colorsRow background is Moonlight
Row has top/bottom borders of 1px solid Digital Pearson Blue
CheckmarkCheckmark has 20px padding on the left, and uses the standard 20px padding of the cell contents on the right
Uses the standard checkmark input
Caption/ControlsAny controls or captions which apply to the selected rows should be positioned 28px above or below the main table
For example, this could be a toolbar or pagination control
InteractionAny selected row will have an activated checkmark and the selected visual styles
Checking the checkbox is the primary selection method
Clicking or tapping on any non-interactive part of the row will also put it in a selected state (including checking the checkmark)
If a single row is currently selected the user may hold down shift and select another row, causing all intervening rows to also be selected

Changelog

2.0.1

  • FIXED: Color error in redlines
  • FIXED: Proper icon name

2.0.0

  • CHANGED: Visual style to reflect rebranded aesthetic
  • ADDED: Sortable columns feature
  • ADDED: Selectable row feature
  • REMOVED: Secondary row feature
  • REMOVED: Inline button/input feature
  • REMOVED: Small table feature

1.0.0

Initial Version