virtualized-data-table

A flexible, customizable, high-performance table for React

based on Facebook's fixed-data-table and react-virtualized

Demo

Click here to see a demo of virtualized-data-table!

Basic Usage

installation

npm install virtualized-data-table --save

API

Virtualized Data Table has an interface based on Facebook's now deprecated fixed-data-table, but improves the performance (poor performance being the main reason for its deprecation) by basing the implementation on React Virtualized <Grid>.

It supports much of, but not all, markup supported by fixed-data-table. In particular, it supports the concept of a <Table> with <Column> children that have both a header and cell renderer based on a <Cell>. Here are a few modifications to the example shown on the front page of of fixed-data-table to support virtualized-data-table:

  <VirtualizedDataTable
    rowHeight={50}
    rowsCount={rows.length}
    width={5000}
    height={5000}
    headerHeight={50}>
    <Column
      header={<Cell>Col 1</Cell>}
      cell={<Cell>Column 1 static content</Cell>}
      width={2000}
    />
    <Column
      header={<Cell>Col 2</Cell>}
      cell={<MyCustomCell mySpecialProp="column2" />}
      width={1000}
    />
    <Column
      header={<Cell>Col 3</Cell>}
      cell={({rowIndex, columnKey, ...props}) => (
        <Cell {...props}>
          Data for column 3: {rows[rowIndex][columnKey]}
        </Cell>
      )}
      width={2000}
    />
  </Table>

It should also support Cell classes built for use with fixed-data-table, with a few modifications (see below).

This package could be a replacement for fixed-data-table in your project that could provide better performance than fixed-data-table with minimal code changes. That was the motivation for its creation. However, this package is not guaranteed to handle all possible use cases of fixed-data-table, so if this package doesn't provide support for your use case, feel free to add support for it!

Porting from fixed-data-table

In order to port your tables from fixed-data-table, you just need to add a few things:

You need to ensure each column has a 'columnKey' string property
You need to implement a rowGetter function as a property of your root Table which is passed a rowIndex and returns the data for that entire row.
Your custom cells or cell handlers will be passed an object containing 'rowData' (obtained from rowGetter), as well as the rowIndex and columnKey where the cell is being rendered

That should be it! Once you change your table and cell classes to handle columnKeys and rowData, everything should "just work."

Additional features

Some features were implemented beyond those which were supported by fixed-data-table (documentation to be provided soon):

Table column resizability
Row/column selectability
Group headers (another header that can span multiple columns)
Copy/paste support (Google sheets-esque)
Ability to freeze lefthand columns and scroll other columns

Maintainers

Paul Broman

_{Senior Front-End Engineer}

^{PureCars/Raycom Media}