Table

Tables organize and display information from a data set into rows and columns.

Developer Documentation

Information on how to implement this component is available for the following technologies.

Usage

Use Table for data that is intended to be easily scanned and compared. If your data is only key value pairs, consider the Dictionary component instead.

Guidelines

  • If the contents of a Table would cause it to exceed the width of the viewport, the Table will become horizontally scrollable.
  • The data in a Table column should be related to the column heading.
  • A Table cell should only contain one value.
  • Tables must only be used for tabular data, not layout.

Variants

Column Comparison

Column Comparison is the default Table. It is useful for comparing columns of data.

Developer Documentation

Information on how to implement this component is available for the following technologies.

Secondary Table

Secondary Table reduces the visual weight of the headers, making the Table stand out less.

Developer Documentation

Information on how to implement this component is available for the following technologies.

Grouped Columns

Grouped Column Table should be used when multiple columns have a similar theme and need to be grouped with a higher level header.

Developer Documentation

Information on how to implement this component is available for the following technologies.

Row Comparison

Row Comparison adds a header to each row, allowing data to be grouped across rows and columns.

Developer Documentation

Information on how to implement this component is available for the following technologies.

Secondary Row Comparison

Secondary Row Comparison removes the column headers and adds a dedicated column for an action.

Developer Documentation

Information on how to implement this component is available for the following technologies.

Anatomy

  • Table must include headers (column, row, or both).
  • Secondary Row Comparison Table should include an action, such as a Link or Button.