{"id":13421859,"url":"https://github.com/rsuite/rsuite-table","last_synced_at":"2025-05-14T00:09:30.680Z","repository":{"id":37405477,"uuid":"60861412","full_name":"rsuite/rsuite-table","owner":"rsuite","description":"A React table component.","archived":false,"fork":false,"pushed_at":"2025-04-17T08:32:14.000Z","size":72848,"stargazers_count":732,"open_issues_count":46,"forks_count":134,"subscribers_count":15,"default_branch":"main","last_synced_at":"2025-04-28T13:27:35.943Z","etag":null,"topics":["affix","datatables","react","react-table","table","treetable","virtualization","windowing"],"latest_commit_sha":null,"homepage":"https://table.rsuitejs.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rsuite.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":null,"patreon":null,"open_collective":"rsuite","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2016-06-10T16:19:14.000Z","updated_at":"2025-04-28T11:49:37.000Z","dependencies_parsed_at":"2023-02-09T01:15:22.705Z","dependency_job_id":"b42256cf-331d-4632-a3ef-126b6a51688f","html_url":"https://github.com/rsuite/rsuite-table","commit_stats":{"total_commits":659,"total_committers":30,"mean_commits":"21.966666666666665","dds":"0.10773899848254931","last_synced_commit":"48ca2f02168248c21e43d5f126c5e8631e91ab8d"},"previous_names":[],"tags_count":118,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rsuite%2Frsuite-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rsuite%2Frsuite-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rsuite%2Frsuite-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rsuite%2Frsuite-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rsuite","download_url":"https://codeload.github.com/rsuite/rsuite-table/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252848445,"owners_count":21813651,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["affix","datatables","react","react-table","table","treetable","virtualization","windowing"],"created_at":"2024-07-30T23:00:32.985Z","updated_at":"2025-05-14T00:09:30.639Z","avatar_url":"https://github.com/rsuite.png","language":"TypeScript","readme":"# rsuite-table\n\nA React table component.\n\n[![npm][npm-badge]][npm] [![GitHub Actions][actions-svg]][actions-home] [![Coverage Status][coverage-badge]][coverage]\n\n## Features\n\n- Support virtualized.\n- Support fixed header, fixed column.\n- Support custom adjustment column width.\n- Support for custom cell content.\n- Support for displaying a tree form.\n- Support for sorting.\n- Support for expandable child nodes\n- Support for RTL\n\n## Preview\n\n- Fixed Column\n\n![](https://user-images.githubusercontent.com/1203827/51730134-4b87c500-20b1-11e9-8140-d0c1ee79bb7b.png)\n\n- Custom Cell\n\n![](https://user-images.githubusercontent.com/1203827/51730187-7eca5400-20b1-11e9-827f-60a7532923c9.png)\n\n- Tree Table\n\n![](https://user-images.githubusercontent.com/1203827/51730250-bb964b00-20b1-11e9-82e3-2391fbb6266b.png)\n\n- Expandable\n\n![](https://user-images.githubusercontent.com/1203827/51730456-86d6c380-20b2-11e9-8331-462fda0eeaa0.png)\n\n[More Examples](https://rsuitejs.com/en/components/table)\n\n## Install\n\n```sh\n# use npm\nnpm i rsuite-table\n\n# or use yarn\nyarn add rsuite-table\n\n# or use pnpm\npnpm add rsuite-table\n```\n\n## Usage\n\n```tsx\nimport { Table, Column, HeaderCell, Cell } from 'rsuite-table';\nimport 'rsuite-table/lib/less/index.less'; // or 'rsuite-table/dist/css/rsuite-table.css'\n\nconst dataList = [\n { id: 1, name: 'a', email: 'a@email.com', avartar: '...' },\n { id: 2, name: 'b', email: 'b@email.com', avartar: '...' },\n { id: 3, name: 'c', email: 'c@email.com', avartar: '...' }\n];\n\nconst ImageCell = ({ rowData, dataKey, ...rest }) =\u003e (\n \u003cCell {...rest}\u003e\n \u003cimg src={rowData[dataKey]} width=\"50\" /\u003e\n \u003c/Cell\u003e\n);\n\nconst App = () =\u003e (\n \u003cTable data={dataList}\u003e\n \u003cColumn width={100} sortable fixed resizable\u003e\n \u003cHeaderCell\u003eID\u003c/HeaderCell\u003e\n \u003cCell dataKey=\"id\" /\u003e\n \u003c/Column\u003e\n\n \u003cColumn width={100} sortable resizable\u003e\n \u003cHeaderCell\u003eName\u003c/HeaderCell\u003e\n \u003cCell dataKey=\"name\" /\u003e\n \u003c/Column\u003e\n\n \u003cColumn width={100} sortable resizable\u003e\n \u003cHeaderCell\u003eEmail\u003c/HeaderCell\u003e\n \u003cCell\u003e\n {(rowData, rowIndex) =\u003e {\n return \u003ca href={`mailto:${rowData.email}`}\u003e{rowData.email}\u003c/a\u003e;\n }}\n \u003c/Cell\u003e\n \u003c/Column\u003e\n\n \u003cColumn width={100} resizable\u003e\n \u003cHeaderCell\u003eAvartar\u003c/HeaderCell\u003e\n \u003cImageCell dataKey=\"avartar\" /\u003e\n \u003c/Column\u003e\n \u003c/Table\u003e\n);\n```\n\n## API\n\n### `\u003cTable\u003e`\n\n| Property | Type (Default) | Description |\n| ------------------------ | --------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| affixHeader | boolean, number | Affix the table header to a specified position on the page. |\n| affixHorizontalScrollbar | boolean, number | Affix the table's horizontal scrollbar to a specified position on the page. |\n| autoHeight | boolean | Automatically expand the table's height based on the number of data rows, without displaying a vertical scrollbar. |\n| bordered | boolean | Display table borders. |\n| cellBordered | boolean | Display cell borders. |\n| children | (components: { Cell, HeaderCell, Column, ColumnGroup }) =\u003e ReactNode \\| ReactNode | Render props that receive parameterized Cell, HeaderCell, Column, and ColumnGroup components, making TypeScript usage more convenient. |\n| data \\* | RowData[] | Table data. |\n| defaultExpandAllRows | boolean | Expand all rows by default. |\n| defaultExpandedRowKeys | string[] | Specify the initially expanded rows by their keys. |\n| defaultSortType | 'desc' \\| 'asc' | Default sort type. |\n| expandedRowKeys | string[] | Specify the expanded rows by their keys (Controlled). |\n| fillHeight | boolean | Force the table's height to match its parent container's height. Cannot be used with `autoHeight`. |\n| headerHeight | number (40) | Table header height. |\n| height | number (200) | Table height. |\n| hover | boolean (true) | Enable row hover effects. |\n| isTree | boolean | Display the table as a tree structure. |\n| loading | boolean | Show a loading state. |\n| locale | {emptyMessage: string, loading: string} | Messages for empty data and loading states. |\n| maxHeight | number | Maximum table height. |\n| minHeight | number (0) | Minimum table height. |\n| onExpandChange | (expanded: boolean, rowData: RowData) =\u003e void | Callback function triggered when a tree table node is expanded or collapsed. |\n| onRowClick | (rowData: RowData, event: SyntheticEvent) =\u003e void | Callback function triggered when a row is clicked, returning the row data. |\n| onRowContextMenu | (rowData: RowData, event: SyntheticEvent) =\u003e void | Callback function triggered by a context menu event, returning the row data. |\n| onScroll | (scrollX: object, scrollY: object) =\u003e void | Callback function for scrollbar scroll events. |\n| onSortColumn | (dataKey: string, sortType: string) =\u003e void | Callback function triggered when the sort order changes, returning the column key and sort type. |\n| renderEmpty | (info: ReactNode) =\u003e ReactNode | Custom content to display when there is no data. |\n| renderLoading | (loading: ReactNode) =\u003e ReactNode | Custom content to display during data loading. |\n| renderRow | (children?: ReactNode, rowData?: RowData) =\u003e ReactNode | Custom row element renderer. |\n| renderRowExpanded | (rowData?: RowData) =\u003e ReactNode | Custom content to display in an expanded row. |\n| renderTreeToggle | (icon: ReactNode, rowData: RowData, expanded: boolean) =\u003e ReactNode | Custom toggle icon for expanding/collapsing tree nodes. |\n| rowClassName | string, (rowData: RowData, rowIndex: number) =\u003e string | Add an optional custom class name to rows. |\n| rowExpandedHeight | number (100), (rowData?: RowData) =\u003e number | Set the height of expanded rows. |\n| rowHeight | number (46), (rowData: RowData) =\u003e number | Row height. |\n| rowKey | string ('key') | Unique key for each row, derived from data. |\n| rtl | boolean | Enable right-to-left layout. |\n| shouldUpdateScroll | boolean, (event) =\u003e ({ x, y }) (true) | Determine whether to update the scroll position after the table size changes. |\n| showHeader | boolean (true) | Display the table header. |\n| sortColumn | string | Name of the column to sort by. |\n| sortType | 'desc' \\| 'asc' | Sort type (Controlled). |\n| virtualized | boolean | Efficiently render large datasets. |\n| width | number | Table width. |\n| wordWrap | boolean \\| 'break-all' \\| 'break-word' \\| 'keep-all' | Control text wrapping behavior within cells. |\n\n### `\u003cColumn\u003e`\n\n| Property | Type `(Default)` | Description |\n| ------------- | ------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------- |\n| align | 'left' \\| 'center' \\| 'right' | Sets the text alignment within the column. |\n| colSpan | number | Merges cells within the column when the `dataKey` value for the merged cells is `null` or `undefined`. |\n| fixed | boolean \\| 'left' \\| 'right' | Fixes the column to the left or right side of the table. |\n| flexGrow | number | Automatically adjusts the column width based on the value of `flexGrow`. Cannot be used with `resizable` and `width` properties. |\n| fullText | boolean | Displays the full text of the cell content when the mouse hovers over it. |\n| minWidth | number `(200)` | Sets the minimum width of the column when using `flexGrow`. |\n| onResize | (columnWidth?: number, dataKey?: string) =\u003e void | Callback function triggered after the column width changes. |\n| resizable | boolean | Allows the column width to be resized. |\n| rowSpan | (rowData: RowData) =\u003e number | Merges rows in the specified column. |\n| sortable | boolean | Enables sorting on the column. |\n| treeCol | boolean | Indicates that the column is part of a tree structure. |\n| verticalAlign | 'top' \\| 'middle' \\| 'bottom' | Sets the vertical alignment of content within the column. |\n| width | number | Specifies the column width. |\n\n\u003e `sortable` is used to define whether the column is sortable, but depending on what `key` sort needs to set a `dataKey` in `Cell`.\n\u003e The sort here is the service-side sort, so you need to handle the logic in the ' Onsortcolumn ' callback function of `\u003cTable\u003e`, and the callback function returns `sortColumn`, `sortType` values.\n\n### `\u003cColumnGroup\u003e`\n\n| Property | Type `(Default)` | Description |\n| ----------------- | ----------------------------- | -------------------------------------------------------------------------------------------- |\n| align | 'left' \\| 'center' \\| 'right' | Sets the text alignment within the column group. |\n| fixed | boolean \\| 'left' \\| 'right' | Fixes the column group to the left or right side of the table. |\n| groupHeaderHeight | number | Sets the height of the group header. The default value is 50% of the table's `headerHeight`. |\n| header | ReactNode | Specifies the content to be displayed as the group header. |\n| verticalAlign | 'top' \\| 'middle' \\| 'bottom' | Sets the vertical alignment of content within the column group. |\n\n### `\u003cHeaderCell\u003e`\n\n| Property | Type `(Default)` | Description |\n| -------------- | ----------------------- | ----------------------------------------------------------- |\n| children | ReactNode | Specifies the content to be displayed in the column header. |\n| renderSortIcon | (sortType) =\u003e ReactNode | Customizes the rendering of sort icons on column headers. |\n\n### `\u003cCell\u003e`\n\n| Property | Type `(Default)` | Description |\n| -------- | ----------------------------------------------------------------- | ------------------------------------------ |\n| children | ReactNode \\| ((rowData: RowData, rowIndex?: number) =\u003e ReactNode) | The content to be displayed in the cell. |\n| dataKey | string | The key used for data binding and sorting. |\n| rowData | RowData | The data associated with the current row. |\n| rowIndex | number | The index of the current row. |\n\n#### There are three ways to use `\u003cCell\u003e`, as follows:\n\n- 1.Associate the fields in the data with `dataKey`.\n\n```tsx\n\u003cColumn width=\"{100}\" align=\"center\"\u003e\n \u003cHeaderCell\u003eName\u003c/HeaderCell\u003e\n \u003cCell dataKey=\"name\" /\u003e\n\u003c/Column\u003e\n```\n\n- 2.Customize a `\u003cCell\u003e`.\n\n```tsx\nconst NameCell = ({ rowData, ...props }) =\u003e (\n \u003cCell {...props}\u003e\n \u003ca href={`mailto:${rowData.email}`}\u003e{rowData.name}\u003ca\u003e\n \u003c/Cell\u003e\n);\n\n\u003cColumn width={100} align=\"center\"\u003e\n \u003cHeaderCell\u003eName\u003c/HeaderCell\u003e\n \u003cNameCell /\u003e\n\u003c/Column\u003e\n```\n\n- 3.Customize functions directly within the `\u003cCell\u003e`.\n\n```tsx\n\u003cColumn width={100} align=\"center\"\u003e\n \u003cHeaderCell\u003eName\u003c/HeaderCell\u003e\n \u003cCell\u003e\n {(rowData, rowIndex) =\u003e {\n return \u003ca href={`mailto:${rowData.email}`}\u003e{rowData.name}\u003c/a\u003e;\n }}\n \u003c/Cell\u003e\n\u003c/Column\u003e\n```\n\n(For nested data read this: https://github.com/rsuite/rsuite-table/issues/158)\n\n### Table ref\n\n| Property | Type | Description |\n| -------------- | ------------------------ | -------------------------------------------------------------- |\n| body | HTMLDivElement | The body element of the table |\n| root | HTMLDivElement | The root element of the table |\n| scrollLeft | (left:number)=\u003evoid | Set the number of pixels for horizontal scrolling of the table |\n| scrollPosition | {top:number,left:number} | The scroll position of the table |\n| scrollTop | (top:number)=\u003evoid | Set the number of pixels for vertical scrolling of the table |\n\n### Type safety\n\nWe can pass generic type parameters to Table, Cell etc. for better type-safety when using typescript.\n\nPassing a render prop to Table is recommended when using TS, as this will ensure that\nthe right generic type parameter is automatically propagated to the Cell component.\n\n```ts\nconst products: Product[] = [{ name: 'Pineapple' }];\n\n\u003cTable\u003cProduct, string\u003e ref={table} data={products}\u003e\n {({ Column, HeaderCell, Cell }) =\u003e (\n \u003c\u003e\n \u003cColumn\u003e\n \u003cHeaderCell\u003eName\u003c/HeaderCell\u003e\n {/* No need for passing explicit type parameter to Cell */}\n \u003cCell\u003e{row =\u003e row.name}\u003c/Cell\u003e\n \u003c/Column\u003e\n \u003c/\u003e\n )}\n\u003c/Table\u003e;\n```\n\nIn 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.\n\n```ts\nconst products: Product[] = [{ name: 'Pineapple' }];\n\n\u003cTable data={products}\u003e\n {({ Column, HeaderCell, Cell }) =\u003e (\n \u003c\u003e\n \u003cColumn\u003e\n \u003cHeaderCell\u003eName\u003c/HeaderCell\u003e\n \u003cCell\u003e{row =\u003e row.name}\u003c/Cell\u003e\n \u003c/Column\u003e\n \u003c/\u003e\n )}\n\u003c/Table\u003e;\n```\n\nWhen writing reusable components, it is recommended to make your components generic as well. For example:\n\n```ts\ninterface ImageCellProps\u003cTKey extends string, TRow extends Record\u003cTKey, string\u003e\u003e {\n rowData: TRow;\n dataKey: TKey;\n // ... any other props\n}\n\nconst ImageCell = \u003cTKey extends string, TRow extends Record\u003cTKey, string\u003e\u003e({\n rowData,\n dataKey,\n ...rest\n}: ImageCellProps\u003cTKey, TRow\u003e) =\u003e (\n \u003cCell\u003cTRow, TKey\u003e {...rest}\u003e\n \u003cimg src={rowData[dataKey]} width=\"50\" /\u003e\n \u003c/Cell\u003e\n);\n```\n\n[npm-badge]: https://img.shields.io/npm/v/rsuite-table.svg?style=flat-square\n[npm]: https://www.npmjs.com/package/rsuite-table\n[coverage-badge]: https://img.shields.io/coveralls/rsuite/rsuite-table.svg?style=flat-square\n[coverage]: https://coveralls.io/github/rsuite/rsuite-table\n[actions-svg]: https://github.com/rsuite/rsuite-table/workflows/Node.js%20CI/badge.svg?branch=main\n[actions-home]: https://github.com/rsuite/rsuite-table/actions?query=branch%3Amain+workflow%3A%22Node.js+CI%22\n","funding_links":["https://opencollective.com/rsuite"],"categories":["UI Components","Data Tables \u0026 Grids","Projects using `@faker-js/faker`"],"sub_categories":["Table","Table / Data Grid"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frsuite%2Frsuite-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frsuite%2Frsuite-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frsuite%2Frsuite-table/lists"}