DataTable
jsx
import DataTable from '@semcore/ui/data-table';
<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 |
DataTable.Head
jsx
import DataTable from '@semcore/ui/data-table';
<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 |
DataTable.Column
jsx
import DataTable from '@semcore/ui/data-table';
<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 |
DataTable.Body
jsx
import DataTable from '@semcore/ui/data-table';
<DataTable.Body />;
import DataTable from '@semcore/ui/data-table';
<DataTable.Body />;
It's a wrapper over a Box component.
DataTable.Row
jsx
import DataTable from '@semcore/ui/data-table';
<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
jsx
import DataTable from '@semcore/ui/data-table';
<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 |