Tables

Tables present structured, row-based data — orders, call logs, audit trails — for scanning, comparing, and drilling into records. These examples compose the beta DataTable with Chip, Avatar, and Card to cover the common patterns: plain text and associated-entity columns, sorted and grouped headers, pinned columns, custom footers, expandable and selectable sub rows, a custom expanded-row component, and cell- and row-level validation states. Each example below is a starting point: copy it, then wire it to your data.

​

Resources

​

Text Only, No Actions

A plain audit log — read-only rows with no sorting, selection, or row actions. Use this variant for history and activity records where the data itself is the point.

​

Associated Entities

Columns that reference other records — accounts, customers, campaigns — render as Chip and Avatar instead of plain text, so a row’s related entities are scannable at a glance.

​

Sorted Column

Setting defaultSortedColumn sorts the table on load and shows the sort indicator in the header — here, orders sorted by Status.

​

Column Groups

The column creator returned by createColumnHelper accepts a { group } id as its first argument to nest related columns under a shared header — here, order identity groups separately from purchase details.

​

Pinned Columns

Setting pinned: "left" or pinned: "right" on a column keeps it fixed while the rest of the table scrolls horizontally — here, Order ID stays pinned left and Status stays pinned right.

​

Custom Footer

Per-column footerContent renders one or more summary rows beneath the data — totals, averages, and computed percentages, aligned under their column.

​

Sub Rows

Nesting a subRows array under a row makes it expandable — defaultExpandedRowIds controls which rows start open. Use this variant when a row’s data naturally decomposes into child records, such as an order split across shipments.

​

Selectable Sub Rows

Row selection and row expansion compose cleanly — isSelectable adds checkboxes to every row, parent and child alike, alongside the expand affordance from subRows.

​

Custom Sub Component

A row’s subComponent can render arbitrary content on expansion, rather than a nested table — here, an invoice preview built from Card, Divider, and Text. Use this variant when a row’s detail view doesn’t fit the sub-rows shape.

​

Cell Errors and Warnings

A row’s meta.errors or meta.warnings, keyed by column id, marks the corresponding cell with an error or warning treatment and an accessible message — errors take priority when both exist for the same cell.

​

Row-Level Errors and Warnings

A row’s meta.rowError or meta.rowWarning marks the entire row and adds a status icon in its own column automatically — no column configuration required. Use this variant when the problem belongs to the record as a whole, not a single field.