XDSTableRow@xds/core · Table
Preview coming soon
Usage
Table displays structured data in rows and columns with consistent dimensionality. It supports rich cell content, sorting, selection, pagination, and column management through a composable plugin system. Use Table for data sets with uniform structure; for simpler or inconsistent data, consider a list or card layout instead.Best practices
| Guidance | Practices |
|---|---|
| Do | Use density and divider variants to match the information density and scanning needs of your data. |
| Do | Compose rich cell content with XDS components like XDSBadge, XDSStatusDot, and XDSAvatar via renderCell. |
| Don't | Use a table for data without consistent columns — use a list or card layout for heterogeneous content. |
| Don't | Enable every plugin at once — add only the features your use case requires to keep the interface focused. |
Anatomy
| Element | Description | |
|---|---|---|
| Column Header | required | Displays titles, sorting controls, and bulk selection. |
| Body Rows | required | Rows with consistent data structure. |
| Footer | Displays summary or totals. | |
| Top Bar | Contains title, toolbar, and filters. | |
| Bottom Bar | Contains pagination controls. | |
| Support Panels | Displays row details in a side panel. |
Import
ts
Props
| Prop | Type | Description |
|---|---|---|
childrenrequired | ReactNode | Row cell elements. |