XDS — Design System

useXDSTableSelection@xds/core · Table

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

Props

Prop	Type	Description
getIsItemSelectedrequired	(item: T) => boolean	Returns whether the given item is currently selected.
onSelectItemrequired	(event: {item: T; isSelected: boolean}) => void	Called when a row checkbox is toggled. isSelected is the new desired state.
onSelectAllrequired	(event: {isAllSelected: boolean}) => void	Called when the select-all header checkbox is toggled.
getIsAllSelectedrequired	() => boolean	Returns whether all selectable items are currently selected.
getIsIndeterminate	() => boolean	Returns whether selection is partial (some but not all). Renders the select-all checkbox in indeterminate state.
getIsItemSelectable	(item: T) => boolean (default: () => true)	Returns whether a row should show a checkbox. Non-selectable rows render nothing in the selection cell.
getIsItemEnabled	(item: T) => boolean (default: () => true)	Returns whether a row checkbox is interactive. Disabled rows show a disabled checkbox.