DS by Berit

Components / data

Table

Table presents dense information with semantic structure, predictable controls, and resilient loading, empty, and responsive states.

How it's used?

A pattern with a job to do.

Use a table when people need to compare values across consistent records. Keep filters and actions close to the table, then preserve the table relationship on small screens with intentional overflow.

02 / examples

See the component in context.

Variant 01

Table structure

The low-level parts preserve native table semantics.

View content

Example table structure
ProjectOwner
FieldworkMika Lee

Variant 02

DataTable behavior

A higher-level table with filtering, sorting, and row selection.

View content

0 selected
Project work items
SelectOwnerStatusUpdated
Approval flowFW-103Aino SalmiAt riskYesterday
Data importFW-102Oskar NiemiComplete12 Sep
Permission modelFW-101Mika LeeOn track10 Sep
Research workspaceFW-104Mika LeeOn trackToday

Variant 03

Compact responsive table

The same data pattern inside a narrower product surface.

View content

0 selected
Project work items
SelectOwnerStatusUpdated
Approval flowFW-103Aino SalmiAt riskYesterday
Data importFW-102Oskar NiemiComplete12 Sep
Permission modelFW-101Mika LeeOn track10 Sep
Research workspaceFW-104Mika LeeOn trackToday

03 / contract

Component contract

  • Use real table, caption, thead, tbody, th, and td elements.
  • Compose low-level Table, TableHead, TableRow, TableColumnHeader, and TableCell parts when markup needs custom behavior.
  • Use DataTable as the higher-level pattern for common sorting, filtering, and selection.
  • Filtering, empty, and loading states are part of the component contract.

04 / accessibility

Accessibility information

  • Use scoped column and row headers.
  • Keep a visually hidden caption for context.
  • Give every selection control an accessible row-specific label.
  • Do not replace genuinely tabular data with CSS grid.