Table
A table displays rows of data.
<Table>Table component<Table.Column>Table definition column component<Table.HeaderCell>Column Header cell component<Table.Cell>Cell component<Table.Pagination>Table paging component
Usage
import { Table } from 'rsuite';
const { Column, HeaderCell, Cell, Pagination } = Table;Examples
Default
Virtualized large table
Support virtualized, effectively render large tabular data.
Advanced
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.
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 | Automatic height |
| bodyRef | React.Ref | A ref attached to the table body element |
| bordered | boolean | Show border |
| cellBordered | boolean | Show cell border |
| data * | Array<Object> | Table data |
| defaultExpandAllRows | boolean | Expand all nodes By default |
| defaultExpandedRowKeys | string[] | Specify the default expanded row by rowkey |
| defaultSortType | enum: 'desc', 'asc' | Sort type |
| expandedRowKeys | string[] | Specify the default expanded row by rowkey (Controlled) |
| 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 |
| 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: React.Node) => React.Node | Customized data is empty display content |
| renderLoading | (loading: React.Node) => React.Node | Customize the display content in the data load |
| renderRowExpanded | (rowDate?: Object) => React.Node | Customize what you can do to expand a zone |
| renderTreeToggle | (icon:node, rowData:object, expanded:boolean) => node | Tree table, the callback function in the expanded node |
| rowClassName | string , (rowData:object) => 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(true) |
Whether to update the scroll bar after data update |
| showHeader | boolean (true) |
Display header |
| sortColumn | string | Sort column name |
| sortType | enum: 'desc', 'asc' | Sort type (Controlled) |
| virtualized | boolean | Effectively render large tabular data |
| width | number | Table width |
| wordWrap | boolean | The cell wraps automatically |
Form methods
- scrollTop
垂直滚动条滚动到指定位置
scrollTop: (top: number) => void;- scrollLeft
横向滚动条滚动到指定位置
scrollLeft: (left: number) => void;<Table.Column>
| Property | Type (Default) |
Description |
|---|---|---|
| align | enum: '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 |
| 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 |
| sortable | boolean | Sortable |
| treeCol | boolean | A column of a tree. |
| verticalAlign | enum: 'top', 'middle', 'bottom' | Vertical alignment |
| width | number | Column width |
sortableis used to define whether the column is sortable, but depending on whatkeysort needs to set adataKeyinCell. 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,sortTypevalues.
<Table.ColumnGroup>
| Property | Type (Default) |
Description |
|---|---|---|
| align | enum: 'left','center','right' | Alignment |
| fixed | boolean, 'left', 'right' | Fixed column group |
| verticalAlign | enum: 'top', 'middle', 'bottom' | Vertical alignment |
| header | React.ReactNode | Group header |
<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 |
<Table.Pagination>
| Property | Type (Default) |
Description |
|---|---|---|
| activePage | number (1) |
Configure the current page number |
| disabled | boolean , (eventKey: any) => boolean | Disabled component |
| displayLength | number (30) |
Configure how many lines of entries per page to display, corresponding to lengthMenu |
| first | boolean (true) |
Show first page button |
| last | boolean (true) |
Show last Page button |
| lengthMenu | Array<number> | Paging display row number configuration, defaults to 30, 50, 100 |
| maxButtons | number (5) |
Configure the maximum number of display buttons |
| next | boolean (true) |
Show Next Page button |
| onChangeLength | (eventKey: number) => void | The callback function that triggers when the lengthmenu value changes |
| onChangePage | (eventKey: number) => void | callback function triggered when page changes |
| prev | boolean (true) |
Show Previous Page button |
| renderLengthMenu | (picker: React.Node) => React.Node | Custom menu |
| renderTotal | (total: number, activePage: number) => React.Node | Custom total |
| reverse | boolean | Reverse start and end position |
| showInfo | boolean (true) |
Show paging information |
| showLengthMenu | boolean (true) |
Display Dropdown menu |
| total | number | Total number of data entries |