XDS — Design System

useXDSTableSelectionState@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
import {useXDSTableSelectionState} from '@xds/core/Table'

Props

Prop	Type	Description
datarequired	T[]	The full data array rendered in the table.
idKeyrequired	(keyof T & string) \| ((item: T) => string)	Key extractor — property name or function returning a unique string ID.
selectedKeysrequired	Set<string>	Controlled set of selected item IDs.
setSelectedKeysrequired	Dispatch<SetStateAction<Set<string>>>	Setter for the controlled selected keys.
getIsItemSelectable	(item: T) => boolean (default: () => true)	Should this row show a checkbox? Non-selectable rows are excluded from select-all.
getIsItemEnabled	(item: T) => boolean (default: () => true)	Is this row checkbox interactive? Disabled rows are frozen — select-all preserves their state.