components icon

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. Features includes text inputs, text links, and sorting.

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.

Anatomy

The parts of a table, labeled 1 through 6.

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.