Data Table

Interactive Demo

This demo lets you preview the data table component, its variations, and configuration options.

Component Variations

There are two data table variations.

1. Default Table

Use default table to organize and display data and its relationships efficiently. Default table allows users to find, compare and analyze data using clear headings, rows, and columns.

2. Sortable Table

Use sortable tables to give users the ability to reorder data. Tables allow users to find, compare, and analyze data with clear headings, rows and columns. Adding sorting gives users a way to better understand and develop insights from the data. Users may organize data themselves, which can improve user efficiency, data find-ability, and data visualization.

What’s New

1. DLS7 token updates (color, spacing)
2. New default and compact size
3. New table styles, brand, subtle brand and neutral.
4. Accessibility update: Moved select all for selectable rows from the header (v6) to an optional pattern outside the table.

See full release notes