For proper application, the Table component can be used for different purposes to enable easier and consistent display of structured data across digital experiences.

Do
  • Use tables for homogeneous data sets with three or more columns.
  • Add a caption or aria-label for assistive technologies.
  • Use size="small" for dense data-heavy views like log tables.
  • Wrap the table in TableContainer to enable horizontal scrolling on narrow viewports.
  • Use TablePagination when row count exceeds 25 with page sizes [10, 25, 50].
  • Place inline row actions in the last column, right-aligned, using IconButton with a descriptive aria-label.
  • Always confirm destructive actions like delete before execution.

Don't
  • Use tables purely for layout alignment of unrelated content.
  • Mix unrelated data types across rows.
  • Omit column headers — every table must have a TableHead.
  • Hard-code hex colour values — always use Sistent theme tokens.
  • Rely on colour alone to convey row status; supplement with text or icons.

Row Density

Sistent exposes a size prop on the Table component:

  • Use size="medium" (default) for general-purpose tables with comfortable vertical spacing.
  • Use size="small" for dense data-heavy views where vertical space is at a premium, such as log tables or comparison matrices.

Row Selection
  • Place a Checkbox in the first cell of each row and in the header row for select-all behaviour.
  • Update the row background to theme.palette.action.selected on selection.
  • Show a selected-row count in a toolbar above the table.
  • A single click on the checkbox should toggle selection.

Empty and Loading States
  • Empty: Display a single full-width TableCell spanning all columns with a brief message and call-to-action.
  • Loading: Replace body rows with skeleton rows or a centered CircularProgress inside a spanning cell.