XDS — Design System

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

Props

Prop	Type	Description
data	T[]	Array of data items to render as rows.
columns	XDSTableColumn<T>[]	Column definitions. If omitted, columns are auto-generated from data object keys.
idKey	(keyof T & string) \| ((item: T) => string \| number)	Row key for React reconciliation. Pass a property name string or a function. Falls back to row index if omitted.
plugins	TablePlugin<T>[]	Ordered array of plugins applied as a sequential transform pipeline.
components	{Row?: ComponentType<TableRowComponentProps>; Cell?: ComponentType<TableCellComponentProps>; HeaderCell?: ComponentType<TableHeaderCellComponentProps>}	Component overrides for row and cell elements. When provided, these components receive xstyle from plugin transforms.
children	ReactNode	Children mode — render rows directly in the tbody instead of using data-driven rendering.
tableProps	HTMLAttributes<HTMLTableElement>	Additional HTML attributes passed directly to the root <table> element.