A React table component.
A React table component.
[![npm][npm-badge]][npm] [![GitHub Actions][actions-svg]][actions-home] [![Coverage Status][coverage-badge]][coverage]
Fixed Column
Custom Cell
Tree Table
Expandable
# use npm
npm i rsuite-table
# or use yarn
yarn add rsuite-table
# or use pnpm
pnpm add rsuite-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. |
| Property | Type (Default) | Description |
| ------------- | ------------------------------------------------ |
No open issues yet, or sync has not completed.