Table - React SuiteReact Suite ComponentsOverview # GeneralButton Drawer Icons Loader Message Modal Notification Tooltip Popover Progress Placeholder # NavigationAffix Breadcrumb Dropdown Nav Navbar Sidenav Steps Pagination # LayoutContainer Divider FlexboxGrid Grid Stack # Data EntryAutoComplete Cascader CheckPicker CheckTreePicker Checkbox DatePicker DateRangePicker Form Form Validation Input InputNumber InputPicker MultiCascader Radio RadioTile newRate SelectPicker Slider TagPicker TagInput Toggle TreePicker Uploader # Data DisplayAvatar Badge Calendar Carousel CheckTree List Table Tag Tree Timeline Panel # UtilsAnimation CustomProvider DOMHelper Whisper Schema # CSS PacksCSS Reset
Table
A table displays rows of data.
<Table> Table component
<Table.Column> Table definition column component
<Table.ColumnGroup> Used for column header grouping
<Table.HeaderCell> Column Header cell component
<Table.Cell> Cell component
Import
import { Table } from 'rsuite';
// or
import Table from 'rsuite/Table';
Examples
Basic
Appearance
autoHeight: The height of the table will be automatically expanded according to the number of data rows, and no vertical scroll bar will appear.
fillHeight: Force the height of the table to be equal to the height of its parent container. Cannot be used together with autoHeight.
Virtualized
Support virtualized, effectively render large tabular data.
Custom Cell
Depending on your business scenario, you can define what you want to display in a cell, such as displaying a picture, like adding a few buttons, or displaying a text box that you can customize, and simply redefining the Cell component.
For example, display a picture, define a Imagecell component:
const ImageCell = ({ rowData, dataKey, ...props }) => (
<Cell {...props}>
<img src={rowData[dataKey]} width="50" />
</Cell>
);Use:
<Column width="{200}">
<HeaderCell>Avartar</HeaderCell>
<ImageCell dataKey="avartar" />
</Column>The children property support function on <Cell> can get rowData to return a new children.
Use:
<Column width="{200}">
<HeaderCell>Date</HeaderCell>
<Cell>{rowData => rowData.date.toLocaleString()}</Cell>
</Column>
Custom row height
If you need to define row heights based on the content of your data in practical applications, you can use the following methods:
return (
<Table
rowHeight={rowData => {
if (rowData?.tags.length > 4) {
return 80;
return 40;
}}
...
</Table>
);
Resizable
Move the mouse to the column split line, will display a blue move handle, click Not to loosen and drag left and right to adjust the width of the column.
To support this feature, you need to set a resizable attribute in Column.
Fluid
If you need to set a column to automatic width, you need to configure the flexGrow property. flexGrow is a number type. Will fill the Table remaining width according to the sum of all flexGrow.
Note: After setting flexGrow, you cannot set the width and resizable properties. You can set a minimum width by minwidth.
<Column flexGrow="{1}">
<HeaderCell>City <code>flexGrow={1}</code></HeaderCell>
<Cell dataKey="city" />
</Column>
<Column flexGrow="{2}">
<HeaderCell>Company Name <code>flexGrow={2}</code></HeaderCell>
<Cell dataKey="companyName" />
</Column>
...
Sort
Set a sortable attribute in the column <Column> that you want to sort.
While the <Table> defines a onSortColumn callback function, clicking the column header to sort the icon triggers the method and returns sortColumn and sortType.
<Table onSortColumn={(sortColumn, sortType) => { console.log(sortColumn, sortType); }} >
<Column width="{50}" sortable>
<HeaderCell>Id</HeaderCell>
<Cell dataKey="id" />
</Column>
<Column width="{130}" sortable>
<HeaderCell>First Name</HeaderCell>
<Cell dataKey="firstName" />
</Column>
...
Pagination
If you need table data paging, you must first filter the data paging (usually supported by the server data api), and then combine with the Pagination component to achieve table paging.
Tree
A tree table, primarily to show structured data, requires a isTree attribute to be set on the Table component, while the data is used to define the relational structure through children.
const data = [
id: '1',
labelName: 'Car',
status: 'ENABLED',
children: [
id: '1-1',
labelName: 'Mercedes Benz',
status: 'ENABLED',
count: 460
];
<Table data={data} isTree rowKey="id" />;Dealing with related properties for a tree table
defaultExpandAllRows:boolean :Expand all nodes By default
expandedRowKeys (controlled) and defaultExpandedRowKeys are used to configure the rows that need to be expanded. Note that the parameters that these two properties receive are an array of Rowkey in the array.。
rowKey: Give each row of data to a unique key, corresponding to a unique value in the key. (You can set the rowKey in <Table>, the default value is key)
renderTreeToggle:() => ReactNode : Custom Toggle
onExpandChange:(expanded:boolean,rowData:object) => void: To open/close a node's callback function.
treeCol is an attribute on <Table.Column>, you can specify that the column is displayed as a tree.
When customizing the cell, it should be noted that if it is a tree table, then rowData needs to be passed to the Cell of the rendering tree, because it will be used inside the Cell to record the state of the node. #issue/2666
const CustomCell = ({ rowData, ...rest }) => {
return (
<Cell rowData={rowData} {...rest}>
{rowData.name}
</Cell>
);
};
Expandable
To implement a Table that can be expanded, a combination of the following attributes is required.
Step 1: Set properties for Table
renderRowExpanded(rowData) => ReactNode: Used to return content that needs to be rendered in the expansion panel
rowExpandedHeight: Sets the height of the expandable area. The default is 100
expandedRowKeys (controlled) and defaultExpandedRowKeys are used to configure the rows that need to be expanded. Note that the parameters that these two properties receive are an array of Rowkey in the array.。
rowKey: Give each row of data to a unique key, corresponding to a unique value in the key.
Step 2：Custom Cell
Customize a Cell and put a button inside to manipulate the value in expandedRowKeys.
Editable
Editable tables, just customize a Cell on the line
export const EditCell = ({ rowData, dataKey, onChange, ...props }) => {
return (
<Cell {...props}>
{rowData.status === 'EDIT' ? (
<input
className="input"
defaultValue={rowData[dataKey]}
onChange={event => {
onChange && onChange(rowData.id, dataKey, event.target.value);
}}
/>
) : (
rowData[dataKey]
)}
</Cell>
);
};
Colspan
In some cases, you need to merge the relationships between columns to organize your data, and you can set a ColSpan attribute on the <Column> component，and set the header grouping through<ColumnGroup>. for example:
<ColumnGroup header="Name">
<Column width={130} colSpan={2}>
<HeaderCell>First Name</HeaderCell>
<Cell dataKey="firstName" />
</Column>
<Column width={130}>
<HeaderCell>Last Name</HeaderCell>
<Cell dataKey="lastName" />
</Column>
</ColumnGroup>
When lastName corresponds to a column value of null or undefined, it is merged by the firstName column.
Rowspan
Summary
Show full text of cells
Display the hidden text in its entirety when hovering over the cell.
Word Wrap
⚠️ We do not recommend using wordWrap with virtualized, because virtualized only achieves the best performance with a fixed line height. You can use the fullText property to solve the problem of not displaying the full text.
Affix header & scrollbar
autoHeight: Table will expand the height according to the content.
affixHeader: Affix the table header to the specified location on the page.
affixHorizontalScrollbar: Affix the table horizontal scrollbar to the specified position on the page.
Infinite Loader
Draggable(with react-dnd)
Use with react-dnd v10
Use with react-dnd v15
Accessibility
<Table> has role grid.
<Table> has role treegrid, when <Table> is set with isTree.
<HeanderCell> has role columnheader.
<Cell> has role gridcell.
Rows dynamically generated from data in the <Table> has role row.
Use the aria-rowcount prop to identify the total number of rows available, and the aria-rowindex prop to identify the index of the row.
Use the aria-colcount prop to identify the total number of available columns, and the aria-colindex prop to identify the index of the column.
When sorting a column, you can apply the aria-sort prop to the column header to indicate the sorting method.
aria-sort
Description
ascending
Data are sorted in ascending order.
descending
Data are sorted in descending order.
none
Default (no sort applied).
other
Data are sorted by an algorithm other than ascending or descending.
Props
<Table>
Property
Type (Default)
Description
affixHeader
boolean | number
Affix the table header to the specified location on the page
affixHorizontalScrollbar
boolean | number
Affix the table horizontal scrollbar to the specified position on the page
autoHeight
boolean
The height of the table will be automatically expanded according to the number of data rows, and no vertical scroll bar will appear
bordered
boolean
Show border
cellBordered
boolean
Show cell border
children
(components: { Cell, HeaderCell, Column, ColumnGroup }) => React.ReactNode | React.ReactNode
Render props that receives parameterized Cell, HeaderCell, Column, ColumnGroup components - making typescript usage more convenient
data *
object[]
Table data
defaultExpandAllRows
boolean
Expand all nodes By default
defaultExpandedRowKeys
string[]
Specify the default expanded row by rowkey
defaultSortType
'desc' | 'asc'
Sort type
expandedRowKeys
string[]
Specify the default expanded row by rowkey (Controlled)
fillHeight
boolean
Force the height of the table to be equal to the height of its parent container. Cannot be used together with autoHeight.
headerHeight
number(40)
Table Header Height
height
number(200)
Table height
hover
boolean (true)
The row of the table has a mouseover effect
isTree
boolean
Show as Tree table
loading
boolean
Show loading
locale
TableLocaleType
Locale text
minHeight
number (0)
Minimum height
onDataUpdated
(nextData: object[], scrollTo: (coord: { x: number; y: number }) => void) => void
Callback after table data update.
onExpandChange
(expanded:boolean, rowData:object) => void
Tree table, the callback function in the expanded node
onRowClick
(rowData:object) => void
Click the callback function after the row and return to rowDate
onScroll
(scrollX:object, scrollY:object) => void
Callback function for scroll bar scrolling
onSortColumn
(dataKey:string, sortType:string) => void
Click the callback function of the sort sequence to return the value sortColumn, sortType
renderEmpty
(info: ReactNode) => ReactNode
Customized data is empty display content
renderLoading
(loading: ReactNode) => ReactNode
Customize the display content in the data load
renderRow
(children?: ReactNode, rowData?: RowDataType) => ReactNode
Custom row element
renderRowExpanded
(rowDate?: Object) => ReactNode
Customize what you can do to expand a zone
renderTreeToggle
(icon:node, rowData:object, expanded:boolean) => ReactNode
Tree table, the callback function in the expanded node
rowClassName
string | (rowData:object, rowIndex:number) => string
Add an optional extra class name to row
rowExpandedHeight
number (100)
Set the height of an expandable area
rowHeight
(rowData:object) => number, number(46)
Row height
rowKey
string ('key')
Each row corresponds to the unique key in data
shouldUpdateScroll
boolean | (event)=>({x,y}) (true)
Use the return value of shouldUpdateScroll to determine whether to update the scroll after the table size is updated
showHeader
boolean (true)
Display header
sortColumn
string
Sort column name
sortType
'desc' | 'asc'
Sort type (Controlled)
virtualized
boolean
Effectively render large tabular data
width
number
Table width
wordWrap
boolean | 'break-all' | 'break-word' | 'keep-all'
Whether to appear line breaks where text overflows its content box
Table ref
Property
Type
Description
body
HTMLDivElement
The body element of the table
root
HTMLDivElement
The root element of the table
scrollLeft
(left:number)=>void
Set the number of pixels for horizontal scrolling of the table
scrollPosition
{top:number,left:number}
The scroll position of the table
scrollTop
(top:number)=>void
Set the number of pixels for vertical scrolling of the table
<Table.Column>
Property
Type (Default)
Description
align
'left' | 'center' | 'right'
Alignment
colSpan
number
Merges column cells to merge when the dataKey value for the merged column is null or undefined.
fixed
boolean | 'left' | 'right'
Fixed column
flexGrow
number
Set the column width automatically adjusts, when set flexGrow cannot set resizable and width property
fullText
boolean
Whether to display the full text of the cell content when the mouse is hovered
minWidth
number(200)
When you use flexGrow, you can set a minimum width by minwidth
onResize
(columnWidth?: number, dataKey?: string) => void
Callback after column width change
resizable
boolean
Customizable Resize Column width
rowSpan
(rowData: any) => number
Merges rows on the specified column.
sortable
boolean
Sortable
treeCol
boolean
A column of a tree.
verticalAlign
'top' | 'middle' | 'bottom'
Vertical alignment
width
number
Column width
sortable is used to define whether the column is sortable, but depending on what key sort needs to set a dataKey in Cell.
The sort here is the service-side sort, so you need to handle the logic in the ' Onsortcolumn ' callback function of <Table>, and the callback function returns sortColumn, sortType values.
<Table.ColumnGroup>
Property
Type (Default)
Description
align
'left' | 'center' | 'right'
Alignment
fixed
boolean, 'left', 'right'
Fixed column group
groupHeaderHeight
number
The height of the header of the merged cell group. The default value is 50% of the table headerHeight
header
ReactNode
Group header
verticalAlign
'top' | 'middle' | 'bottom'
Vertical alignment
<Table.HeaderCell>
Property
Type (Default)
Description
children
ReactNode
The table column header displays the content
renderSortIcon
(sortType?: 'desc' | 'asc' ) => ReactNode
Custom render sort icons on column headers
<Table.Cell>
Property
Type (Default)
Description
dataKey
string
Data binding key, but also a sort of key
rowData
object
Row data
rowIndex
number
Row number