Table

A table contains data arranged in rows and columns. They are used to communicate relationships between content and to display references, comparisons, and choices.

Status

PublishedElement can be used in production
PublishedElement can be used in production
Angular
Angular
In progressElement design and development in progress
React
React
In backlogElement is in backlog
Documentation
In progressElement design and development in progress

What's new

Table is a new component for the v2 design system. It incorporates the updated font ramp and color palette, in addition to accessibility enhancements.

When to use

Table and list are not used for the same purpose. Identifying the right use case will make the experience clear for all users, particularly for those with cognitive and learning disabilities, or those using screen readers.

ComponentUse case
TableA table displays complex groups of information for the purpose of reference, comparison, or choice.
ListA list presents a group of related information in a scannable format.

Anatomy

The table component contains six elements:

  1. Body cell: input field for body text can contain alphanumeric text or links.
  2. Body text: content related to its corresponding column header.
  3. Header cell: input field for header text is the first row across all columns.
  4. Sort function (optional): displays whether information is set to ascending (up arrow) or descending (down arrow).
  5. Header text: title or concise description of the content within its column.
  6. Action menu trigger: conveys that the header cell is enabled as a trigger to open a menu. The menu contains features available within the table including sort.

Articles

Data tables

Read the Nielsen Norman Group's article on tables.