Use a Table when you need to present a collection of data objects that share the same attributes. Tables make it easy for users to browse records, spot patterns, and take action on individual items.
When to use
- Displaying lists of errors, incidents, or exceptions with their status and metadata
- Showing performance samples with response times, throughput, and endpoints
- Listing triggers, log sources, metrics, or other configured resources
- Presenting any dataset where users need to compare values across multiple attributes
- Allowing users to sort, filter, or paginate through large volumes of records
Anatomy
A Table is placed inside a Box component. The Box provides the outer container and its header region holds the table title. Within the Box content area, the Table itself is divided into a column header and data rows.
|
Region |
Region |
|---|---|
|
Header |
Provided by the parent Box component. Contains the table title and optionally a description or toolbar actions (search, filters). |
|
Column header |
The row of column labels. Uses the surface-canvas color token as its background to visually distinguish it from the data rows below. Column labels can include sorting indicators. |
|
Footer |
The actual table content. Each row represents a single record. - Cells can contain plain text as well as other components such as Meter, Dropdown, or Button. - An optional actions column at the rightmost position provides row-level operations using white (secondary) buttons. |