rsuite/rsuite-tablePublic

NotificationsYou must be signed in to change notification settings
Fork137
Star734

A React table component.

License

MIT license

734 stars 137 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 690 Commits
.codesandbox		.codesandbox
.github		.github
docs		docs
examples/with-gatsby		examples/with-gatsby
src		src
test		test
.coveralls.yml		.coveralls.yml
.gitignore		.gitignore
.npmignore		.npmignore
.npmrc		.npmrc
.prettierrc.js		.prettierrc.js
CHANGELOG.md		CHANGELOG.md
CODE_OF_CONDUCT.md		CODE_OF_CONDUCT.md
LICENSE		LICENSE
README.md		README.md
babel.config.js		babel.config.js
commitlint.config.js		commitlint.config.js
eslint.config.mjs		eslint.config.mjs
gulpfile.js		gulpfile.js
karma.conf.js		karma.conf.js
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.js		postcss.config.js
tsconfig.json		tsconfig.json
tsconfig.test.json		tsconfig.test.json
webpack.build.config.js		webpack.build.config.js
webpack.config.js		webpack.config.js
webpack.karma.js		webpack.karma.js

Repository files navigation

rsuite-table

A React table component.

Features

Support virtualized.
Support fixed header, fixed column.
Support custom adjustment column width.
Support for custom cell content.
Support for displaying a tree form.
Support for sorting.
Support for expandable child nodes
Support for RTL

Preview

Fixed Column

Custom Cell

Tree Table

Expandable

More Examples

Install

# use npmnpm i rsuite-table# or use yarnyarn add rsuite-table# or use pnpmpnpm add rsuite-table

Usage

import{Table,Column,HeaderCell,Cell}from'rsuite-table';import'rsuite-table/lib/less/index.less';// or 'rsuite-table/dist/css/rsuite-table.css'constdataList=[{id:1,name:'a',email:'a@email.com',avartar:'...'},{id:2,name:'b',email:'b@email.com',avartar:'...'},{id:3,name:'c',email:'c@email.com',avartar:'...'}];constImageCell=({ rowData, dataKey, ...rest})=>(<Cell{...rest}><imgsrc={rowData[dataKey]}width="50"/></Cell>);constApp=()=>(<Tabledata={dataList}><Columnwidth={100}sortablefixedresizable><HeaderCell>ID</HeaderCell><CelldataKey="id"/></Column><Columnwidth={100}sortableresizable><HeaderCell>Name</HeaderCell><CelldataKey="name"/></Column><Columnwidth={100}sortableresizable><HeaderCell>Email</HeaderCell><Cell>{(rowData,rowIndex)=>{return<ahref={`mailto:${rowData.email}`}>{rowData.email}</a>;}}</Cell></Column><Columnwidth={100}resizable><HeaderCell>Avartar</HeaderCell><ImageCelldataKey="avartar"/></Column></Table>);

API

`<Table>`

Property	Type (Default)	Description
affixHeader	boolean, number	Affix the table header to a specified position on the page.
affixHorizontalScrollbar	boolean, number	Affix the table's horizontal scrollbar to a specified position on the page.
autoHeight	boolean	Automatically expand the table's height based on the number of data rows, without displaying a vertical scrollbar.
bordered	boolean	Display table borders.
cellBordered	boolean	Display cell borders.
children	(components: { Cell, HeaderCell, Column, ColumnGroup }) => ReactNode \| ReactNode	Render props that receive parameterized Cell, HeaderCell, Column, and ColumnGroup components, making TypeScript usage more convenient.
data *	RowData[]	Table data.
defaultExpandAllRows	boolean	Expand all rows by default.
defaultExpandedRowKeys	string[]	Specify the initially expanded rows by their keys.
defaultSortType	'desc' \| 'asc'	Default sort type.
expandedRowKeys	string[]	Specify the expanded rows by their keys (Controlled).
fillHeight	boolean	Force the table's height to match its parent container's height. Cannot be used with`autoHeight`.
headerHeight	number (40)	Table header height.
height	number (200)	Table height.
hover	boolean (true)	Enable row hover effects.
isTree	boolean	Display the table as a tree structure.
loading	boolean	Show a loading state.
locale	{emptyMessage: string, loading: string}	Messages for empty data and loading states.
maxHeight	number	Maximum table height.
minHeight	number (0)	Minimum table height.
onExpandChange	(expanded: boolean, rowData: RowData) => void	Callback function triggered when a tree table node is expanded or collapsed.
onRowClick	(rowData: RowData, event: SyntheticEvent) => void	Callback function triggered when a row is clicked, returning the row data.
onRowContextMenu	(rowData: RowData, event: SyntheticEvent) => void	Callback function triggered by a context menu event, returning the row data.
onScroll	(scrollX: object, scrollY: object) => void	Callback function for scrollbar scroll events.
onSortColumn	(dataKey: string, sortType: string) => void	Callback function triggered when the sort order changes, returning the column key and sort type.
renderEmpty	(info: ReactNode) => ReactNode	Custom content to display when there is no data.
renderLoading	(loading: ReactNode) => ReactNode	Custom content to display during data loading.
renderRow	(children?: ReactNode, rowData?: RowData) => ReactNode	Custom row element renderer.
renderRowExpanded	(rowData?: RowData) => ReactNode	Custom content to display in an expanded row.
renderTreeToggle	(icon: ReactNode, rowData: RowData, expanded: boolean) => ReactNode	Custom toggle icon for expanding/collapsing tree nodes.
rowClassName	string, (rowData: RowData, rowIndex: number) => string	Add an optional custom class name to rows.
rowExpandedHeight	number (100), (rowData?: RowData) => number	Set the height of expanded rows.
rowHeight	number (46), (rowData: RowData) => number	Row height.
rowKey	string ('key')	Unique key for each row, derived from data.
rtl	boolean	Enable right-to-left layout.
shouldUpdateScroll	boolean, (event) => ({ x, y }) (true)	Determine whether to update the scroll position after the table size changes.
showHeader	boolean (true)	Display the table header.
sortColumn	string	Name of the column to sort by.
sortType	'desc' \| 'asc'	Sort type (Controlled).
virtualized	boolean	Efficiently render large datasets.
width	number	Table width.
wordWrap	boolean \| 'break-all' \| 'break-word' \| 'keep-all'	Control text wrapping behavior within cells.

`<Column>`

Property	Type`(Default)`	Description
align	'left' \| 'center' \| 'right'	Sets the text alignment within the column.
colSpan	number	Merges cells within the column when the`dataKey` value for the merged cells is`null` or`undefined`.
fixed	boolean \| 'left' \| 'right'	Fixes the column to the left or right side of the table.
flexGrow	number	Automatically adjusts the column width based on the value of`flexGrow`. Cannot be used with`resizable` and`width` properties.
fullText	boolean	Displays the full text of the cell content when the mouse hovers over it.
minWidth	number`(200)`	Sets the minimum width of the column when using`flexGrow`.
onResize	(columnWidth?: number, dataKey?: string) => void	Callback function triggered after the column width changes.
resizable	boolean	Allows the column width to be resized.
rowSpan	(rowData: RowData) => number	Merges rows in the specified column.
sortable	boolean	Enables sorting on the column.
treeCol	boolean	Indicates that the column is part of a tree structure.
verticalAlign	'top' \| 'middle' \| 'bottom'	Sets the vertical alignment of content within the column.
width	number	Specifies the column width.

sortable is used to define whether the column is sortable, but depending on whatkey sort needs to set adataKey inCell.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 returnssortColumn,sortType values.

`<ColumnGroup>`

Property	Type`(Default)`	Description
align	'left' \| 'center' \| 'right'	Sets the text alignment within the column group.
fixed	boolean \| 'left' \| 'right'	Fixes the column group to the left or right side of the table.
groupHeaderHeight	number	Sets the height of the group header. The default value is 50% of the table's`headerHeight`.
header	ReactNode	Specifies the content to be displayed as the group header.
verticalAlign	'top' \| 'middle' \| 'bottom'	Sets the vertical alignment of content within the column group.

`<HeaderCell>`

Property	Type`(Default)`	Description
children	ReactNode	Specifies the content to be displayed in the column header.
renderSortIcon	(sortType) => ReactNode	Customizes the rendering of sort icons on column headers.

`<Cell>`

Property	Type`(Default)`	Description
children	ReactNode \| ((rowData: RowData, rowIndex?: number) => ReactNode)	The content to be displayed in the cell.
dataKey	string	The key used for data binding and sorting.
rowData	RowData	The data associated with the current row.
rowIndex	number	The index of the current row.

There are three ways to use`<Cell>`, as follows:

1.Associate the fields in the data withdataKey.

<Columnwidth="{100}"align="center"><HeaderCell>Name</HeaderCell><CelldataKey="name"/></Column>

2.Customize a<Cell>.

constNameCell=({ rowData, ...props})=>(<Cell{...props}><ahref={`mailto:${rowData.email}`}>{rowData.name}<a></Cell>);<Columnwidth={100}align="center"><HeaderCell>Name</HeaderCell><NameCell/></Column>

3.Customize functions directly within the<Cell>.

<Columnwidth={100}align="center"><HeaderCell>Name</HeaderCell><Cell>{(rowData,rowIndex)=>{return<ahref={`mailto:${rowData.email}`}>{rowData.name}</a>;}}</Cell></Column>

(For nested data read this:#158)

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

Type safety

We can pass generic type parameters to Table, Cell etc. for better type-safety when using typescript.

Passing a render prop to Table is recommended when using TS, as this will ensure thatthe right generic type parameter is automatically propagated to the Cell component.

constproducts:Product[]=[{name:'Pineapple'}];<Table<Product,string>ref={table}data={products}>{({ Column, HeaderCell, Cell})=>(<><Column><HeaderCell>Name</HeaderCell>{/* No need for passing explicit type parameter to Cell */}<Cell>{row=>row.name}</Cell></Column></>)}</Table>;

In fact, the type parameter from table can be inferred from the data passed to it, so the type parameter to Table can also be skipped.

constproducts:Product[]=[{name:'Pineapple'}];<Tabledata={products}>{({ Column, HeaderCell, Cell})=>(<><Column><HeaderCell>Name</HeaderCell><Cell>{row=>row.name}</Cell></Column></>)}</Table>;

When writing reusable components, it is recommended to make your components generic as well. For example:

interfaceImageCellProps<TKeyextendsstring,TRowextendsRecord<TKey,string>>{rowData:TRow;dataKey:TKey;// ... any other props}constImageCell=<TKeyextendsstring,TRowextendsRecord<TKey,string>>({  rowData,  dataKey,  ...rest}:ImageCellProps<TKey,TRow>)=>(<Cell<TRow,TKey>{...rest}><imgsrc={rowData[dataKey]}width="50"/></Cell>);