react-base-table

react-base-table

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

Install

# npm
npm install react-base-table --save

# yarn
yarn add react-base-table

Usage

import BaseTable, { Column } from 'react-base-table'
import 'react-base-table/styles.css'

...
<BaseTable data={data} width={600} height={400}>
  <Column key="col0" dataKey="col0" width={100} />
  <Column key="col1" dataKey="col1" width={100} />
  ...
</BaseTable>
...

Learn more at the website

Make sure each item in data is unique by a key, the default key is id, you can customize it via rowKey

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

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

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)

// 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

Custom components

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

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.

In real products

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