Skip to main content

Data tables

Most "I need a table" requests are one of two things. Prism gives you a clear choice so you don't over-build.

Table vs DataGrid

  • Table — presentational, sortable, density-aware. Use it to show rows you mostly read. Striped by default, it scales from a handful of rows to a few hundred.
  • DataGrid — an application surface. Use it when people work in the data: toolbar search, column filters, saved views, pinned columns, row selection and inline edit.

If the user only reads and sorts, use Table. The moment they need to filter, save a view or edit in place, move to DataGrid.

Live demo
Open ↗

Behaviours that matter

  • Sort is keyboard reachable and announced; the active column and direction are visible, not just implied by an arrow.
  • Density follows the page setting, so the same grid is comfortable in an admin tool and tight in a dense console.
  • Pinned columns keep identity (a name, an ID) in view while the rest scrolls.
  • Selection uses real checkboxes with a clear select-all and an indeterminate state.
  • Empty and loading states are part of the table, not an afterthought — see Empty & error states.

Rules

  • Right-align numbers and use tabular figures so columns scan.
  • Keep one primary action per row; bury the rest in a row menu.
  • Don't paginate what you can virtualise, and don't virtualise what fits — pick the simpler one that holds at your row count.
Live demo
Open ↗