Data Tables

Organizes structured content so that it is easy to scan, make comparisons, and analyze the data

Default

Basic layout with a column of row headers. Rows alternate background colors.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Column Headers

Layout for making comparisons such as between size/sleeve length. Column headers and row headers are displayed. When columns scroll, row header column is locked in place.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Compact and Borderless

Layout with reduced spacing within each cell. All cells are borderless. Defines a column of row headers.

Copy to clipboard
View source in repository View in repository
View in code sandbox View in sandbox

Accessibility

To ensure that usage of this component complies with accessibility guidelines and screen readers can correctly read data:

  • Table caption should be included
  • Row headers and column headers should be defined
  • Table headers should never be empty
    • Including the top-left cell of the data table
    • If needed, use cdr-sr-only to hide descriptive text that explains the content for the first column
  • Set the scope attribute to row or col to indicate that a header applies to the entire row or column

This component has compliance with WCAG guidelines by:

  • Providing <caption> element for data tables
  • Providing <th> element for row or column headers