Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rsuite/rsuite-table
A React table component.
https://github.com/rsuite/rsuite-table
affix datatables react react-table table treetable virtualization windowing
Last synced: about 1 month ago
JSON representation
A React table component.
- Host: GitHub
- URL: https://github.com/rsuite/rsuite-table
- Owner: rsuite
- License: mit
- Created: 2016-06-10T16:19:14.000Z (about 8 years ago)
- Default Branch: main
- Last Pushed: 2024-05-13T23:03:21.000Z (4 months ago)
- Last Synced: 2024-05-19T14:29:50.164Z (4 months ago)
- Topics: affix, datatables, react, react-table, table, treetable, virtualization, windowing
- Language: TypeScript
- Homepage: https://table.rsuitejs.com/
- Size: 42.2 MB
- Stars: 704
- Watchers: 15
- Forks: 133
- Open Issues: 46
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-react-components - rsuite-table - [demo/docs](http://rsuite.github.io/rsuite-table/) - A table component that supports virtualized. (UI Components / Table)
- awesome-react - rsuite-table - A table component that supports virtualized.  (UI Components / Table)
- awesome-faker - rsuite-table - A React table component. (Projects using `@faker-js/faker`)
- awesome-react-components - rsuite-table - [demo/docs](http://rsuite.github.io/rsuite-table/) - A table component that supports virtualized. (UI Components / Table)
- awesome-react-components - rsuite-table - [demo/docs](http://rsuite.github.io/rsuite-table/) - A table component that supports virtualized. (UI Components / Table)
- best-of-react - GitHub - 22% open · ⏱️ 01.12.2023): (Data Tables & Grids)
- fucking-awesome-react-components - rsuite-table - [demo/docs](http://rsuite.github.io/rsuite-table/) - A table component that supports virtualized. (UI Components / Table)
README
# rsuite-table
A React table component.
[![npm][npm-badge]][npm] [![GitHub Actions][actions-svg]][actions-home] [![Coverage Status][coverage-badge]][coverage]
## 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](https://rsuitejs.com/en/components/table)
## Install
```sh
# use npm
npm i rsuite-table
# or use yarn
yarn add rsuite-table
# or use pnpm
pnpm add rsuite-table
```
## Usage
```tsx
import { Table, Column, HeaderCell, Cell } from 'rsuite-table';
import 'rsuite-table/lib/less/index.less'; // or 'rsuite-table/dist/css/rsuite-table.css'
const dataList = [
{ id: 1, name: 'a', email: '[email protected]', avartar: '...' },
{ id: 2, name: 'b', email: '[email protected]', avartar: '...' },
{ id: 3, name: 'c', email: '[email protected]', avartar: '...' }
];
const ImageCell = ({ rowData, dataKey, ...rest }) => (
);
const App = () => (
ID
Name
Email
{(rowData, rowIndex) => {
return {rowData.email};
}}
Avartar
);
```
## API
### ``
| Property | Type `(Default)` | Description |
| ------------------------ | ------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- |
| affixHeader | boolean,number | Affix the table header to the specified position 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 | enum: '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 | object: { emptyMessage: `('No data')`, loading: `('Loading...')` } | Messages for empty data and loading states |
| minHeight | number `(0)` | Minimum height |
| onExpandChange | (expanded:boolean,rowData:object)=>void | Tree table, the callback function in the expanded node |
| onRowClick | (rowData:object, event: SyntheticEvent)=>void | Click the callback function after the row and return to `rowDate` |
| onRowContextMenu | (rowData:object, event: SyntheticEvent)=>void | Invoke the callback function on contextMenu and pass the `rowData` |
| 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.ReactNode) => React.ReactNode | Customized data is empty display content |
| renderLoading | (loading: React.ReactNode) => React.ReactNode | Customize the display content in the data load |
| renderRow | (children?: ReactNode, rowData?: RowDataType) => ReactNode | Custom row element |
| renderRowExpanded | (rowDate?: Object) => React.ReactNode | 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, rowIndex:number)=>string | Add an optional extra class name to row |
| rowExpandedHeight | number `(100)`, (rowDate?: Object) => number | Set the height of an expandable area |
| rowHeight | number`(46)`, (rowData: object) => number | Row height |
| rowKey | string `('key')` | Each row corresponds to the unique `key` in `data` |
| rtl | boolean | Right to left |
| 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 | enum: '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. |
### ``
| 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 |
| 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 | enum: '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 ``, and the callback function returns `sortColumn`, `sortType` values.
### ``
| Property | Type `(Default)` | Description |
| ----------------- | ------------------------------- | ------------------------------------------------------------------------------------------------------- |
| align | enum: 'left','center','right' | Alignment |
| fixed | boolean, 'left', 'right' | Fixed column |
| groupHeaderHeight | number | The height of the header of the merged cell group. The default value is 50% of the table `headerHeight` |
| header | React.ReactNode | Group header |
| verticalAlign | enum: 'top', 'middle', 'bottom' | Vertical alignment |
### ``
| Property | Type `(Default)` | Description |
| -------------- | ----------------------------- | -------------------------------------------- |
| children | React.ReactNode | The table column header displays the content |
| renderSortIcon | (sortType) => React.ReactNode | Custom render sort icons on column headers |
### ``
| Property | Type `(Default)` | Description |
| -------- | ---------------- | -------------------------------------------- |
| dataKey | string | Data binding `key`, but also a sort of `key` |
| rowData | object | Row data |
| rowIndex | number | Row number |
#### There are three ways to use ``, as follows:
- 1.Associate the fields in the data with `dataKey`.
```tsx
Name
```
- 2.Customize a ``.
```tsx
const NameCell = ({ rowData, ...props }) => (
{rowData.name}
);
Name
```
- 3.Customize functions directly within the ``.
```tsx
Name
{(rowData, rowIndex) => {
return {rowData.name};
}}
```
(For nested data read this: https://github.com/rsuite/rsuite-table/issues/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 that
the right generic type parameter is automatically propagated to the Cell component.
```ts
const products: Product[] = [{ name: 'Pineapple' }];
ref={table} data={products}>
{({ Column, HeaderCell, Cell }) => (
<>
Name
{/* No need for passing explicit type parameter to Cell */}
{row => row.name}
>
)}
;
```
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.
```ts
const products: Product[] = [{ name: 'Pineapple' }];
{({ Column, HeaderCell, Cell }) => (
<>
Name
{row => row.name}
>
)}
;
```
When writing reusable components, it is recommended to make your components generic as well. For example:
```ts
interface ImageCellProps> {
rowData: TRow;
dataKey: TKey;
// ... any other props
}
const ImageCell = >({
rowData,
dataKey,
...rest
}: ImageCellProps) => (
{...rest}>
);
```
[npm-badge]: https://img.shields.io/npm/v/rsuite-table.svg?style=flat-square
[npm]: https://www.npmjs.com/package/rsuite-table
[coverage-badge]: https://img.shields.io/coveralls/rsuite/rsuite-table.svg?style=flat-square
[coverage]: https://coveralls.io/github/rsuite/rsuite-table
[actions-svg]: https://github.com/rsuite/rsuite-table/workflows/Node.js%20CI/badge.svg?branch=main
[actions-home]: https://github.com/rsuite/rsuite-table/actions?query=branch%3Amain+workflow%3A%22Node.js+CI%22