Table
Use a table to present a collection of records that share the same attributes. A table lets the reader browse the records, spot patterns, and act on a single item.
Use one to:
- list errors, incidents or exceptions with their status and metadata
- show performance samples with response times, throughput and endpoints
- list triggers, log sources, metrics or other configured resources
- compare values across several attributes
- sort, filter or page through a large number of records
Anatomy
A table sits inside a box. The box is the outer container.
| Region | What it holds |
|---|---|
| Header | The box's header. It holds the table title, and optionally a description or toolbar actions such as search and filters |
| Column header | The row of column labels, on the surface-canvas background so it stands apart from the data. Labels can carry sort indicators |
| Data rows | One record per row. A cell can hold plain text or a component, such as a meter, a dropdown or a button |
An optional actions column at the far right holds row-level operations, as secondary buttons.
Where it exists
ui-table--default (open it in Storybook). One of 14 stories. Drag the bottom edge to resize. ⚠️ The frame renders the component at the frame's own width, so in a narrow pane you are seeing a narrow rendering rather than the canonical one.| axis | value |
|---|---|
| React module | yes — shared UI library |
| React tier | library |
| CSS class | .c-table |
| CSS files | tables.css, table.css |
| Storybook | yes |
| Figma | not mapped |
| Uses in product | 752 |
| Uses in admin | 1130 |
| Seen as | css-class-attribute, jsx-tag |
| Join provenance | inferred:kebab |
An empty cell above is a measurement, not an omission: every axis is printed whether or not it is populated. What each one costs is on /gaps.md, linked from the axis name wherever this page has a gap.
Members
A member is attached to its parent at module scope, so it is imported through the parent and versioned with it. Members have no page of their own: they declare no CSS class, carry no story and join no Figma set, and their uses are counted against the parent rather than separately.
Table.ColumnFooters— 2 uses in the productTable.ColumnSettingsOverlay— 4 uses in the productTable.DefaultStack— 1 use in the productTable.Empty— 57 uses in the productTable.Errors— 46 uses in the productTable.Header— 57 uses in the productTable.Headers— 58 uses in the productTable.LoadMoreButton— 1 use in the productTable.Loading— 45 uses in the productTable.Rows— 43 uses in the productTable.VirtualizedRows— 15 uses in the product