Components / organisms

Table

A table shows many similar records in rows and columns, with sorting, filtering and selection.

Usage

When to use it

Use a table when people need to compare values across similar records. Keep filters and actions next to the table. On small screens, let the table scroll sideways so its rows and columns stay intact.

02 / examples

See the component in context.

Variant 01

Table structure

The low-level parts preserve native table semantics.

Example table structure
Project	Owner
Research workspace	Mika Lee

Variant 02

Table cell

One cell, in the shapes a product actually needs.

Default

A plain cell
Research workspace

With subtitle

A cell with supporting text
Research workspaceUpdated today

Leading icon

A cell with an icon before the text
Research workspace

Trailing icon

A cell with an icon after the text
Research workspace

Icon and subtitle

A cell with both an icon and supporting text
Research workspaceUpdated today

With input

A cell holding a text input

With select

A cell holding a select

Variant 03

DataTable behavior

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

8 of 8 items

Work items with owner, status and due date
	Project	Owner	Status	Due
Approval flowDS-107	Customer portal	Aino Salmi	At risk	15 Sep
Audit logDS-101	Reporting	Sofia Heikkinen	Complete	2 Sep
Billing exportDS-104	Finance tools	Sofia Heikkinen	Blocked	16 Sep
Data importDS-106	Reporting	Oskar Niemi	Complete	12 Sep
Notification settingsDS-103	Mobile app	Aino Salmi	On track	30 Sep
Onboarding checklistDS-102	Mobile app	Oskar Niemi	At risk	19 Sep
Permission modelDS-105	Customer portal	Mika Lee	On track	22 Sep
Research workspaceDS-108	Customer portal	Mika Lee	On track	18 Sep

Showing 1–8 of 24 items

Page 1 of 3

Variant 04

Compact responsive table

The same data pattern inside a narrower product surface.

8 of 8 items

Work items with owner, status and due date
	Owner	Status
Approval flowDS-107	Aino Salmi	At risk
Audit logDS-101	Sofia Heikkinen	Complete
Billing exportDS-104	Sofia Heikkinen	Blocked
Data importDS-106	Oskar Niemi	Complete
Notification settingsDS-103	Aino Salmi	On track
Onboarding checklistDS-102	Oskar Niemi	At risk
Permission modelDS-105	Mika Lee	On track
Research workspaceDS-108	Mika Lee	On track

Showing 1–8 of 24 items

Page 1 of 3

03 / contract

Rules the component follows

A table shows many similar records in rows and columns, so people can compare values. It is built from the real table elements, and the Table, row, header and cell parts can be used on their own when the markup needs to be customised. The data table builds on them with sorting, filtering and row selection, and it covers empty and loading states.

A cell can carry a decorative icon, a line of supporting text or a form control, and a form control inside a cell always comes from the form controls so that it looks and works the same everywhere.

04 / accessibility

Accessibility information

Tables use scoped column and row headers and a caption, which can be visually hidden, so that screen readers can describe where a value sits. Every selection control has a label that names its row, such as select the project named in that row.

Genuinely tabular data stays in a table instead of being rebuilt with a grid layout, so the structure is not lost for people who do not see the layout. On small screens the table scrolls sideways so that rows and columns remain intact.