Data table

Usage

Use DataTable when a person scans, sorts, or acts on rows. Use Table for a handful of static rows.

Give every row a stable id. Memoize columns. Put status in a Badge and row actions in actionMenu, not in a column of buttons.

Empty, no-results, and error are three slots. Empty means there is no data. No-results means a search or filter removed every row. Error means the load failed. The header stays in each state.

CrudPage composes this table with a header, filters, and a record drawer when the page is a list of records.

Scrolling. The table body hides its scrollbar at rest and shows it only while you scroll; edge fades on the block edges and the inline end mark content beyond the viewport. Forced colors keeps the system scrollbar visible.

Record drawer. Use detail with layout: DataTableDrawerLayout.Inline or Overlaid. The table owns the drawer, reserves scroll room for overlaid mode, and never changes scroll position when the drawer opens or closes. See Storybook DataTable → Drawer.

Settings page / Accessibility

Data Table / API and Development