Table
Also known as: Data table, Grid
Resources
Properties
Table component is assembled by the component user, taking into account its specific context and data requirements. Table consists of subcomponents that work together to display data:
- Table column: Defines the structure of each vertical column in the table (width, alignment and sortability).
- Header cell: Represents the individual cells within the table's header row. Typically displays the title and serves as a control for sorting and filtering.
- Data cell: Displays the actual data within each row and column of the table body.
| Property | Values | Default |
|---|---|---|
Size Variant | Sm | Md | Lg | Xl | Lg |
Table column Variant | Label | Tags | Quick actions | Asset | Checkbox | Label |
Title cell Variant | Title | Checkbox | Label |
Data cell Variant | Label | Tags | Quick actions | Asset | Checkbox | Label |
When to use
When displaying structured data that needs to be compared across rows and columns.
When users need to scan, sort, or filter information efficiently.
When presenting large datasets that require clear organization.
When displaying small amounts of simple data, use list instead.
Don't use for dense data, consider using table instead.
Behaviour
Tables organize data into rows and columns, allowing for easy comparison and analysis of information. Table behavior often includes:
- Data presentation: Rows represent individual data, columns represent attributes of the data.
- Interaction: Tables are often interactive, sorting rows by column headers, filtering data based on rules and searching for data.
- Selection: Users may be able to select individual or multiple rows and columns for further actions.
- Scrolling: Some tables exceed the visible area and implement a vertical or horizontal scrolling, with an option for fixed headers.
Size
Dimensions of the table are tied to the global scale tokens. This ensures that the components with similar size settings remain consistent across the interface. scale tokens also provides more granular control over dimensional settings.
--scale-height-<size>
--scale-gap-<size>
--scale-icon-size-<size>
--scale-text-size-<size>
--scale-text-height-<size>
Accessibility
Ensure tables are accessible with proper semantic HTML (<thead>, <tbody>, <th>, scope) and ARIA attributes for complex interactions.