Developer 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 |