Gathering detailed insights and metrics for react-base-table
Gathering detailed insights and metrics for react-base-table
A react table component to display large datasets with high performance and flexibility
Installations
npm install react-base-tableDeveloper Guide
BETA
Typescript
Yes
Module System
CommonJS
Score
87.7
Supply Chain
94.7
Quality
78.9
Maintenance
100
Vulnerability
100
License
Releases
5
Languages
3
JavaScript
SCSS
CSS
JavaScript (96.05%)
SCSS (3.34%)
CSS (0.61%)
Developer
Download Statistics
Total Downloads
5,365,260
Last Day
3,497
Last Week
17,563
Last Month
75,344
Last Year
986,961
GitHub Statistics
MIT License
1,519 Stars
181 Commits
164 Forks
28 Watchers
21 Branches
11 Contributors
Updated on Mar 25, 2025
Bundle Size
75.68 kB
Minified
18.85 kB
Minified + Gzipped
Maintainers
2
Package Meta Information
Latest Version
1.13.5
Package Id
react-base-table@1.13.5
Unpacked Size
912.83 kB
Size
166.14 kB
File Count
82
Published on
May 24, 2024
Total Downloads
Cumulative downloads
Total Downloads
5,365,260
Last Day
3.3%
3,497
Compared to previous day
Last Week
6.2%
17,563
Compared to previous week
Last Month
-4%
75,344
Compared to previous month
Last Year
-27.8%
986,961
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dev Dependencies
31
@babel/cli@babel/core@babel/plugin-proposal-class-properties@babel/plugin-proposal-object-rest-spread@babel/plugin-transform-runtime@babel/preset-env@babel/preset-react@types/reactbabel-corebabel-eslintbabel-jestbabel-plugin-syntax-trailing-function-commascross-enveslinteslint-config-prettiereslint-config-react-appeslint-plugin-flowtypeeslint-plugin-importeslint-plugin-jsx-a11yeslint-plugin-prettiereslint-plugin-reacthuskyjestlernalint-stagednode-sassprettierreactreact-domreact-test-rendererrimraf
react-base-table
BaseTable is a react table component to display large datasets with high performance and flexibility
Install
1# npm 2npm install react-base-table --save 3 4# yarn 5yarn add react-base-table
Usage
1import BaseTable, { Column } from 'react-base-table' 2import 'react-base-table/styles.css' 3// Important: if you fail to import react-base-table/styles.css then 4// BaseTable will not render as advertised in the included examples. 5// For advanced styling see link below: 6// https://github.com/Autodesk/react-base-table#advance 7 ... 8<BaseTable data={data} width={600} height={400}> 9 <Column key="col0" dataKey="col0" width={100} /> 10 <Column key="col1" dataKey="col1" width={100} /> 11 ... 12</BaseTable> 13...
Learn more at the website
unique key
key is required for column definition or the column will be ignored
Make sure each item in data is unique by a key, the default key is id, you can customize it via rowKey
size
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 example
width and height(or maxHeight) are required to display the table properly
In the examples
we are using a wrapper const Table = props => <BaseTable width={700} height={400} {...props} /> to do that
If you want it responsive, you can use the AutoResizer to make the table fill the container, checkout the Auto Resize example
closure problem in custom renderers
In 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
It's recommended to inject the external data in column definition to solve the problem, like <Column foo={foo} bar={bar} cellRenderer={({ column: { foo, bar }}) => { ... } } />, 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
Things 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
Here is an example to demonstrate
Browser Support
BaseTable is well tested on all modern browsers and IE11. You have to polyfill Array.prototype.findIndex to make it works on IE
The examples don't work on IE as they are powered by react-runner which is a react-live like library but only for modern browsers.
Advance
BaseTable is designed to be the base component to build your own complex table component
Styling
The simplest way is overriding the default styles (assuming you are using scss)
1// override default variables for BaseTable 2$table-prefix: AdvanceTable; 3 4$table-font-size: 13px; 5$table-padding-left: 15px; 6$table-padding-right: 15px; 7$column-padding: 7.5px; 8... 9$show-frozen-rows-shadow: false; 10$show-frozen-columns-shadow: true; 11 12@import '~react-base-table/es/_BaseTable.scss'; 13 14.#{$table-prefix} { 15 &:not(.#{$table-prefix}--show-left-shadow) { 16 .#{$table-prefix}__table-frozen-left { 17 box-shadow: none; 18 } 19 } 20 21 &:not(.#{$table-prefix}--show-right-shadow) { 22 .#{$table-prefix}__table-frozen-right { 23 box-shadow: none; 24 } 25 } 26 27 ... 28}
You can write your own styles from scratch or use CSS-in-JS solutions to achieve that
Custom components
1<BaseTable 2 classPrefix="AdvanceTable" 3 components={{ 4 TableCell: AdvanceTableCell, 5 TableHeaderCell: AdvanceTableHeaderCell, 6 ExpandIcon: AdvanceExpandIcon, 7 SortIndicator: AdvanceSortIndicator, 8 }} 9 ... 10/>
Custom renderers & props
There are a lot of highly flexible props like xxxRenderer and xxxProps for you to build your own table component, please check the api and examples for more details
Example
We 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.
Development
We 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
Contributing
Please check guidelines for more details
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE.md:0
- Info: FSF or OSI recognized license: MIT License: LICENSE.md:0
Reason
Found 12/24 approved changesets -- score normalized to 5
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 24 are checked with a SAST tool
Reason
172 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
- Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
- Warn: Project is vulnerable to: GHSA-c429-5p7v-vgjp
- Warn: Project is vulnerable to: GHSA-6chw-6frg-f759
- Warn: Project is vulnerable to: GHSA-v88g-cgmw-v5xw
- Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
- Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
- Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
- Warn: Project is vulnerable to: GHSA-4w2v-q235-vp99
- Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x
- Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx
- Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6
- Warn: Project is vulnerable to: GHSA-pp7h-53gx-mx7r
- Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
- Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
- Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
- Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
- Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-7gc6-qh9x-w6h8
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c
- Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
- Warn: Project is vulnerable to: GHSA-3wcq-x3mq-6r9p
- Warn: Project is vulnerable to: GHSA-ff7x-qrg7-qggm
- Warn: Project is vulnerable to: GHSA-vh7m-p724-62c2
- Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
- Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
- Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
- Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
- Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
- Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
- Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
- Warn: Project is vulnerable to: GHSA-j4f2-536g-r55m
- Warn: Project is vulnerable to: GHSA-r7qp-cfhv-p84w
- Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
- Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
- Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
- Warn: Project is vulnerable to: GHSA-2j2x-2gpw-g8fm
- Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q
- Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c
- Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
- Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
- Warn: Project is vulnerable to: GHSA-8r6j-v8pm-fqw3
- Warn: Project is vulnerable to: MAL-2023-462
- Warn: Project is vulnerable to: GHSA-c6f8-8r25-c4gc
- Warn: Project is vulnerable to: GHSA-7ch4-rr99-cqcw
- Warn: Project is vulnerable to: GHSA-8mmm-9v2q-x3f9
- Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
- Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
- Warn: Project is vulnerable to: GHSA-4852-vrh7-28rf
- Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
- Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
- Warn: Project is vulnerable to: GHSA-6x33-pw7p-hmpq
- Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
- Warn: Project is vulnerable to: GHSA-qqgx-2p2h-9c37
- Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
- Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
- Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr
- Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg
- Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
- Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
- Warn: Project is vulnerable to: GHSA-6c8f-qphg-qjgp
- Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
- Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
- Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
- Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
- Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
- Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
- Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
- Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
- Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
- Warn: Project is vulnerable to: GHSA-vh95-rmgr-6w4m
- Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
- Warn: Project is vulnerable to: GHSA-wc69-rhjr-hc9g
- Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
- Warn: Project is vulnerable to: GHSA-w7rc-rwvf-8q5r
- Warn: Project is vulnerable to: GHSA-92xj-mqp7-vmcj
- Warn: Project is vulnerable to: GHSA-wxgw-qj99-44c2
- Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
- Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
- Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
- Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
- Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
- Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
- Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
- Warn: Project is vulnerable to: GHSA-cwx2-736x-mf6w
- Warn: Project is vulnerable to: GHSA-v39p-96qg-c8rf
- Warn: Project is vulnerable to: GHSA-8v63-cqqc-6r2c
- Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
- Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653
- Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj
- Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67
- Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w
- Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
- Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
- Warn: Project is vulnerable to: GHSA-6fx8-h7jm-663j
- Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
- Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
- Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
- Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
- Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
- Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-rjqq-98f6-6j3r
- Warn: Project is vulnerable to: GHSA-mjxr-4v3x-q3m4
- Warn: Project is vulnerable to: GHSA-cgfm-xwp7-2cvr
- Warn: Project is vulnerable to: GHSA-rm97-x556-q36h
- Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
- Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
- Warn: Project is vulnerable to: GHSA-h9rv-jmmf-4pgx
- Warn: Project is vulnerable to: GHSA-hxcc-f52p-wc94
- Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
- Warn: Project is vulnerable to: GHSA-gp95-ppv5-3jc5
- Warn: Project is vulnerable to: GHSA-54xq-cgqr-rpm3
- Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
- Warn: Project is vulnerable to: GHSA-wpg7-2c88-r8xv
- Warn: Project is vulnerable to: GHSA-fxwf-4rqh-v8g3
- Warn: Project is vulnerable to: GHSA-25hc-qcg6-38wj
- Warn: Project is vulnerable to: GHSA-xfhh-g9f5-x4m4
- Warn: Project is vulnerable to: GHSA-qm95-pgcg-qqfq
- Warn: Project is vulnerable to: GHSA-cqmj-92xf-r6r9
- Warn: Project is vulnerable to: GHSA-c9g6-9335-x697
- Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
- Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
- Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
- Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
- Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
- Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
- Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
- Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
- Warn: Project is vulnerable to: GHSA-29xr-v42j-r956
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
- Warn: Project is vulnerable to: GHSA-9m6j-fcg5-2442
- Warn: Project is vulnerable to: GHSA-hh27-ffr2-f2jc
- Warn: Project is vulnerable to: GHSA-rqff-837h-mm52
- Warn: Project is vulnerable to: GHSA-8v38-pw62-9cw2
- Warn: Project is vulnerable to: GHSA-hgjh-723h-mx2j
- Warn: Project is vulnerable to: GHSA-jf5r-8hm2-f872
- Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
- Warn: Project is vulnerable to: GHSA-g78m-2chm-r7qv
- Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
- Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
- Warn: Project is vulnerable to: GHSA-72mh-269x-7mh5
- Warn: Project is vulnerable to: GHSA-h4j5-c7cj-74xg
- Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh
- Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp
- Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
- Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
- Warn: Project is vulnerable to: GHSA-cwfw-4gq5-mrqx
- Warn: Project is vulnerable to: GHSA-g95f-p29q-9xw4
- Warn: Project is vulnerable to: GHSA-w457-6q6x-cgp9
- Warn: Project is vulnerable to: GHSA-62gr-4qp9-h98f
- Warn: Project is vulnerable to: GHSA-f52g-6jhx-586p
- Warn: Project is vulnerable to: GHSA-2cf5-4w76-r9qv
- Warn: Project is vulnerable to: GHSA-3cqr-58rm-57f8
- Warn: Project is vulnerable to: GHSA-g9r4-xpmj-mj65
- Warn: Project is vulnerable to: GHSA-q2c6-c6pm-g3gh
- Warn: Project is vulnerable to: GHSA-765h-qjxv-5f44
- Warn: Project is vulnerable to: GHSA-f2jv-r9rf-7988
- Warn: Project is vulnerable to: GHSA-pc5p-h8pf-mvwp
- Warn: Project is vulnerable to: GHSA-7wpw-2hjm-89gp
- Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p
- Warn: Project is vulnerable to: GHSA-9v62-24cr-58cx
- Warn: Project is vulnerable to: GHSA-r8f7-9pfq-mjmv
- Warn: Project is vulnerable to: GHSA-7mwh-4pqv-wmr8
- Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
- Warn: Project is vulnerable to: GHSA-7p7h-4mm5-852v
- Warn: Project is vulnerable to: GHSA-38fc-wpqx-33j7
Score
2.8
/10
Last Scanned on 2025-03-24
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More