DataTable

Setup

import { DataTable } from '@fragments-sdk/ui';

Loading preview...

Prop	Type	Default	Description
`columns`Required	`array`	Not set	Column definitions
`data`Required	`array`	Not set	Data rows to display
`getRowId`	`function`	Not set	Unique key extractor for each row
`sortable`	`boolean`	`false`	Enable column sorting
`sorting`	`array`	Not set	Controlled sorting state
`onSortingChange`	`function`	Not set	Sorting change handler
`selectable`	`boolean`	`false`	Enable row selection
`showCheckbox`	`boolean`	`false`	Show checkbox column for row selection (requires selectable)
`rowSelection`	`object`	Not set	Controlled row selection state
`onRowSelectionChange`	`function`	Not set	Row selection change handler
`onRowClick`	`function`	Not set	Handler for row clicks/keyboard activation. Called as (row, event)
`getSubRows`	`function`	Not set	Extract sub-rows for expandable tree tables
`expanded`	`union`	Not set	Controlled expanded state
`onExpandedChange`	`function`	Not set	Expanded state change handler
`emptyMessage`	`string`	`No data available`	Message when no data
`size`	`enumsmmd`	`md`	Table density
`caption`	`string`	Not set	Visible caption for the table
`captionHidden`	`boolean`	`false`	Hide caption visually but keep it for screen readers
`striped`	`boolean`	`false`	Show alternating row backgrounds
`bordered`	`boolean`	`false`	Wrap table in a bordered container
`wrapperClassName`	`string`	Not set	Additional class name for the outer wrapper div
`wrapperProps`	`object`	Not set	Props forwarded to the outer wrapper div (id, aria-, data-, handlers)