DataTable

import DataTable from '@semcore/ui/data-table';
<DataTable />;

DataTableProps

& & {...}

Name	Type	Description
data		Data for table
totalRows	number	Count of total rows if table using virtual scroll. Needs for accessibility
use		Table theme according to visual hierarchy on the page
sort	DataTableSort<keyof [0]>	Active sort object
onSortChange	DataTableChangeSort<keyof [0]>	Handler call when request will change sort
defaultGridTemplateColumnWidth	string	Value to describe width for each column. Could be overridden in the column.gtcWidth property. Use `auto` to automatically fit the table to the content, `1fr` for equal-width columns or any other value for the grid-template-column css property.
compact	boolean	Flag for compact view (smaller horizontal paddings)
sideIndents	"wide"	Size of paddings for the first and last columns in the table
loading	boolean	Flag for showing spinner on table body
children	never
expandedRows	Set<[number][keyof [number]]>	Set of expanded rows (uniq id from them) This is mutable! variable because of table performance. Don't change the link on it.
virtualScroll		Configuration for virtual scroll
columns		Configuration for table columns including headers, sorting, and layout
headerProps		Configuration for sticky headers, height, scroll bars, etc.
rowProps	DataTableBodyProps<, [number][keyof [number]]>["rowProps"]	Function to add custom props to rows
renderCell	DataTableBodyProps<, [number][keyof [number]]>["renderCell"]	Custom cell renderer function
uniqueRowKey	keyof [number]	Name of a unique key for each row data item
selectedRows	[number][keyof [number]][]	List of selected rows (uniqIds from a data array)
onSelectedRowsChange	(selectedRows: [number][keyof [number]][], event: React.SyntheticEvent<>, opts: {selectedRowIndex: number; isSelected: boolean; row: DTRow<[number][keyof [number]]> }) => void	Callback when row selection changes
renderEmptyData	() => React.ReactNode	For custom empty data widget.
renderCellOverlay	() => React.ReactNode	For adding an overlay over table cells.
accordionDuration	number | [number, number]	Duration for collapse/expand accordion rows in tables in ms.
accordionAnimationRows	RowPropsInner<, [number][keyof [number]]>["accordionAnimationRows"]	List of animated rows in accordion.
accordionMode	"toggle" | "independent"	Whether multiple accordion items can be open at a time, or only one.
onAccordionToggle	(type: "open" | "close", uniqRowKey: [number][keyof [number]], rowIndex: number) => void	Handle open/close accordion. Work only with table-in-table accordions. In accordions with custom components use mount/unmount hooks in components.
limit	{fromRow?: number; fromColumn?: number; renderOverlay: () => React.ReactNode }	Defines a limit configuration
variant	"default" | "card"	Visual variant that adapts the table styling to different usage contexts
onExpandedRowsChange	(expandedRows: Set<[number][keyof [number]]>) => void	Handle change expanded rows
onResize		Handling table container resizing.

CellRenderProps are passed to the renderCell prop of DataTable.

CellRenderProps

Name	Type	Description
dataKey	string	The column key for the cell data
row	DTRow<>	The complete row data object
column		The column configuration object
rowIndex	number	Zero-based row index in the table
columnIndex	number	Zero-based column index in the table
columnName	string | typeof ACCORDION	The name/key of the column
value	string | React.ReactElement	Cell value
defaultRender	() => React.ReactNode	Function that returns the default cell rendering
isMergedRows	boolean	Indicates if this cell spans multiple rows
isMergedColumns	boolean	Indicates if this cell spans multiple columns
rawData		The original unprocessed row data
isAccordionRow	boolean	Flag to show is the cell is in the accordion row
accordionRowIndex	number	Zero-based accordion row index