useXDSTableSortable@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 |
|---|---|---|
sortrequired | XDSTableSortState<TSortKey> | Current sort state. Ordered array of {sortKey, direction} entries. First entry is the primary sort. |
onSortChangerequired | (sort: XDSTableSortState<TSortKey>) => void | Called when the user clicks a header cell to change sort. |
allowUnsortedState | boolean (default: false) | Allow cycling back to unsorted. When true: asc, desc, unsorted. When false: asc, desc, asc. |
isMultiSortEnabled | boolean (default: false) | Enable multi-sort via Shift+click. Regular click still replaces the entire sort state. |