Table
Use GdsTable for structured rows and columns of data. For simple vertical lists of actions or navigation, prefer List.
Composition
| Component | Role |
|---|---|
GdsTableContainer | Wrapper that provides horizontal scrolling for wide tables. Pass component={GdsPaper} for a raised surface. |
GdsTable | The main <table> element (size) |
GdsTableHead | Header row container (<thead>) |
GdsTableBody | Body row container (<tbody>) |
GdsTableFooter | Optional footer row container (<tfoot>) |
GdsTableRow | A table row (<tr>) - use in head, body, or footer |
GdsTableCell | A cell (<th> in head, <td> in body by default) |
GdsTableSortLabel | Sortable column header control |
GdsTablePagination | Page and rows-per-page controls |
Default
Compose the basic head / body structure. Use hover on body rows and scope="row" on the first cell of each data row.
Dense
Set size="small" for denser padding when space is tight or the table shows many rows.
Sorting
Wrap header labels in GdsTableSortLabel and keep order / orderBy in local state. Set sortDirection on the active GdsTableCell.
Selecting
Combine checkbox cells with selected on GdsTableRow. Selected backgrounds come from GDS table tokens.
Pagination
Place GdsTablePagination under the table (often as a sibling inside GdsTableContainer). Slice your data with page and rowsPerPage.
For standalone page controls outside a table, prefer Pagination (GdsPagination).
Accessibility
- Give every table an
aria-label(or associate a visible caption) that describes the data. - Use
scope="row"on the leading cell of each body row when that cell identifies the row. - Label selection checkboxes with
inputProps["aria-label"]. - Keep sort state reflected with
sortDirection/GdsTableSortLabelso assistive tech can announce the active column.
Props
External references
For the full and always up-to-date props, use the MUI references below.