Repository files navigation

BaseTable is a react table component to display large datasets with high performance and flexibility

# npmnpm install react-base-table --save# yarnyarn add react-base-table

importBaseTable,{Column}from'react-base-table'import'react-base-table/styles.css'// Important: if you fail to import react-base-table/styles.css then// BaseTable will not render as advertised in the included examples.// For advanced styling see link below:// https://github.com/Autodesk/react-base-table#advance ...<BaseTabledata={data}width={600}height={400}><Columnkey="col0"dataKey="col0"width={100}/><Columnkey="col1"dataKey="col1"width={100}/>  ...</BaseTable>...

Learn more at thewebsite

key is required for column definition or the column will be ignored

Make sure each item indata is unique by a key, the default key isid, you can customize it viarowKey

width is required for column definition, but in flex mode(fixed={false}), you can setwidth={0} andflexGrow={1} to achieve flexible column width, checkout theFlex Column example

width andheight(ormaxHeight) are required to display the table properly

In theexampleswe are using a wrapperconst Table = props => <BaseTable width={700} height={400} {...props} /> to do that

If you want it responsive, you can use theAutoResizer to make the table fill the container, checkout theAuto Resize example

In practice we tend to write inline functions for custom renderers, which would makeshouldUpdateComponent 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 ofthis.state, so it's easy to encounter the closure problem, but with React hooks, we can easily memoize functions viauseCallback oruseMemo, so the implicit optimization could be replaced with user land optimization which is more intuitive, to turn off the implicit optimization, setignoreFunctionInColumnCompare tofalse which is introduced sincev1.11.0

Here is anexample to demonstrate

BaseTable is well tested on all modern browsers and IE11.You have to polyfillArray.prototype.findIndex to make it works on IE

Theexamples don't work on IE as they are powered byreact-runner which is areact-live like library but only for modern browsers.

BaseTable is designed to be the base component to build your own complex table component

The simplest way is overriding the default styles (assuming you are usingscss)

// override default variables for BaseTable$table-prefix: AdvanceTable;$table-font-size:13px;$table-padding-left:15px;$table-padding-right:15px;$column-padding:7.5px;...$show-frozen-rows-shadow: false;$show-frozen-columns-shadow: true;@import'~react-base-table/es/_BaseTable.scss';.#{$table-prefix} {&:not(.#{$table-prefix}--show-left-shadow) {.#{$table-prefix}__table-frozen-left {box-shadow:none;    }  }&:not(.#{$table-prefix}--show-right-shadow) {.#{$table-prefix}__table-frozen-right {box-shadow:none;    }  }  ...}

You can write your own styles from scratch or use CSS-in-JS solutions to achieve that

<BaseTableclassPrefix="AdvanceTable"components={{TableCell:AdvanceTableCell,TableHeaderCell:AdvanceTableHeaderCell,ExpandIcon:AdvanceExpandIcon,SortIndicator:AdvanceSortIndicator,}}.../>

There are a lot of highly flexible props likexxxRenderer andxxxProps for you to build your own table component, please check theapi andexamples for more details

We are using a advanced table component based onBaseTable internally, with much more features, including row selection, row grouping, data aggregation, column settings, column reordering, and column grouping, tooltip, inline editing.

In real products

We useYarn as the package manager, checkout this repo and runyarn under both root folder andwebsite folder in install packages, then runyarn start to start the demo site powered byGatsby

Please checkguidelines for more details