DataTable

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

DataTableProps

& {...} &

Name	Type	Description
use		Table theme according to visual hierarchy on the page
data	{[key: string]:any }[]	Data for table
sort	DataTableSort<keyof {[key: string]:any }[][0]>	Active sort object
onSortChange	(sort: DataTableSort<keyof {[key: string]:any }[][0]>, e: React.SyntheticEvent) => void	Handler call when request will change sort
uniqueKey	keyof {[key: string]:any }[][0]	Field name in one data entity that is unique accross all dataset
compact	boolean	Make cells compact by changing left and right paddings to smaller ones
totalRows	number	Count of total rows if table using virtual scroll. Needs for accessibility

DataTable.Head

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

DataTableHeadProps

& {...}

Name	Type	Description
sticky	boolean	Sticky table header
hidden	boolean	Hidden header
disabledScroll	boolean	Disabled scroll (as action)
withScrollBar	boolean	Enable scroll bar element in header
animationsDisabled	boolean	Disables column width change animation *

DataTable.Column

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

DataTableColumnProps

& {...}

Name	Type	Description
name	string	Unique column name
sortable	boolean | "desc" | "asc"	Enable sorting for column. And if you are passing a string, you can also set the default sorting
resizable	boolean	Enable resize for column
fixed	"left" | "right"	Fix column on the left o right side of the table
flex	Property.Flex | "inherit"	Fields to control the size of the column
vBorders	boolean	Add vertical border to the column
borderRight	boolean	Add vertical border to the right side of the cell
borderLeft	boolean	Add vertical border to the left side of the cell
changeSortSize	boolean	Enable changing column width with sort icon
sortSizeRecalculation	boolean	Enable column to use as a column for recalculation width

DataTable.Body

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

It's a wrapper over a Box component.

DataTable.Row

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

DataTableRowProps

& {...}

Name	Type	Description
theme		Theme for row
active	boolean	Sets row state to active

DataTable.Cell

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

DataTableCellProps

& {...}

Name	Type	Description
name	string	Unique name for column or columns separated by /
theme		Theme for cell