Table

A table displays rows of data.

When to use

To display a collection of structured data.
To sort, search, paginate, filter data.

Examples

Basic Usage

Simple table with actions.

JSX style API

Using JSX style API (introduced in 2.5.0) > Since this is just a syntax sugar for the prop columns, you can't compose Column and ColumnGroup with other Components.

selection

Rows can be selectable by making first column as a selectable column. You can use rowSelection.type to set selection type. Default is checkbox. > selection happens when clicking checkbox by default. You can see <https://codesandbox.io/s/000vqw38rl> if you need row-click selection behavior.

Selection and operation

To perform operations and clear selections after selecting some rows, use rowSelection.selectedRowKeys to control selected rows.

Custom selection

Use rowSelection.selections custom selections, default no select dropdown, show default selections via setting to true.

Filter and sorter

Use filters to generate filter menu in columns, onFilter to determine filtered result, and filterMultiple to indicate whether it's multiple or single selection, filterOnClose to specify whether to trigger filter when the filter menu closes. Use defaultFilteredValue to make a column filtered by default. Use sorter to make a column sortable. sorter can be a function of the type sorter: function(rowA, rowB) { ... } for sorting data locally. sortDirections: ['ascend', 'descend'] defines available sort methods for each columns, effective for all columns when set on table props. You can set as ['ascend', 'descend', 'ascend'] to prevent sorter back to default status. Use defaultSortOrder to make a column sorted by default. If a sortOrder or defaultSortOrder is specified with the value ascend or descend, you can access this value from within the function passed to the sorter as explained above. Such a function can take the form: function(a, b, sortOrder) { ... }.

Filter in Tree

You can use filterMode to change default filter interface, options: menu(default) and tree. > filterSearch is used for making filter dropdown items searchable.

Filter search

filterSearch is used to enable search of filter items, and you can set a custom filter method through filterSearch:(input, record) => boolean.

Multiple sorter

column.sorter support multiple to config the priority of sort columns. Though sorter.compare to customize compare function. You can also leave it empty to use the interactive only.

Reset filters and sorters

Control filters and sorters by filteredValue and sortOrder. > 1. Defining filteredValue or sortOrder means that it is in the controlled mode. > 2. Make sure sortOrder is assigned for only one column. > 3. column.key is required.

Customized filter panel

Implement a customized column search example via filterDropdown. Add the boolean type parameter closeDropdown to the function clearFilters. Whether to close the filter menu is true by default. Add the boolean type parameter confirm to clear whether to submit the option during filtering. The default is true.

Ajax

This example shows how to fetch and present data from a remote server, and how to implement filtering and sorting in server side by sending related parameters to server. Setting rowSelection.preserveSelectedRowKeys to keep the key when enable selection. **Note, this example use Mock API that you can look up in Network Console.**

size

There are two compacted table sizes: medium and small. The small size is used in Modals only.

border, title and footer

Add border, title and footer for table.

Expandable Row

When there's too much information to show and the table can't display all at once.

Order Specific Column

You can control the order of the expand and select columns by using Table.EXPAND_COLUMN and Table.SELECTION_COLUMN.

colSpan and rowSpan

Table column title supports colSpan that set in column. Table cell supports colSpan and rowSpan that set in onCell return object. When each of them is set to 0, the cell will not be rendered.

Tree data

Display tree structure data in Table when there is field key children in dataSource, try to customize childrenColumnName property to avoid tree table structure. You can control the indent width by setting indentSize.

Fixed Header

Display large amounts of data in scrollable view. > Specify width of columns if header and cell do not align properly. If specified width is not working or have gutter between columns, please try to leave one column at least without width to fit fluid layout, or make sure no long word to break table layout.

Auto height

Wrap Table to make it always fill the container height automatically.

Fixed Columns

To fix some columns and scroll inside other columns, and you must set scroll.x meanwhile. > Specify the width of columns if header and cell do not align properly. If specified width is not working or have gutter between columns, please try to leave one column at least without width to fit fluid layout, or make sure no long word to break table layout. > > A fixed value which is greater than table width for scroll.x is recommended. The sum of unfixed columns should not greater than scroll.x. **Note: v4 using sticky to implement fixed effect. IE 11 will downgrade to horizontal scroll.**

Stack Fixed Columns

Fixed column only when scroll some distance, and scroll to stack other columns. Recommend use with bordered.

Fixed Columns and Header

A Solution for displaying large amounts of data with long columns. > Specify the width of columns if header and cell do not align properly. If specified width is not working or have gutter between columns, please try to leave one column at least without width to fit fluid layout, or make sure no long word to break table layout. > > A fixed value which is greater than table width for scroll.x is recommended. The sum of unfixed columns should not greater than scroll.x.

Hidden Columns

Hide columns with hidden.

Grouping table head

Group table head with columns[n].children.

Editable Cells

Table with editable cells. When work with shouldCellUpdate, please take care of closure.

Editable Rows

Table with editable rows.

Nested tables

Showing more detailed info of every row.

Drag sorting

By using components, we can integrate table with dnd-kit to implement drag sorting function.

Drag Column sorting

By using components, we can integrate table with dnd-kit to implement column drag sorting function.

Drag sorting with handler

Alternatively you can implement drag sorting with handler using dnd-kit.

ellipsis column

Ellipsis cell content via setting column.ellipsis. > Cannot ellipsis table header with sorters and filters for now.

Shared column props

Use column to set shared column props on the table and override them per column when needed.

ellipsis column custom tooltip

Ellipsis cell content via setting column.ellipsis.showTitle, use Tooltip instead of the html title attribute.

Custom empty

Custom empty status.

Summary

Set summary content by summary prop. Sync column fixed status with Table.Summary.Cell. You can fixed it by set Table.Summary fixed prop(since 4.16.0).

Virtual list

Set virtual to enable virtual scroll, and scroll.x and scroll.y must be set at the same time with number type.

Responsive

Responsive columns.

Pagination Settings

Table pagination settings.

Fixed header and scroll bar with the page

For long table，need to scroll to view the header and scroll bar，then you can now set the fixed header and scroll bar to follow the page.

Dynamic Settings

Select different settings to see the result.

Custom semantic dom styling

You can customize the semantic dom style of Table by passing objects/functions through classNames and styles.

API

Table, Table.Column, Table.ColumnGroup, and Table.Summary are exported from @ceebee/ui/client.

Table

Property	Description	Type	Default	Version
`bordered`	Whether to show all table borders	`boolean`	`false`	—
`classNames`	Customize class for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>`	`-`	—
`column`	Shared props applied to columns when the same property is not defined on the column itself	`Partial<ColumnType>`	`-`	6.4.0
`columns`	Columns of table	`ColumnsType\[]`	`-`	—
`components`	Override default table elements	`TableComponents`	`-`	—
`dataSource`	Data record array to be displayed	`object\[]`	`-`	—
`expandable`	Config expandable content	`expandable`	`-`	—
`footer`	Table footer renderer	`function(currentPageData)`	`-`	—
`getPopupContainer`	The render container of dropdowns in table	`(triggerNode) => HTMLElement`	`() => TableHtmlElement`	—
`loading`	Loading status of table	`boolean \| Spin Props`	`false`	—
`locale`	The i18n text including filter, sort, empty text, etc	`object`	`Default Value`	—
`pagination`	Config of pagination. You can ref table pagination config or full pagination document, hide it by setting it to false	`object \| false`	`-`	—
`rowClassName`	Row's className	`function(record, index): string`	`-`	—
`rowKey`	Row's unique key, could be a string or function that returns a string	`string \| function(record): string`	`key`	—
`rowSelection`	Row selection config	`object`	`-`	—
`rowHoverable`	Row hover	`boolean`	`true`	5.16.0
`scroll`	Whether the table can be scrollable, config	`object`	`-`	—
`showHeader`	Whether to show table header	`boolean`	`true`	—
`showSorterTooltip`	The header show next sorter direction tooltip. It will be set as the property of Tooltip if its type is object	`boolean \| Tooltip props & {target?: 'full-header' \| 'sorter-icon' }`	`{ target: 'full-header' }`	5.16.0
`size`	Size of table	`large \| medium \| small`	`large`	—
`sortDirections`	Supported sort way, could be ascend, descend	`Array`	`\[ascend, descend]`	—
`sticky`	Set sticky header and scroll bar	`boolean \| {offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}`	`-`	4.6.0 (getContainer: 4.7.0)
`styles`	Customize inline style for each semantic structure inside the component. Supports object or function.	`Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>`	`-`	—
`summary`	Summary content	`(currentData) => ReactNode`	`-`	—
`tableLayout`	The table-layout attribute of table element	`- \| auto \| fixed`	`-<hr />fixed when header/columns are fixed, or using column.ellipsis`	—
`title`	Table title renderer	`function(currentPageData)`	`-`	—
`virtual`	Support virtual list	`boolean`	`-`	5.9.0
`onChange`	Callback executed when pagination, filters or sorter is changed	`function(pagination, filters, sorter, extra: { currentDataSource: \[], action: paginate \| sort \| filter })`	`-`	—
`onHeaderRow`	Set props on per header row	`function(columns, index)`	`-`	—
`onRow`	Set props on per row	`function(record, index)`	`-`	—
`onScroll`	Triggered when the table body is scrolled. Note that only vertical scrolling will trigger the event when virtual	`function(event)`	`-`	5.16.0

Table ref

Property	Description	Type	Default	Version
`nativeElement`	The wrap element	`HTMLDivElement`	`5.11.0`	—
`scrollTo`	Trigger to scroll to target position. key match with record rowKey. When offset is specified, the table will scroll to align the target row to the top with the given offset and not working with top. Optional align param to control alignment: start align to top, center align to center, end align to bottom, nearest smart align (default). center align is not supported in virtual scrolling mode	`(config: { index?: number, key?: React.Key, top?: number, offset?: number, align?: 'start' \| 'center' \| 'end' \| 'nearest' }) => void`	`5.11.0`	—

Column

Property	Description	Type	Default	Version
`align`	The specify which way that column is aligned	`left \| right \| center`	`left`	—
`className`	The className of this column	`string`	`-`	—
`colSpan`	Span of this column's title	`number`	`-`	—
`dataIndex`	Display field of the data record, support nest path by string array	`string \| string\[]`	`-`	—
`defaultFilteredValue`	Default filtered values	`string\[]`	`-`	—
`filterResetToDefaultFilteredValue`	click the reset button, whether to restore the default filter	`boolean`	`false`	—
`defaultSortOrder`	Default order of sorted values	`ascend \| descend`	`-`	—
`ellipsis`	The ellipsis cell content, not working with sorter and filters for now.<br />tableLayout would be fixed when ellipsis is true or { showTitle?: boolean }	`boolean \| {showTitle?: boolean }`	`false`	showTitle: 4.3.0
`filterDropdown`	Customized filter overlay	`ReactNode \| (props: FilterDropdownProps) => ReactNode`	`-`	—
`filtered`	Whether the dataSource is filtered	`boolean`	`false`	—
`filteredValue`	Controlled filtered value, filter icon will highlight	`string\[]`	`-`	—
`filterIcon`	Customized filter icon	`ReactNode \| (filtered: boolean) => ReactNode`	`-`	—
`filterOnClose`	Whether to trigger filter when the filter menu closes	`boolean`	`true`	5.15.0
`filterMultiple`	Whether multiple filters can be selected	`boolean`	`true`	—
`filterMode`	To specify the filter interface	`'menu' \| 'tree'`	`'menu'`	4.17.0
`filterSearch`	Whether to be searchable for filter menu	`boolean \| function(input, record):boolean`	`false`	boolean:4.17.0 function:4.19.0
`filters`	Filter menu config	`object\[]`	`-`	—
`filterDropdownProps`	Customized dropdown props, filterDropdownOpen and onFilterDropdownOpenChange were available before <5.22.0	`DropdownProps`	`-`	5.22.0
`fixed`	(IE not support) Set column to be fixed: true(same as 'start') 'start' 'end'	`boolean \| string`	`false`	—
`key`	Unique key of this column, you can ignore this prop if you've set a unique dataIndex	`string`	`-`	—
`render`	Renderer of the table cell. value is the value of current cell; record is the value object of current row; index is the row number. The return value should be a ReactNode	`(value: V, record: T, index: number): ReactNode`	`-`	—
`responsive`	The list of breakpoints at which to display this column. Always visible if not set	`Breakpoint\[]`	`-`	4.2.0
`rowScope`	Set scope attribute for all cells in this column	`row \| rowgroup`	`-`	5.1.0
`shouldCellUpdate`	Control cell render logic	`(record, prevRecord) => boolean`	`-`	4.3.0
`showSorterTooltip`	If header show next sorter direction tooltip, override showSorterTooltip in table	`boolean \| Tooltip props & {target?: 'full-header' \| 'sorter-icon' }`	`{ target: 'full-header' }`	5.16.0
`sortDirections`	Supported sort way, override sortDirections in Table, could be ascend, descend	`Array`	`\[ascend, descend]`	—
`sorter`	Sort function for local sort, see Array.sort's compareFunction. If it is server-side sorting, set to true, but if you want to support multi-column sorting, you can set it to { multiple: number }	`function \| boolean \| { compare: function, multiple: number }`	`-`	—
`sortOrder`	Order of sorted values: ascend descend null	`ascend \| descend \| null`	`-`	—
`sortIcon`	Customized sort icon	`(props: { sortOrder }) => ReactNode`	`-`	5.6.0
`title`	Title of this column	`ReactNode \| ({ sortColumns, filters }) => ReactNode`	`-`	—
`width`	Width of this column (width not working?)	`string \| number`	`-`	—
`minWidth`	Min width of this column, only works when tableLayout="auto"	`number`	`-`	5.21.0
`hidden`	Hidden this column	`boolean`	`false`	5.13.0
`onCell`	Set props on per cell	`function(record, rowIndex)`	`-`	—
`onFilter`	Function that determines if the row is displayed when filtered	`function(value, record) => boolean`	`-`	—
`onHeaderCell`	Set props on per header cell	`function(column)`	`-`	—

ColumnGroup

Property	Description	Type	Default	Version
`title`	Title of the column group	`ReactNode`	`-`	—

pagination

Property	Description	Type	Default	Version
`placement`	Specify the placement of Pagination, could betopStart \| topCenter \| topEnd \|bottomStart \| bottomCenter \| bottomEnd \| none	`Array`	`\[bottomEnd]`	—
`position`	Specify the position of Pagination, could betopLeft \| topCenter \| topRight \|bottomLeft \| bottomCenter \| bottomRight \| none, please use placement instead	`Array`	`\[bottomRight]`	—

expandable

Property	Description	Type	Default	Version
`childrenColumnName`	The column contains children to display	`string`	`children`	—
`columnTitle`	Set the title of the expand column	`ReactNode`	`-`	4.23.0
`columnWidth`	Set the width of the expand column	`string \| number`	`-`	—
`defaultExpandAllRows`	Expand all rows initially	`boolean`	`false`	—
`defaultExpandedRowKeys`	Initial expanded row keys	`string\[]`	`-`	—
`expandedRowClassName`	Expanded row's className	`string \| (record, index, indent) => string`	`-`	string: 5.22.0
`expandedRowKeys`	Current expanded row keys	`string\[]`	`-`	—
`expandedRowRender`	Expanded container render for each row	`function(record, index, indent, expanded): ReactNode`	`-`	—
`expandIcon`	Customize row expand Icon. Ref example	`function(props): ReactNode`	`-`	—
`expandRowByClick`	Whether to expand row by clicking anywhere in the whole row	`boolean`	`false`	—
`fixed`	Whether the expansion icon is fixed. Optional true left right	`boolean \| string`	`false`	4.16.0
`forceRender`	Force render expanded row content before expansion. In virtual mode, only rows currently mounted by the virtual list are force-rendered; off-screen rows may still be unmounted	`boolean`	`false`	6.6.0
`indentSize`	Indent size in pixels of tree data	`number`	`15`	—
`rowExpandable`	Enable row can be expandable	`(record) => boolean`	`-`	—
`showExpandColumn`	Show expand column	`boolean`	`true`	4.18.0
`onExpand`	Callback executed when the row expand icon is clicked	`function(expanded, record)`	`-`	—
`onExpandedRowsChange`	Callback executed when the expanded rows change	`function(expandedRows)`	`-`	—
`expandedRowOffset`	Deprecated: Expand the number of offset columns of the row. After setting, it will force the columns in front of it to be fixed columns. Please use'Table. EXPAND_COLUMN 'instead and control the position through column order	`number`	`-`	5.26.0

rowSelection

Property	Description	Type	Default	Version
`align`	Set the alignment of selection column	`left \| right \| center`	`left`	5.25.0
`checkStrictly`	Check table row precisely; parent row and children rows are not associated	`boolean`	`true`	4.4.0
`columnTitle`	Set the title of the selection column	`ReactNode \| (originalNode: ReactNode) => ReactNode`	`-`	—
`columnWidth`	Set the width of the selection column	`string \| number`	`32px`	—
`fixed`	Fixed selection column on the left	`boolean`	`-`	—
`getCheckboxProps`	Get Checkbox or Radio props	`function(record)`	`-`	—
`getTitleCheckboxProps`	Get title Checkbox props	`function()`	`-`	—
`hideSelectAll`	Hide the selectAll checkbox and custom selection	`boolean`	`false`	4.3.0
`preserveSelectedRowKeys`	Keep selection key even when it removed from dataSource	`boolean`	`-`	4.4.0
`renderCell`	Renderer of the table cell. Same as render in column	`(checked: boolean, record: T, index: number, originNode: ReactNode): ReactNode`	`-`	4.1.0
`selectedRowKeys`	Controlled selected row keys	`string\[] \| number\[]`	`\[]`	—
`defaultSelectedRowKeys`	Default selected row keys	`string\[] \| number\[]`	`\[]`	—
`selections`	Custom selection config, only displays default selections when set to true	`object\[] \| boolean`	`-`	—
`type`	checkbox or radio	`checkbox \| radio`	`checkbox`	—
`onCell`	Set props on per cell. Same as onCell in column	`function(record, rowIndex)`	`-`	5.5.0
`onChange`	Callback executed when selected rows change	`function(selectedRowKeys, selectedRows, info: { type })`	`-`	info.type: 4.21.0
`onSelect`	Callback executed when select/deselect one row	`function(record, selected, selectedRows, nativeEvent)`	`-`	—

scroll

Property	Description	Type	Default	Version
`scrollToFirstRowOnChange`	Whether to scroll to the top of the table when paging, sorting, filtering changes	`boolean`	`-`	—
`x`	Set horizontal scrolling, can also be used to specify the width of the scroll area, could be number, percent value, true and 'max-content'	`string \| number \| true`	`-`	—
`y`	Set vertical scrolling, can also be used to specify the height of the scroll area, could be string or number	`string \| number`	`-`	—

selection

Property	Description	Type	Default	Version
`key`	Unique key of this selection	`string`	`-`	—
`text`	Display text of this selection	`ReactNode`	`-`	—
`onSelect`	Callback executed when this selection is clicked	`function(changeableRowKeys)`	`-`	—