Data tables

Tables let people scan, compare and act on many records. Choose the lightest option that does the job.

Choosing a component

• Table: static, read-only rows.
• DataTable: sorting, selection and pagination over records you already have.
• DataGrid: spreadsheet-like work with cell navigation, inline editing, resizable columns and very long lists.

Design

• Left-align text, right-align numbers, and use tabular figures so digits line up.
• The first column identifies the row and is a row header for screen readers.
• Give every table a caption or label. Wide tables scroll inside their own labelled region, never the page.
• Bulk actions appear when rows are selected and say how many are selected.
• Row actions go in a menu at the end of the row; the most common one can also be a link on the row title.

Small screens

A table with more than three columns rarely works on a phone. Show each record as a list item with the two most important fields, and open the full record on tap. On iOS and Android this is the default pattern.

Components