Table

Data display component. This page is the API reference, generated from the source code. Usage guidance and live examples are on the Chinese page.

HeadlessStylesVueReactWeb Components

Anatomy

Parts in bold are required.

data-scope="table": root · header · body · footer · row · column-header · column-label · cell · caption · toolbar · column-list · column-visibility-trigger · select-all-trigger · row-select-trigger · sort-trigger · column-resize-trigger · column-drag-trigger · row-drag-trigger · expand-trigger · expanded-row · empty · loading · load-more-trigger · live-region

API reference

Descriptions of individual props, events and slots are written in Chinese and appear on the Chinese page.

Artifacts

Layer	Value
Custom element	<xh-table>
Vue components	XhTableBody XhTableCaption XhTableCell XhTableColumnDragTrigger XhTableColumnHeader XhTableColumnLabel XhTableColumnList XhTableColumnResizeTrigger XhTableColumnVisibilityTrigger XhTableEmpty XhTableExpandTrigger XhTableExpandedRow XhTableFooter XhTableHeader XhTableLoadMoreTrigger XhTableLoading XhTableRoot XhTableRow XhTableRowDragTrigger XhTableRowSelectTrigger XhTableSelectAllTrigger XhTableSortTrigger XhTableToolbar
Composable	useTable
State machine	tableMachine
Skin	@xihan-ui/styles/table.css

Props

Prop	Type	Required
captioned	boolean
columns	TableColumnDef<TRow>[]
rows	TableRowDef[]
data	readonly TRow[]
rowKey	TableField<TRow> | ((record: TableRecordOf<TRow>) => string)
filterValue	TableFilterValue
defaultFilterValue	TableFilterValue
pagination	boolean
defaultPage	number
sort	TableSortDescriptor[]
defaultSort	TableSortDescriptor[]
selection	TableSelection
defaultSelection	TableSelection
expandedValue	string[]
defaultExpandedValue	string[]
selectionMode	TableSelectionMode
virtualizer	CollectionVirtualizer
cellSpan	(details: TableCellSpanDetails) => TableCellSpan | null | undefined
footerCellSpan	(details: TableFooterCellSpanDetails) => TableCellSpan | null | undefined
cascade	boolean
tree	boolean
checkedStrategy	CascadeStrategy
prefixColumns	TableColumnKind[]
columnPreference	TableColumnPreference
defaultColumnPreference	TableColumnPreference
page	number
pageSize	number
loading	boolean
empty	boolean
stickyHeader	boolean
striped	boolean
variant	ControlVariant
ruled	boolean
footerRows	number
stickyFooter	boolean
loop	boolean
navigation	TableNavigation
dir	Direction
size	Size
translations	Partial<TableTranslations>
rowReorderable	boolean
onRowMove	(details: TableRowMoveDetails) => void
allowRowDrop	(move: TableRowMoveDetails) => boolean
onColumnPreferenceChange	(details: TableColumnPreferenceChangeDetails) => void
onSortChange	(details: TableSortChangeDetails) => void
onFilterValueChange	(details: TableFilterValueChangeDetails) => void
onPageChange	(details: TablePageChangeDetails) => void
onSelectionChange	(details: TableSelectionChangeDetails) => void
onExpandedValueChange	(details: TableExpandedValueChangeDetails) => void
onAction	(details: TableActionDetails) => void

TableColumnDef

Elements of columns.

Field	Type	Required
id	string	Yes
field	TableField<TRow> | null
label	string
sortable	boolean
sticky	boolean | 'start' | 'end'
width	string | number
minWidth	number
maxWidth	number
resizable	boolean
children	TableColumnDef<TRow>[]
reorderable	boolean
align	'start' | 'center' | 'end'
rowHeader	boolean | ((row: TableRowDef, rowIndex: number) => boolean)
compare	(a: TableRecordOf<TRow>, b: TableRecordOf<TRow>) => number
filterOptions	TableFilterOption[]
filter	(record: TableRecordOf<TRow>, values: readonly string[]) => boolean
format	(value: TValue, record: TableRecordOf<TRow>) => string

TableRowDef

Elements of rows.

Field	Type	Required
id	string	Yes
disabled	boolean
expandable	boolean
parentId	string

TableSortDescriptor

Elements of sort.

Field	Type	Required
id	string	Yes
direction	TableSortDirection	Yes

Events

Custom elements put the payload in detail; Vue emits an event of the same name.

Event	Payload
sort-change	TableSortChangeDetails
filter-value-change	TableFilterValueChangeDetails
page-change	TablePageChangeDetails
column-preference-change	TableFooterCellSpanDetails
selection-change	TableSelectionChangeDetails
expanded-value-change	TableExpandedValueChangeDetails
action	TableActionDetails
row-move	TableRowMoveDetails

Slots

Only slots with a payload are listed.

Vue component	Slot	Payload
XhTableRoot	default	TableRootSlotProps
XhTableRoot	toolbar	TableToolbarSlotProps
XhTableRoot	cell	TableCellSlotData
XhTableRoot	empty	—

React adapter props

Only the props each component declares itself: DOM attributes inherited from ComponentPropsWithRef are left out, and root props already listed in the Props table are not repeated. The Vue counterpart is the slot table above.

React component	Prop	Type	Required
XhTableCell	value	string	Yes
XhTableCell	colspan	number | string
XhTableColumnHeader	value	string	Yes
XhTableColumnHeader	level	number | string
XhTableColumnVisibilityTrigger	value	string
XhTableExpandedRow	value	string	Yes
XhTableRoot	virtual	boolean
XhTableRoot	estimateSize	number
XhTableRoot	renderCell	(cell: TableCellSlotData<TRow>) => ReactNode
XhTableRoot	renderEmpty	() => ReactNode
XhTableRoot	toolbar	SlotChildren<TableToolbarSlotProps>
XhTableRoot	children	SlotChildren<TableRootSlotProps>
XhTableRow	value	string
XhTableRow	level	number | string

State

Public state is written to data-state.

Part	Values
row	'open' | 'closed' | undefined
column-visibility-trigger	'unchecked' | 'checked'
select-all-trigger	tableSelectionState([...cascaded.checked], tableCasca… | tableSelectionState(selection, selectableIds)
row-select-trigger	'open' | 'closed' | undefined
expand-trigger	'open' | 'closed' | undefined
expanded-row	'open' | 'closed'

The following names are internal to the state machine.

States: idle · resizing · columnDragging · rowDragging

Events: SORT.SET · SORT.TOGGLE · FILTER.SET · PAGE.SET · COLUMN_PREF.SET · COLUMN_RESIZE.START · COLUMN_RESIZE.MOVE · COLUMN_RESIZE.END · COLUMN_RESIZE.CANCEL · COLUMN_RESIZE.STEP · COLUMN_DRAG.START · COLUMN_DRAG.MOVE · COLUMN_DRAG.END · COLUMN_DRAG.CANCEL · COLUMN.MOVE_BY · ROW_DRAG.START · ROW_DRAG.MOVE · ROW_DRAG.END · ROW_DRAG.CANCEL · ROW.MOVE_BY · ROW.REORDER_BLOCKED · COLUMN_PREF.PATCH · SELECTION.SET · ROW.SELECT · SELECTION.ALL_TOGGLE · EXPANDED.SET · ROW.EXPAND · ROW.COLLAPSE · ROW.EXPAND_TOGGLE · ROW.FOCUS · CELL.FOCUS · TABLE.BLUR · PRESS.START · PRESS.END

Guards: canPress

connect API

getXxxProps() returns the host attributes of the matching part.

Member	Type
columns	readonly TableColumn[]
draggableColumns	readonly string[]
rowReorderDisabledReason	TableRowReorderReason | null
dropTarget	TableDropTarget | null
announcement	string
rows	readonly TableRowDef[]
visibleRows	readonly TableVisibleRow[]
sort	TableSortDescriptor[]
dataDriven	boolean
records	readonly TableRecord[]
recordCount	number
recordOf	(rowId: string) => TableRecord | undefined
cellText	(rowId: string, columnId: string) => string
filterValue	TableFilterValue
setFilter	(columnId: string, values: string[]) => void
paginated	boolean
page	number
pageSize	number
pageCount	number
setPage	(page: number) => void
translations	TableTranslations
selection	TableSelection
selectionState	TableSelectionState
selectionMode	TableSelectionMode
expandedValue	string[]
focusedRow	string | null
focusedColumn	string | null
navigation	TableNavigation
loading	boolean
empty	boolean
rowCount	number
footerRowCount	number
columnCount	number
headerRows	readonly (readonly TableHeaderCell[])[]
headerRowCount	number
cellSpanOf	(rowId: string, columnId: string) => { rowSpan: number, colSpan: number, covered: boolean }
isSelected	(value: string) => boolean
isExpanded	(value: string) => boolean
sortDirection	(value: string) => TableSortDirection | null
sortPriority	(value: string) => number
setSort	(next: TableSortDescriptor[]) => void
toggleSort	(value: string, options?: { append?: boolean }) => void
setSelection	(next: TableSelection) => void
selectRow	(value: string, options?: { extend?: boolean }) => void
toggleSelectAll	() => void
setExpandedValue	(next: string[]) => void
expandRow	(value: string) => void
collapseRow	(value: string) => void
toggleExpandRow	(value: string) => void
getRootProps	() => T['element']
getCaptionProps	() => T['element']
getToolbarProps	() => T['element']
getColumnListProps	() => T['element']
getColumnVisibilityTriggerProps	(props: TableColumnProps) => T['element']
getHeaderProps	() => T['element']
getBodyProps	() => T['element']
getFooterProps	() => T['element']
getHeaderRowProps	(props?: TableHeaderRowProps) => T['element']
getFooterRowProps	(props?: TableFooterRowProps) => T['element']
rowNumber	(rowId: string) => string
columnPreference	TableColumnPreference
columnSettings	readonly TableColumnSetting[]
setColumnHidden	(columnId: string, hidden: boolean) => void
setColumnSticky	(columnId: string, sticky: boolean | 'start' | 'end') => void
moveColumn	(columnId: string, toIndex: number) => void
setColumnWidth	(columnId: string, width: number | string) => void
setColumnPreference	(next?: TableColumnPreference) => void
getRowProps	(props: TableRowProps) => T['element']
getColumnHeaderProps	(props: TableColumnProps) => T['element']
getColumnLabelProps	() => T['element']
getCellProps	(props: TableCellProps) => T['element']
getSelectAllTriggerProps	() => T['element']
getRowSelectTriggerProps	(props: TableRowProps) => T['element']
getSortTriggerProps	(props: TableColumnProps) => T['element']
getColumnResizeTriggerProps	(props: TableColumnProps) => T['element']
getColumnDragTriggerProps	(props: TableColumnProps) => T['element']
getRowDragTriggerProps	(props: TableRowProps) => T['element']
getExpandTriggerProps	(props: TableRowProps) => T['element']
getExpandedRowProps	(props: TableRowProps) => T['element']
getEmptyProps	() => T['element']
getLoadingProps	() => T['element']
getLoadMoreTriggerProps	() => T['element']
getLiveRegionProps	() => T['element']

Accessibility

Keyboard

Specification: W3C APG. Each row is a stable behavior id that the conformance tests cover; the conditions and effects are described on the Chinese page.

Keys	Behavior
Enter / Space	table.kbd.press
Tab / Shift+Tab	table.kbd.tab
ArrowDown	table.kbd.next
ArrowUp	table.kbd.prev
Home	table.kbd.first
End	table.kbd.last
Enter	table.kbd.action
Space	table.kbd.select
ArrowRight	table.kbd.expand
ArrowLeft	table.kbd.collapse
Enter / Space	table.kbd.sort
Enter / Space	table.kbd.select-all
Enter / Space	table.kbd.column-visibility
Ctrl+A / Cmd+A	table.kbd.select-all-body
ArrowLeft / ArrowRight	table.kbd.column-resize
Shift+ArrowLeft / Shift+ArrowRight	table.kbd.column-resize-large
ArrowLeft / ArrowRight	table.kbd.column-move
Home / End	table.kbd.column-move-edge
ArrowRight	table.kbd.cell-enter
ArrowLeft	table.kbd.cell-parent
ArrowRight / ArrowLeft	table.kbd.cell-move
ArrowDown / ArrowUp	table.kbd.cell-column
Home / End	table.kbd.cell-row-edge
Ctrl+Home / Ctrl+End	table.kbd.cell-column-edge
Enter / F2	table.kbd.cell-edit
Tab / Shift+Tab	table.kbd.cell-edit-tab
Escape / F2	table.kbd.cell-edit-exit
Alt+ArrowUp / Alt+ArrowDown	table.kbd.row-move
Alt+ArrowLeft / Alt+ArrowRight	table.kbd.row-indent

ARIA

These attributes are produced by connect.

Part	Attribute	Value
root	aria-busy	'true' | undefined
root	aria-colcount	columns.length || undefined
root	aria-labelledby	id of the caption part | undefined
root	aria-multiselectable	'true' | 'false'
root	aria-rowcount	headerRowCount + visibleRows.length + footerRowCount
root	role	'treegrid' | 'grid'
header	role	'rowgroup'
body	role	'rowgroup'
footer	role	'rowgroup'
row	aria-controls	id of the detail part | undefined
row	aria-disabled	'true' | 'false'
row	aria-expanded	'true' | 'false' | undefined
row	aria-level	metaIndex.get(row.value)?.level | undefined
row	aria-posinset	metaIndex.get(row.value)?.posInSet | undefined
row	aria-rowindex	dataRowIndex.get(row.value)
row	aria-selected	'true' | 'false' | undefined
row	aria-setsize	metaIndex.get(row.value)?.setSize | undefined
row	role	'row'
column-header	aria-colindex	cell.colIndex
column-header	aria-colspan	cell.colSpan | undefined
column-header	aria-hidden	'true'
column-header	aria-rowspan	cell.rowSpan | undefined
column-header	aria-sort	'ascending' | 'descending' | 'none' | undefined
column-header	role	'columnheader'
cell	aria-colindex	columnIndex.get(cell.value)
cell	aria-colspan	Math.max(cell.colSpan ?? 1, origin?.colSpan ?? 1) | undefined
cell	aria-hidden	'true'
cell	aria-rowspan	origin.rowSpan | undefined
cell	role	'rowheader' | 'gridcell'
toolbar	aria-label	label.toolbar
column-list	aria-label	label.columnList
column-list	role	'group'
column-visibility-trigger	aria-checked	'false' | 'true'
column-visibility-trigger	aria-disabled	'false' | 'true'
column-visibility-trigger	aria-label	label.columnVisibility(def?.label ?? column.value)
column-visibility-trigger	role	'checkbox'
select-all-trigger	aria-checked	'true' | 'mixed' | 'false'
select-all-trigger	aria-disabled	'false' | 'true'
select-all-trigger	aria-label	label.selectAll
select-all-trigger	role	'checkbox'
row-select-trigger	aria-hidden	'true'
sort-trigger	aria-disabled	'false' | 'true'
sort-trigger	aria-label	label.sort(def?.label ?? column.value)
sort-trigger	role	'button'
column-resize-trigger	aria-disabled	'false' | 'true'
column-resize-trigger	aria-label	label.columnResize(def?.label ?? column.value)
column-resize-trigger	aria-orientation	'vertical'
column-resize-trigger	aria-valuemax	def?.maxWidth | undefined
column-resize-trigger	aria-valuemin	def?.minWidth | undefined
column-resize-trigger	aria-valuenow	columnNumericWidth(context.get('columnPreference').wi…
column-resize-trigger	role	'separator'
column-drag-trigger	aria-disabled	'false' | 'true'
column-drag-trigger	aria-label	label.columnDrag(def?.label ?? column.value)
column-drag-trigger	aria-roledescription	label.columnDragRoleDescription
column-drag-trigger	role	'button'
row-drag-trigger	aria-hidden	'true'
expand-trigger	aria-hidden	'true'
expanded-row	aria-level	(metaIndex.get(row.value)?.level ?? 1) + 1 | undefined
expanded-row	aria-posinset	1 | undefined
expanded-row	aria-rowindex	detailRowIndex.get(row.value)
expanded-row	aria-setsize	1 | undefined
expanded-row	role	'row'
live-region	aria-atomic	'true'
live-region	aria-live	'polite'
live-region	role	'status'
header-row	aria-rowindex	Math.max(1, Math.min(Math.trunc(header?.level ?? 1) |…
footer-row	aria-rowindex	headerRowCount + visibleRows.length + level | undefined
header-row	role	'row'
footer-row	role	'row'

Style reference

Skin

@xihan-ui/styles/table.css is written against [data-scope="table"][data-part="root"] part selectors; the published build uses the mount class .xh-scope-table in place of data-scope (same specificity) and sits in the xihan.components layer. Put overrides in xihan.overrides; the part selectors work as usual.

Data attributes

Produced by connect; valueless attributes are omitted while their condition does not hold.

Part	Attribute	Value
root	data-at-max-horizontal	'' (present only while the condition holds)
root	data-at-min-horizontal	'' (present only while the condition holds)
root	data-empty	'' (present only while the condition holds)
root	data-fixed	'' (present only while the condition holds)
root	data-loading	'' (present only while the condition holds)
root	data-size	props.size
root	data-split	'' (present only while the condition holds)
root	data-striped	'' (present only while the condition holds)
root	data-variant	props.variant
header	data-fixed	'' (present only while the condition holds)
body	data-empty	'' (present only while the condition holds)
footer	data-fixed	'' (present only while the condition holds)
row	data-disabled	'' (present only while the condition holds)
row	data-draggable	'' (present only while the condition holds)
row	data-dragging	'' (present only while the condition holds)
row	data-drop	'before' | 'after' | 'inside'
row	data-highlighted	'' (present only while the condition holds)
row	data-pressed	'' (present only while the condition holds)
row	data-section	'body'
row	data-selected	'' (present only while the condition holds)
row	data-state	'open' | 'closed' | undefined
row	data-xh-collection-context	'page'
row	data-xh-collection-item	''
row	data-xh-collection-size	props.size
column-header	data-align	def?.align
column-header	data-covered	'' (present only while the condition holds)
column-header	data-dragging	'' (present only while the condition holds)
column-header	data-drop	'before' | 'after'
column-header	data-filtered	'' (present only while the condition holds)
column-header	data-frozen	undefined
column-header	data-frozen-edge	'' (present only while the condition holds)
column-header	data-group	'' (present only while the condition holds)
column-header	data-row-span	'' (present only while the condition holds)
column-header	data-sort	'asc' | 'desc'
column-header	data-sort-index	tableSortIndexOf(sort, value) | undefined
column-header	data-sortable	'' (present only while the condition holds)
cell	data-align	def?.align
cell	data-covered	'' (present only while the condition holds)
cell	data-disabled	'' (present only while the condition holds) | undefined
cell	data-dragging	'' (present only while the condition holds)
cell	data-drop	'before' | 'after'
cell	data-frozen	undefined
cell	data-frozen-edge	'' (present only while the condition holds)
cell	data-row-span	'' (present only while the condition holds)
cell	data-selected	'' (present only while the condition holds) | undefined
toolbar	data-size	props.size
column-list	data-size	props.size
column-visibility-trigger	data-disabled	'' (present only while the condition holds)
column-visibility-trigger	data-pressed	'' (present only while the condition holds)
column-visibility-trigger	data-state	'unchecked' | 'checked'
column-visibility-trigger	data-xh-action-control	''
column-visibility-trigger	data-xh-action-display	'always'
column-visibility-trigger	data-xh-action-profile	'icon'
column-visibility-trigger	data-xh-action-size	props.size
column-visibility-trigger	data-xh-action-variant	'outline'
column-visibility-trigger	data-xh-check-mark	'unchecked' | 'checked'
column-visibility-trigger	data-xh-check-mark-profile	'box'
select-all-trigger	data-disabled	'' (present only while the condition holds)
select-all-trigger	data-pressed	'' (present only while the condition holds)
select-all-trigger	data-state	tableSelectionState([...cascaded.checked], tableCasca… | tableSelectionState(selection, selectableIds)
select-all-trigger	data-xh-action-control	''
select-all-trigger	data-xh-action-display	'always'
select-all-trigger	data-xh-action-profile	'icon'
select-all-trigger	data-xh-action-size	props.size
select-all-trigger	data-xh-action-variant	'outline'
select-all-trigger	data-xh-check-mark	tableSelectionState([...cascaded.checked], tableCasca… | tableSelectionState(selection, selectableIds)
select-all-trigger	data-xh-check-mark-profile	'box'
row-select-trigger	data-disabled	'' (present only while the condition holds)
row-select-trigger	data-highlighted	'' (present only while the condition holds)
row-select-trigger	data-indeterminate	'' (present only while the condition holds)
row-select-trigger	data-pressed	'' (present only while the condition holds)
row-select-trigger	data-selected	'' (present only while the condition holds)
row-select-trigger	data-state	'open' | 'closed' | undefined
row-select-trigger	data-xh-action-control	''
row-select-trigger	data-xh-action-display	'always'
row-select-trigger	data-xh-action-profile	'icon'
row-select-trigger	data-xh-action-size	props.size
row-select-trigger	data-xh-action-variant	'outline'
row-select-trigger	data-xh-check-mark	'checked' | 'indeterminate' | 'unchecked'
row-select-trigger	data-xh-check-mark-profile	'box'
sort-trigger	data-disabled	'' (present only while the condition holds)
sort-trigger	data-pressed	'' (present only while the condition holds)
sort-trigger	data-sort	'asc' | 'desc'
sort-trigger	data-sort-index	tableSortIndexOf(sort, value) | undefined
sort-trigger	data-xh-action-control	''
sort-trigger	data-xh-action-display	'always'
sort-trigger	data-xh-action-profile	'icon'
sort-trigger	data-xh-action-size	props.size
sort-trigger	data-xh-action-variant	'ghost'
column-resize-trigger	data-disabled	'' (present only while the condition holds)
column-resize-trigger	data-resizing	'' (present only while the condition holds)
column-drag-trigger	data-disabled	'' (present only while the condition holds)
column-drag-trigger	data-dragging	'' (present only while the condition holds)
row-drag-trigger	data-disabled	'' (present only while the condition holds)
row-drag-trigger	data-dragging	'' (present only while the condition holds)
expand-trigger	data-disabled	'' (present only while the condition holds)
expand-trigger	data-highlighted	'' (present only while the condition holds)
expand-trigger	data-pressed	'' (present only while the condition holds)
expand-trigger	data-selected	'' (present only while the condition holds)
expand-trigger	data-state	'open' | 'closed' | undefined
expand-trigger	data-xh-action-control	''
expand-trigger	data-xh-action-display	'always'
expand-trigger	data-xh-action-profile	'icon'
expand-trigger	data-xh-action-size	props.size
expand-trigger	data-xh-action-variant	'ghost'
expanded-row	data-dragging	'' (present only while the condition holds)
expanded-row	data-state	'open' | 'closed'
loading	data-loading	'' (present only while the condition holds)
loading	data-xh-loading-ring	''
load-more-trigger	data-loading	'' (present only while the condition holds)
load-more-trigger	data-pressed	'' (present only while the condition holds)
load-more-trigger	data-xh-action-control	''
load-more-trigger	data-xh-action-display	'always'
load-more-trigger	data-xh-action-profile	'row'
load-more-trigger	data-xh-action-size	props.size
load-more-trigger	data-xh-action-variant	'ghost'
header-row	data-section	'header'
footer-row	data-section	'footer'

CSS variables

The public override slots, generated from what the standalone skin actually consumes.

Variable	Part	CSS property	State	Default from
--xh-table-bg	root	background	default variant=outline variant=subtle	--xh-bg-subtle --xh-bg-surface
--xh-table-border	root	border	variant=outline	--xh-border-default
--xh-table-caption-fg	caption	color	default	--xh-fg-muted
--xh-table-caption-font-size	caption	font-size	default	--xh-text-label-size
--xh-table-caption-font-weight	caption	font-weight	default	--xh-text-label-weight
--xh-table-caption-px	caption	padding-inline	default	--xh-space-3
--xh-table-caption-py	caption	padding-block	default	--xh-space-2
--xh-table-cell-gap	cell column-header	gap	default	--xh-control-gap-md
--xh-table-cell-min-w	cell column-header	min-inline-size	default	3rem
--xh-table-cell-px	cell column-header root	padding-inline padding-inline-end	default not(:last-child) split	--xh-_table-cell-px
--xh-table-cell-py	cell column-header	padding-block	default	--xh-_table-cell-py
--xh-table-column-fg	column-header	color	default	--xh-fg-default
--xh-table-column-font-weight	column-header	font-weight	default	--xh-font-weight-medium
--xh-table-column-list-fg	column-list	color	default	--xh-fg-default
--xh-table-column-list-font-size	column-list	font-size	default	--xh-text-secondary-size
--xh-table-column-list-gap	column-list	gap	default	--xh-_table-column-list-gap
--xh-table-detail-bg	expanded-row	background	default	--xh-bg-subtle
--xh-table-detail-px	cell expanded-row	padding-inline	default	--xh-_table-cell-px
--xh-table-detail-py	cell expanded-row	padding-block	default	--xh-space-3
--xh-table-drag-fg	column-drag-trigger	color	default	--xh-fg-subtle
--xh-table-drag-fg-active	column-drag-trigger	color	disabled dragging hover not([data-disabled])	--xh-fg-default
--xh-table-drag-fg-disabled	column-drag-trigger	color	disabled	--xh-fg-disabled
--xh-table-drag-grip-h	column-drag-trigger	block-size	empty	--xh-space-2
--xh-table-drag-grip-w	column-drag-trigger	inline-size	empty	--xh-space-1
--xh-table-drag-size	column-drag-trigger	block-size inline-size	default	--xh-control-indicator-size
--xh-table-dragging-opacity	cell column-header expanded-row row	opacity	dragging	--xh-state-dragging-opacity
--xh-table-drop-fg	cell column-header row	background box-shadow	drop drop=after drop=before drop=inside frozen is([data-drop='before'], [data-drop='after']) not([data-frozen])	--xh-bg-brand
--xh-table-drop-inside-bg	body root row	background	disabled drop=inside not([data-disabled])	--xh-bg-subtle-hover-opaque
--xh-table-drop-line	cell column-header row	block-size box-shadow inline-size	drop drop=after drop=before drop=inside frozen is([data-drop='before'], [data-drop='after']) not([data-frozen])	--xh-stroke-thick
--xh-table-expand-fg	expand-trigger	color	default disabled focus-visible hover is(:active, [data-pressed]) loading not([data-disabled]) not([data-loading]) pressed	--xh-fg-subtle
--xh-table-fg	root	color	default	--xh-fg-default
--xh-table-filter-fg	column-header trigger	color	default	--xh-fg-subtle
--xh-table-filter-fg-active	column-header trigger	color	filtered	--xh-fg-brand
--xh-table-filter-size	column-header trigger	--xh-icon-size	default	--xh-_table-trigger-size
--xh-table-font-size	root row	font-size	default	--xh-_table-font-size
--xh-table-footer-bg	cell footer row	background	default fixed frozen	--xh-bg-subtle --xh-bg-subtle-opaque
--xh-table-footer-border	footer	border-block-start	default	--xh-border-subtle
--xh-table-footer-font-weight	footer	font-weight	default	--xh-font-weight-medium
--xh-table-frozen-edge	cell column-header	background	frozen-edge is([data-part='column-header'], [data-part='cell'])	--xh-border-default
--xh-table-header-bg	column-header header	background	default frozen	--xh-_table-header-bg
--xh-table-header-border	header	border-block-end	default	--xh-border-subtle
--xh-table-icon-size	root	--xh-icon-size	default size=lg size=sm	--xh-glyph-size-lg --xh-glyph-size-md --xh-glyph-size-sm
--xh-table-load-more-trigger-bg-hover	load-more-trigger	background-color	disabled hover loading not([data-disabled]) not([data-loading])	--xh-_action-variant-bg-hover
--xh-table-load-more-trigger-fg	load-more-trigger	color	default disabled hover is(:active, [data-pressed]) loading not([data-disabled]) not([data-loading]) pressed	--xh-fg-brand-strong
--xh-table-load-more-trigger-font-size	load-more-trigger	font-size	default	--xh-_table-font-size
--xh-table-load-more-trigger-gap	load-more-trigger	gap	default	--xh-space-2
--xh-table-load-more-trigger-px	load-more-trigger	padding-inline	default	--xh-space-4
--xh-table-load-more-trigger-py	load-more-trigger	padding-block	xh-action-profile=row	--xh-space-3
--xh-table-load-more-trigger-radius	load-more-trigger	border-radius	default	--xh-shape-control
--xh-table-loading-duration	loading	animation-duration	default	--xh-motion-loop-spin
--xh-table-max-h	root	max-block-size	default	--xh-viewport-h-lg
--xh-table-pagination-gap	root	margin-block-start	default	--xh-space-3
--xh-table-radius	root	border-radius	variant=outline variant=subtle	--xh-shape-surface
--xh-table-resize-fg	column-resize-trigger	background	default	--xh-border-default
--xh-table-resize-fg-active	column-resize-trigger	background	hover resizing	--xh-bg-brand
--xh-table-resize-line	column-resize-trigger	inline-size	default	--xh-stroke-thin
--xh-table-resize-line-length	column-resize-trigger	block-size	default	60%
--xh-table-resize-radius	column-resize-trigger	border-radius	default	--xh-shape-pill
--xh-table-resize-width	column-resize-trigger	inline-size	default	--xh-space-2
--xh-table-row-bg	row	background-color	default	--xh-bg-surface
--xh-table-row-bg-hover	row	background-color	disabled error highlighted hover is(:focus-visible, [data-highlighted]) not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error])	--xh-bg-subtle-opaque
--xh-table-row-bg-pressed	row	background-color	disabled error is(:active, [data-pressed]) not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) pressed	--xh-bg-subtle-hover-opaque
--xh-table-row-bg-selected	row	background-color	disabled error is([aria-selected='true'], [data-selected]) not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) selected xh-collection-context=page	--xh-bg-brand-subtle
--xh-table-row-bg-striped	body root row	background-color	striped where(:nth-of-type(even) where([data-scope='table'][data-part='root'][data-striped] [data-scope='table'][data-part='body'])	--xh-bg-subtle-opaque
--xh-table-row-border	body cell column-header expanded-row footer header item root row	border-block-start border-inline-end	index=0 is([data-part='header'], [data-part='body'], [data-part='footer']) is([data-part='row'], [data-part='expanded-row']) not(:last-child) not([data-index='0']) not([hidden]) split	--xh-border-subtle
--xh-table-row-cursor	row	cursor	default disabled error highlighted hover is(:active, [data-pressed]) is(:focus-visible, [data-highlighted]) is([aria-selected='true'], [data-selected]) not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) pressed selected xh-collection-context=page	default
--xh-table-row-drag-fg	row-drag-trigger	color	default	--xh-fg-subtle
--xh-table-row-drag-fg-active	row-drag-trigger	color	disabled dragging hover not([data-disabled])	--xh-fg-default
--xh-table-row-drag-fg-disabled	row-drag-trigger	color	disabled	--xh-fg-disabled
--xh-table-row-drag-grip-long	row-drag-trigger	inline-size	empty	--xh-space-2
--xh-table-row-drag-grip-short	row-drag-trigger	block-size	empty	--xh-space-1
--xh-table-row-drag-size	row-drag-trigger	block-size inline-size	default	--xh-control-indicator-size
--xh-table-row-fg-selected	row	color	disabled error highlighted hover is(:active, [data-pressed]) is(:focus-visible, [data-highlighted]) is([aria-selected='true'], [data-selected]) not([aria-disabled='true'], [data-disabled], [aria-busy='true'], [data-error]) pressed selected xh-collection-context=page	--xh-fg-on-brand-subtle
--xh-table-sort-bg-hover	column-header sort-trigger trigger	background background-color	disabled hover loading not([data-disabled]) not([data-loading])	--xh-_action-variant-bg-hover --xh-bg-subtle-hover
--xh-table-sort-bg-pressed	sort-trigger	background-color	disabled is(:active, [data-pressed]) loading not([data-disabled]) not([data-loading]) pressed	--xh-_action-variant-bg-pressed
--xh-table-sort-fg	sort-trigger	color	default disabled focus-visible hover is(:active, [data-pressed]) loading not([data-disabled]) not([data-loading]) pressed	--xh-fg-subtle
--xh-table-sort-fg-active	sort-trigger	color	disabled focus-visible hover is(:active, [data-pressed]) loading not([data-disabled]) not([data-loading]) pressed sort sort-index	--xh-fg-default
--xh-table-sort-size	sort-trigger	--xh-icon-size	default	--xh-_table-trigger-size
--xh-table-span-layer	cell column-header	z-index	is([data-part='cell'], [data-part='column-header']) row-span	1
--xh-table-state-fg	empty loading	color	default	--xh-fg-muted
--xh-table-state-gap	empty loading	gap	default	--xh-control-gap-md
--xh-table-state-min-h	empty loading	min-block-size	default	0
--xh-table-state-px	empty loading	padding-inline	default	--xh-control-px-sm
--xh-table-state-py	empty loading	padding-block	default	--xh-space-3
--xh-table-sticky-column-layer	cell column-header row	z-index	drop drop=after drop=before drop=inside focus-visible frozen is([data-drop='before'], [data-drop='after']) not([data-drop])	1
--xh-table-sticky-footer-layer	footer	z-index	fixed	--xh-layer-sticky
--xh-table-sticky-header-layer	header	z-index	fixed	--xh-layer-sticky
--xh-table-sticky-inset	cell column-header	inset-inline-end inset-inline-start	frozen=end frozen=start	0
--xh-table-toolbar-fg	toolbar	color	default	--xh-fg-default
--xh-table-toolbar-gap	toolbar	gap	default	--xh-_table-toolbar-gap
--xh-table-toolbar-py	toolbar	padding-block	default	--xh-space-2
--xh-table-trigger-bg-checked	column-visibility-trigger expand-trigger row-select-trigger select-all-trigger sort-trigger	--xh-ink-surface background-color border border-color	disabled focus-visible hover indeterminate is(:active, [data-pressed]) is([data-selected], [data-indeterminate]) is([data-state='checked'], [data-state='indeterminate']) loading not([data-disabled]) not([data-loading]) pressed selected state=checked state=indeterminate xh-ink-surface	--xh-bg-brand
--xh-table-trigger-bg-checked-pressed	column-visibility-trigger expand-trigger row-select-trigger select-all-trigger sort-trigger	background-color	disabled indeterminate is(:active, [data-pressed]) is([data-selected], [data-indeterminate]) is([data-state='checked'], [data-state='indeterminate']) loading not([data-disabled]) not([data-loading]) pressed selected state=checked state=indeterminate	--xh-bg-brand-active
--xh-table-trigger-bg-pressed	column-visibility-trigger expand-trigger row-select-trigger select-all-trigger sort-trigger	background-color	disabled is(:active, [data-pressed]) loading not([data-disabled]) not([data-loading]) pressed	--xh-bg-subtle-hover
--xh-table-trigger-border	column-visibility-trigger expand-trigger row-select-trigger select-all-trigger sort-trigger	border border-color	default disabled focus-visible hover is(:active, [data-pressed]) loading not([data-disabled]) not([data-loading]) pressed	--xh-border-strong
--xh-table-trigger-border-checked	column-visibility-trigger expand-trigger row-select-trigger select-all-trigger sort-trigger	border border-color	disabled focus-visible hover indeterminate is(:active, [data-pressed]) is([data-selected], [data-indeterminate]) is([data-state='checked'], [data-state='indeterminate']) loading not([data-disabled]) not([data-loading]) pressed selected state=checked state=indeterminate	--xh-table-trigger-bg-checked
--xh-table-trigger-fg	column-visibility-trigger row-select-trigger select-all-trigger	color	default disabled focus-visible hover is(:active, [data-pressed]) loading not([data-disabled]) not([data-loading]) pressed	--xh-fg-on-brand
--xh-table-trigger-radius	column-drag-trigger column-header column-visibility-trigger expand-trigger row-drag-trigger row-select-trigger select-all-trigger sort-trigger trigger	border-radius	default	--xh-shape-control --xh-shape-inset
--xh-table-trigger-size	column-header column-visibility-trigger expand-trigger row-select-trigger select-all-trigger sort-trigger trigger	--xh-icon-size block-size inline-size min-block-size min-inline-size	default xh-action-profile=icon xh-action-profile=row	--xh-control-indicator-size