id: table title: Table

Table UI Component

Demo

API

Table

| Property | Description | Type | Default | |-----------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------| | bordered | Whether to show all table borders | boolean | false | | childrenColumnName | The column contains children to display | string / [] | children | | columns | Columns of table | ColumnProps[] | - | | components | Override default table elements | TableComponents | - | | dataSource | Data record array to be displayed | any / [] | - | | dataSourceFull | If dataSource prop is a subset of a larger array (via search component for example), but you want selection row to operate on the full data array (selection onChange handler will return keys that are not in the current subset but have been selected prior to searching) | same as dataSource | - | | defaultExpandAllRows | Expand all rows initially | boolean | false | | defaultExpandedRowKeys | Initial expanded row keys | string / [] | - | | disableColumnNamesLineBreak | Disable line break when rendering column names | boolean | false | | expandedRowKeys | Current expanded row keys | string / [] | - | | expandedRowRender | Expanded container render for each row | (record, index, indent, expanded) => React.ReactNode | - | | expandIcon | Customize row expand Icon. Ref example | (props) => React.ReactNode | - | | expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | false | | footer | Table footer renderer | (currentPageData) => React.ReactNode | | | indentSize | Indent size in pixels of tree data | number | 15 | | loading | Loading status of table | boolean / object | false | | locale | i18n text including filter, sort, empty text, etc | object | filterConfirm: 'Ok' filterReset: 'Reset' emptyText: 'No Data' | | pagination | Config of pagination. You can ref table pagination config or full pagination document, hide it by setting it to false | object | | | rowClassName | Row's className | (record, index: number) => string | - | | rowKey | Row's unique key, could be a string or function that returns a string | string / (record) => string | key | | scroll | Set horizontal or vertical scrolling, can also be used to specify the width and height of the scroll area, could be number, percent value, true and 'max-content' | { x: number / true, y: number } | - | | showHeader | Whether to show table header | boolean | true | | size | Size of table | default / middle / small | default | | title | Table title renderer | string / React.ReactNode | | | hideTitleBar | Wheter to hide table title bar | boolean | - | | headerWithBorderTop | Wheter to add line above table title bar | boolean | - | | itemsMenu | Components or text visible when any of table itams are selected, usually used for bulk actions | string / React.ReactNode | - | | search | Search query | string | - | | cellSize | Defines padding size of each row in table | small / medium / default | default | | roundedHeader | Wheter to round table header | boolean | false | | selection | Config of rows selection | RowSelection | - | | filters | Array of filters cofings, earch of them will be rendered in table title bar | Filter[] | - | | searchComponent | SearchComponent | React.ReactNode | - | | filterComponent | FilterItemComponent | React.ReactNode | - | | emptyDataComponent | component to render when data provided to table is empty. default component is @synerise/ds-result | React.ReactNode | - | | grouped | Whether to render table as GroupedTable of DefaultTable | boolean | - | | onChange | Callback executed when pagination, filters or sorter is changed | (pagination, filters, sorter, extra: { currentDataSource: [] }) => void | | | onExpand | Callback executed when the row expand icon is clicked | (expanded, record) => void | | | onExpandedRowsChange | Callback executed when the expanded rows change | (expandedRows) => void | | | onHeaderRow | Set props on per header row | (column, index) => object | - | | onRow | Set props on per row | (record, index) => object | - | | onSort | Callback executed when sorter is changed | (sortedColumn: {columnKey: string; order: descend \ ascend \ null}, sortState: [key: string]: { sortOrder: descend \ ascend \ null; multiple: number \ false;}) => void | - | | getPopupContainer | the render container of dropdowns in table | (triggerNode) => HTMLElement | () => TableHtmlElement | | renderSelectionTitle | Function to render a custom title in table header when some items are selected | ({selection: RowSelection, filters:Filter[] }) => React.ReactNode | - | | rowStar | Configuration of row starring | RowStar | - | | maxHeight | Defines the max height to which table skeleton (when loading) should be filled with rows. If undefined 10 skeleton rows will be rendered | number | - |

VirtualTable

| Property | Description | Type | Default | | --------------- | ----------------------------------------------------------------------------------- | -------------------------------------- | ------- | | columns | Columns of table | ColumnProps[] | - | | scroll | Whether the table can be scrollable, config | {x?: number, y: number} | - | | onRowClick | Callback executed when row is clicked | (row) => void | - | | onListRefChange | Callback executed when a ref to the List (react-window package) component changes | (ref: RefObject) => void | - | | cellHeight | Defines height of single cell | number | - | | initialWidth | Initial width of table | number | - |

TreeTable

Display tree structure data in Table when there is field key children in dataSource.

GroupTable

This type of table requires a specific type of dataSource which has to contain a structure as the following:

| Property | Description | Type | Default | | --------- | ------------------------------------------------ | ------------------------------------------- | ------- | | column | Key of grouped column | string | - | | key | Key of group | React.ReactText | - | | value | Value of group ex. specific value or group name | React.ReactText\boolean\object | - | | rows | Data of items in group, like standard dataSource | any[] | - | | groupType | Type of active grouping | value / ranges / interval / undefined | - |

RowSelection

| Property | Description | Type | Default | | --------------- | ------------------------------------------------ | --------------------------------------------------------------- | ------- | | fixed | Whether to show selection column as fixed or not | boolean | - | | selectedRowKeys | Array of selected row keys | React.ReactText | [] | | selections | Selections options available in table title | SelectionItem[] | - | | onChange | Callback executed when selection changes | (selectedRowKeys: React.ReactText[], selectedRows: T[]) => void | - | | limit | Max length of selection rows array | number | - | | independentSelectionExpandedRows | Allows to select parent and child rows independently | boolean | - | | checkRowSelectionStatus | Validator function record selection status | (record: T) => SelectionStatus | - |

SelectionStatus

| Property | Description | Type | Default | | --------------- | ------------------------------------------------ | --------------------------------------------------------------- | ------- | | unavailable | Skips rendering checkbox if true | boolean | - | | disabled | Renders checkbox in disabled state | boolean | - |

RowStar

| Property | Description | Type | Default | | --------------- | ------------------------------------------------ | --------------------------------------------------------------- | ------- | | className | Classname of star component | string | - | | starredRowKeys | Array of keys of starred rows | string[] | - | | renderCell | Overrides render method | ColumnType<T>['render'] | - | | onClick | Callback called when user clicks on star component | (e: React.MouseEvent<HTMLElement, MouseEvent>) => void | - | | onChange | Callback called when user change starred status of row | (starredRowKeys: string[], starredKey: string, isStarred: boolean) => void | - | | disableForExpandedRows | Hides star components on child rows | boolean | - |

SelectionItem

Type which contains: DSTable.SELECTION_ALL | DSTable.SELECTION_INVERT | Selection | null | undefined;

Selection

Allows to create custom selection

| Property | Description | Type | Default | | -------- | ------------------------------------------------ | ---------- | ------- | | key | Unique key of this selection | string | - | | label | Display name of this selection | string | - | | onClick | Callback executed when this selection is clicked | () => void | - |

Filter

| Property | Description | Type | Default | | ----------- | ------------------------------------------------------- | -------------------------------------------------------------- | ------- | | tooltips | Object contains varius tooltips titles | {default: string, clear: string, define: string, list: string} | - | | openedLabel | Label visible list of filters is opened | string | - | | key | Key of filter | string | - | | icon | Icon of filter | React.ReactNode | - | | showList | Function executed when user clicks on showList icon | () => void | - | | show | Function executed when user clicks on filter icon | () => void | - | | handleClear | Function executed when user clicks on clear filter icon | () => void | - | | selected | Name of selected filter | {name: string} | - | | disabled | Whether to disable filter icon | boolean | - |

onRow usage

Same as onRow onHeaderRow onCell onHeaderCell

<Table
  onRow={(record, rowIndex) => {
    return {
      onClick: event => {}, // click row
      onDoubleClick: event => {}, // double click row
      onContextMenu: event => {}, // right button click row
      onMouseEnter: event => {}, // mouse enter row
      onMouseLeave: event => {}, // mouse leave row
    };
  }}
  onHeaderRow={column => {
    return {
      onClick: () => {}, // click header row
    };
  }}
/>

Column

One of the Table columns prop for describing the table's columns, Column has the same API.

| Property | Description | Type | Default | Version | | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------- | ----------------------- | ----------- | | align | specify which way that column is aligned | left / right / center | left | 3.3.2 | | className | className of this column | string | - | | | colSpan | Span of this column's title | number | | | | dataIndex | Display field of the data record, could be set like a.b.c, a[0].b.c[1] | string | - | | | defaultSortOrder | Default order of sorted values | ascend / descend | - | | | filterDropdown | Customized filter overlay | ReactNode | - | | | filterDropdownVisible | Whether filterDropdown is visible | boolean | - | | | filtered | Whether the dataSource is filtered | boolean | false | | | filteredValue | Controlled filtered value, filter icon will highlight | string / [] | - | | | filterIcon | Customized filter icon | React.ReactNode / (filtered: boolean) => React.ReactNode | false | | | filterMultiple | Whether multiple filters can be selected | boolean | true | | | filters | Filter menu config | object / [] | - | | | fixed | Set column to be fixed: true(same as left) 'left' 'right' | boolean / string | false | | | itemsMenu | Component with menu for selected items | React.ReactNode | - | | | key | Unique key of this column, you can ignore this prop if you've set a unique dataIndex | string | - | | | maxWidth | Maximal width of this column | string / number | - | | | minWidth | Minimal of this column. If not provided, defaults to width property. | string / number | - | | | render | Renderer of the table cell. The return value should be a ReactNode, or an object for colSpan/rowSpan config | (value, record, index) => React.ReactNode | - | | | childRender | Renderer of the table cell in child row - available only on virtual tables. The return value should be a ReactNode, or an object for colSpan/rowSpan config | (value, record, index) => React.ReactNode | - | | | search | Search input value | string | - | | | sorter | Sort function for local sort, see Array.sort's compareFunction. If you need sort buttons only, set to true.Use object for multi sorting:{ compare: (a, b) => a.math - b.math, <br />multiple: 2 } | function / boolean / object | - | | | sortOrder | Order of sorted values: 'ascend' 'descend' false | boolean / string | - | | | sortDirections | supported sort way, could be 'ascend', 'descend' | Array | ['ascend', 'descend'] | 3.15.2 | | sortRender | How to render sort buttons and options. Values: 'default', 'string', (sortStateApi: SortStateAPI, column: DSColumnType<T>) => React.ReactElement | string / function / 'default' | 'default' | | | title | Title of this column | React.ReactNode / ({ sortOrder, filters }) => React.ReactNode | - | | | width | Width of this column | string / number | - | | | onCell | Set props on per cell | (record, rowIndex: number) => object | - | | | onFilter | Callback executed when the confirm filter button is clicked | () => void | - | | | onFilterDropdownVisibleChange | Callback executed when filterDropdownVisible is changed | (visible: boolean) => void | - | | | onHeaderCell | Set props on per header cell | (column) => object | - | |

ColumnGroup

| Property | Description | Type | Default | | -------- | ------------------------- | ---------------- | ------- | | title | Title of the column group | string\ReactNode | - |

pagination

Properties for pagination.

| Property | Description | Type | Default | | -------- | ------------------------------------ | ------------------------- | -------- | | position | specify the position of Pagination | 'top' \ 'bottom' \ 'both' | 'bottom' |

More about pagination, please check Pagination.