Table
Note
A component that organizes content into vertically stacked collapsible and expandable sections.
Design checklist
| Status | Item | Description |
|---|---|---|
| ✔️ | Anatomy | Includes descriptions of all parts of the component and its major variants. |
| ✔️ | States | Includes all applicable interaction, display and value states. |
| ✔️ | Options | Includes all relevant options (functional type, stylistic kind, semantic color, size, orientation, optional iconography, decorations, etc.) |
| ✔️ | Color schemes | Includes both light and dark color schemes. |
| Behaviors | Includes descriptions of behaviors related to other components and responsive behaviors related to media breakpoints, size (minimums and maximums), orientation, alignment, position and layout (wrapping, truncation, overflow). |
Anatomy
- Table container: Outermost wrapper (
.table-container). - Header section: Contains title and description (
.table-header-section,.table-title,.table-description). - Actions section: Header actions or batch actions (
.table-actions-section,.table-batch-actions). - Table wrapper: Scrollable area for the table (
.table-wrapper). - Table element: Main table (
.par-table). - Table head: Table header row (
.table-head,.table-head-row,.table-head-cell). - Table body: Table rows and cells (
.table-body,.table-body-row,.table-body-cell). - Checkbox: For selectable rows (
.table-checkbox). - Footer: Footer section with row count or custom content (
.table-footer). - Empty state: Displayed when no data (
.table-empty-state-wrapper,.table-empty-state).
States
- Default: Table displays data rows.
- Hovered row:
.table-body-row:hoverhighlights the row. - Selected row:
.table-body-row.selectedapplies selected background. - Selectable:
.table-body-row.selectableenables row selection. - Empty:
.table-empty-stateshown when no data. - Disabled: (Not directly supported, but can be styled via custom logic.)
Options
- selectable: Enable row selection with checkboxes.
- selectOnRowClick: Select row by clicking anywhere on the row.
- freezeColumns: Number of columns to freeze from the left.
- color: Color scheme, e.g. 'neutral' (default) or 'accent'.
- actions: Custom actions in the header.
- batchActions: Actions for selected rows.
- footer: Custom footer content.
- showRowCount: Show row count in footer.
- maxHeight: Set max height for scrollable table.
Behaviors
- Column sorting: Click sortable header to sort by column.
- Column resizing: Drag handle to resize columns.
- Row selection: Select rows via checkbox or row click.
- Batch actions: Perform actions on selected rows.
- Frozen columns: Keep columns fixed during horizontal scroll.
- Pagination: Use TablePagination for paginated data (external component).
- Empty state: Customizable empty state when no data.
- Keyboard navigation: Standard table navigation (Tab, Arrow keys).