{"id":13394080,"url":"https://github.com/Autodesk/react-base-table","last_synced_at":"2025-03-13T19:31:58.463Z","repository":{"id":34312369,"uuid":"177052572","full_name":"Autodesk/react-base-table","owner":"Autodesk","description":"A react table component to display large datasets with high performance and flexibility","archived":false,"fork":false,"pushed_at":"2024-08-21T12:41:22.000Z","size":46787,"stargazers_count":1499,"open_issues_count":91,"forks_count":165,"subscribers_count":29,"default_branch":"master","last_synced_at":"2024-10-30T03:35:56.121Z","etag":null,"topics":["component","grid","react","table","virtualized"],"latest_commit_sha":null,"homepage":"https://autodesk.github.io/react-base-table/","language":"JavaScript","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/Autodesk.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"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}},"created_at":"2019-03-22T01:44:23.000Z","updated_at":"2024-10-28T06:40:20.000Z","dependencies_parsed_at":"2024-04-18T11:55:37.467Z","dependency_job_id":"082ae78e-4762-42c2-860e-b875adf000f6","html_url":"https://github.com/Autodesk/react-base-table","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Autodesk%2Freact-base-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Autodesk%2Freact-base-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Autodesk%2Freact-base-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Autodesk%2Freact-base-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Autodesk","download_url":"https://codeload.github.com/Autodesk/react-base-table/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243469241,"owners_count":20295715,"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":["component","grid","react","table","virtualized"],"created_at":"2024-07-30T17:01:08.268Z","updated_at":"2025-03-13T19:31:57.487Z","avatar_url":"https://github.com/Autodesk.png","language":"JavaScript","readme":"# react-base-table\n\nBaseTable is a react table component to display large datasets with high performance and flexibility\n\n\u003ca href=\"https://npm.im/react-base-table\"\u003e\u003cimg src=\"https://badgen.net/npm/license/react-base-table\"\u003e\u003c/a\u003e\n\u003ca href=\"https://npm.im/react-base-table\"\u003e\u003cimg src=\"https://badgen.net/npm/v/react-base-table\"\u003e\u003c/a\u003e\n\u003ca href=\"https://npm.im/react-base-table\"\u003e\u003cimg src=\"https://badgen.net/npm/dm/react-base-table\"\u003e\u003c/a\u003e\n\u003ca href=\"https://bundlephobia.com/result?p=react-base-table\"\u003e\u003cimg src=\"https://badgen.net/bundlephobia/minzip/react-base-table\"\u003e\u003c/a\u003e\n\n## Install\n\n```bash\n# npm\nnpm install react-base-table --save\n\n# yarn\nyarn add react-base-table\n```\n\n## Usage\n\n```js\nimport BaseTable, { Column } from 'react-base-table'\nimport 'react-base-table/styles.css'\n// Important: if you fail to import react-base-table/styles.css then \n// BaseTable will not render as advertised in the included examples.\n// For advanced styling see link below:\n// https://github.com/Autodesk/react-base-table#advance\n ...\n\u003cBaseTable data={data} width={600} height={400}\u003e\n  \u003cColumn key=\"col0\" dataKey=\"col0\" width={100} /\u003e\n  \u003cColumn key=\"col1\" dataKey=\"col1\" width={100} /\u003e\n  ...\n\u003c/BaseTable\u003e\n...\n```\n\nLearn more at the [website](https://autodesk.github.io/react-base-table/)\n\n### unique key\n\n`key` is required for column definition or the column will be ignored\n\nMake sure each item in `data` is unique by a key, the default key is `id`, you can customize it via `rowKey`\n\n### size\n\n`width` is required for column definition, but in flex mode(`fixed={false}`), you can set `width={0}` and `flexGrow={1}` to achieve flexible column width, checkout the [Flex Column](https://autodesk.github.io/react-base-table/examples/flex-column) example\n\n`width` and `height`(or `maxHeight`) are required to display the table properly\n\nIn the [examples](https://autodesk.github.io/react-base-table/examples)\nwe are using a wrapper `const Table = props =\u003e \u003cBaseTable width={700} height={400} {...props} /\u003e` to do that\n\nIf you want it responsive, you can use the [`AutoResizer`](https://autodesk.github.io/react-base-table/api/autoresizer) to make the table fill the container, checkout the [Auto Resize](https://autodesk.github.io/react-base-table/examples/auto-resize) example\n\n### closure problem in custom renderers\n\nIn practice we tend to write inline functions for custom renderers, which would make `shouldUpdateComponent` always true as the inline function will create a new instance on every re-render, to avoid \"unnecessary\" re-renders, **`BaseTable` ignores functions when comparing column definition by default**, it works well in most cases before, but if we use external data instead of reference state in custom renderers, we always get the staled initial value although the data has changed\n\nIt's recommended to inject the external data in column definition to solve the problem, like `\u003cColumn foo={foo} bar={bar} cellRenderer={({ column: { foo, bar }}) =\u003e { ... } } /\u003e`, the column definition will update on external data change, with this pattern we can easily move the custom renderers out of column definition for sharing, the downside is it would bloat the column definition and bug prone\n\nThings getting worse with the introduction of React hooks, we use primitive state instead of `this.state`, so it's easy to encounter the closure problem, but with React hooks, we can easily memoize functions via `useCallback` or `useMemo`, so the implicit optimization could be replaced with user land optimization which is more intuitive, to turn off the implicit optimization, set `ignoreFunctionInColumnCompare` to `false` which is introduced since `v1.11.0`\n\nHere is an [example](https://autodesk.github.io/react-base-table/playground#MYewdgzgLgBKA2BXAtpGBeGBzApmHATgIZQ4DCISqEAFAIwAMAlAFCiSwAmJRG2ehEjgAiPGghSQANDABMDZixY4AHgAcQBLjgBmRRPFg0mGAHwwA3ixhxw0GAG1QiMKQIyIOKBRduAunwASjhEwFAAdIieAMpQQjSKNuz2DgCWWGCaOABiLmGp4B5eAJIZWblg+eABmMGhEVE4sfFQBIg4rEl2sGlgAFY4YRRUYEVQxf2D3pSSNTB1YZExcaQ0evCenTAEXogEYDA01jYwADymxydnnKkAbjDQAJ7wOOgWFjBqRJw3YFgAXDAACwyG4QNTwIiPQEAch0LxUMJkfSiUFSOkeFFceCgsPBoRwAFoAEZeADuODwMJgAF8aRcrldTsTEFAoOAYOAyPBUsAANZvYxmB5eHzYgjiEC+QgwADUMDoTHpstOAHoWWzwAzGTZTpDSfBtTrdakwGpWZdjTYoI81K8AETAAAWgz5xJAKntlqtztdOE4b3SmR2FSqYBp3uNXKdRD+rwsOGFnnGZRDeTR4BoOHCcQIuAivv5-qVkauqqNxtKwcTOnTBQOptsI1syC+O1LZ1V+pwho7eqIBorOtOpvNUA7VxtdvQjpd-PdnonJ0LfP9gcmQxmqAjVqu0djuDeifQ5mTEwGm5GWZzRDzXnCK+LO935aX56mMFUrV43DiMHZTaSDAnC6KaqQZmAfZdgOPZDp2Ny3HBpwACoDi8MA6KkKj+sBPBvL+RA0jAQblHW4ATMMkgUK2t7xiRaaVBB9J9pRqBLhY4ScRI1AOAwfjPlaBEAOJeG4gomCetjSgQAnGs44rrhe0zNgA-FJ4owICLggZh+CcLJZZwbqrEHBxXFbpADh0PxMCvlapwmZYnEPhZEAOLINl2caDkWU55kjG5ADMnlGWcjlmS5AUOECIWRmqqHEi8FZqtqrARkAA) to demonstrate \n\n## Browser Support\n\n`BaseTable` is well tested on all modern browsers and IE11. _You have to polyfill `Array.prototype.findIndex` to make it works on IE_\n\n**The [examples](https://autodesk.github.io/react-base-table/examples) don't work on IE as they are powered by [react-runner](https://github.com/nihgwu/react-runner) which is a `react-live` like library but only for modern browsers.**\n\n## Advance\n\nBaseTable is designed to be the base component to build your own complex table component\n\n### Styling\n\nThe simplest way is overriding the default styles (assuming you are using `scss`)\n\n```scss\n// override default variables for BaseTable\n$table-prefix: AdvanceTable;\n\n$table-font-size: 13px;\n$table-padding-left: 15px;\n$table-padding-right: 15px;\n$column-padding: 7.5px;\n...\n$show-frozen-rows-shadow: false;\n$show-frozen-columns-shadow: true;\n\n@import '~react-base-table/es/_BaseTable.scss';\n\n.#{$table-prefix} {\n  \u0026:not(.#{$table-prefix}--show-left-shadow) {\n    .#{$table-prefix}__table-frozen-left {\n      box-shadow: none;\n    }\n  }\n\n  \u0026:not(.#{$table-prefix}--show-right-shadow) {\n    .#{$table-prefix}__table-frozen-right {\n      box-shadow: none;\n    }\n  }\n\n  ...\n}\n```\n\nYou can write your own styles from scratch or use CSS-in-JS solutions to achieve that\n\n### Custom components\n\n```jsx\n\u003cBaseTable\n  classPrefix=\"AdvanceTable\"\n  components={{\n    TableCell: AdvanceTableCell,\n    TableHeaderCell: AdvanceTableHeaderCell,\n    ExpandIcon: AdvanceExpandIcon,\n    SortIndicator: AdvanceSortIndicator,\n  }}\n  ...\n/\u003e\n```\n\n### Custom renderers \u0026 props\n\nThere are a lot of highly flexible props like `xxxRenderer` and `xxxProps` for you to build your own table component, please check the [api](https://autodesk.github.io/react-base-table/api) and [examples](https://autodesk.github.io/react-base-table/examples) for more details\n\n### Example\n\nWe are using a advanced table component based on `BaseTable` internally, with much more features, including row selection, row grouping, data aggregation, column settings, column reordering, and column grouping, tooltip, inline editing.\n\n![AdvanceTable](screenshots/advance-table.png)\n\n[In real products](https://blogs.autodesk.com/bim360-release-notes/2019/11/18/bim-360-cost-management-update-november-2019/)\n\n## Development\n\nWe use `Yarn` as the package manager, checkout this repo and run `yarn` under both root folder and `website` folder in install packages, then run `yarn start` to start the demo site powered by `Gatsby`\n\n## Contributing\n\nPlease check [guidelines](CONTRIBUTING.md) for more details\n","funding_links":[],"categories":["JavaScript","Data Tables \u0026 Grids","React"],"sub_categories":["Component","React Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAutodesk%2Freact-base-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAutodesk%2Freact-base-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAutodesk%2Freact-base-table/lists"}