Skip to content
StrataKit Docs

Table

Tables are used to display information from a data set.

Useful links:

StrataKit MUI modifications

Section titled “StrataKit MUI modifications”
  • Removed role="rowgroup" semantics from TableBody, as it is not necessary and can cause issues with some assistive technologies.
  • Enabled TableRow’s hover prop by default, except when used inside TableHead.

Examples

Section titled “Examples”
Section titled “Footer”

Dense

Section titled “Dense”

Use size="small" for compact interfaces with limited screen real estate or when displaying large datasets.

Row selection

Section titled “Row selection”

Use a Checkbox within the Table’s first column to give the user a clear indicator that rows can be selected. Combine it with the TableRow’s selected prop to visually reinforce selected rows.

Sorting

Section titled “Sorting”

The TableSortLabel component renders an interactive sort button and displays the current sort direction. A hidden description ("change sort") can be associated with each sort button using aria-describedby to provide additional context for assistive technologies without affecting the column header.

The sortDirection prop on TableCell sets the appropriate aria-sort value on the column header so assistive technologies can announce the current sort state.

This example is adapted from the MUI Table Sorting example and follows the accessibility guidance described in Adrian Roselli’s article on sortable table columns.