DataTable
The responsive Data Table organizes data to help users quickly scan and compare information and take actions on any size screen. On wider screens, traditional header sorting is provided. A small screen adaptive layout removes the header row and provides an alternative Single Sort component.

The Data Table is primarily for single lines of data but can be adjusted to accommodate block list data and paragraphs.

Common Characteristics

The Data Table is built with these default properties:

  • Headings and cells within the same column always share the same alignment.
  • The left column should usually be left-aligned unless it contains numbers that should be right-aligned.
  • Other columns are left-aligned by default and can be changed (see usage guidelines below).
  • The header row has a white background and 2px bottom stroke.
  • All rows have a white background and 2px bottom stroke with hover / tap states.
  • Headings and data reflow at the XS and S breakpoints.
  • Text in cells can be wrapped or truncated as needed. Truncated text is viewable in a tooltip on hover/tap.

Data Table Options

The Data Table can be configured with these options:

  • Columns can be optionally right- or center-aligned.
  • Top and bottom padding can be reduced for “tight” viewing.
  • The header row can be switched to light or dark backgrounds as needed by context or theme.
  • The header row can be pinned to facilitate scanning on long tables.
  • The table can be optionally placed in a distinct visual container.
  • Cells can contain text, icons, and/or interactive elements.
  • Two responsive layout options are available for the XS-S breakpoints. Data is right-aligned by default but can be left-aligned.
  • A pagination component and "Results per page" button group can be added optionally.
  • The Single Sort component provides sorting when the data must reflow to adapt to small screens (XS-S breakpoints).

table 1

Cells can contain text, icons, Indicators and cell-level-actions. Consider grouping actions to the right instead of sprinkling links in every column.

table 2

Data in the XS-S breakpoints is right-aligned by default and can be left-aligned.

Header Sorting States

Header cells have these states: not sortable, sortable, and sorted. In addition, a sortable header that is not the currently sorted column has a hover/tap state. These states can appear on any color header row. Click the Design tab at the top of this page to review view design details.

table 10

Table Header Sort States.

Usage Guidelines

To promote ease of scanning and understanding, follow these UX best practices:

Do

Keep heading labels short.

Use the default left-alignment in most cases.

Numbers of varying lengths should be right aligned (e.g. odometer, dollar amounts).

Data of the same length may be optionally center- or right-aligned (e.g. phone numbers, VINs, state abbreviations, icons)

Avoid scattering interactive elements in tables. Group interactive elements in the right column as much as possible to reduce motor activity and provide consistency between tables. Actions in the right column will reflow above data groups in the XS-S breakpoints.

Don't

Avoid long column labels.

Avoid scattering interactive elements in differen columns

Avoid left-aligning numbers in the most cases.