Tables are used to organize and display structured data in rows and columns. They make it easy for users to scan, compare, and interact with information. The Table component in Sistent is built on Material UI primitives and supports full theming.

Overview

The Table component organizes information into rows and columns, making it easy for users to read, compare, and analyze data. Use a Table when displaying multiple records with consistent attributes such as services, users, or deployments, when users need to compare values across rows or columns, or when data needs sorting, filtering, or pagination for large data sets.

Anatomy

A Sistent Table is composed of the following sub-components:

  • Table — Root container element.
  • TableHead — Contains the header row with column labels.
  • TableBody — Contains the data rows.
  • TableRow — A single row within the head or body.
  • TableCell — An individual cell, used for both header and data cells.
  • TableFooter — Optional footer area, typically used for pagination controls.
  • TablePagination — A helper component for adding page-size and navigation controls.
  • TableSortLabel — A helper component for rendering a sortable column header with an arrow icon.
  • TableContainer — A wrapper that enables horizontal scrolling on overflow.

Variants

Basic Table

The simplest form of a Table — static, read-only rows with a header.

Sortable Table

Columns whose headers include TableSortLabel allow users to reorder rows by ascending or descending value.

Selectable Rows Table

Rows include a leading Checkbox component so users can select one or more records for bulk actions.

Paginated Table

When a data set is large, TablePagination is added to the TableFooter to control which slice of data is displayed.

Accessibility
  • Table headers should always be present with meaningful column labels.
  • Provide a meaningful aria-label on the Table root when its purpose is not obvious from surrounding context.
  • Sortable columns expose aria-sort automatically via TableSortLabel.
  • Ensure all interactive elements inside cells are keyboard-focusable.