GuillaumeJasmin / react-table-hoc-fixed-columns

ReactTable HOC for fixed columns
MIT License
113 stars 41 forks source link

ReactTable HOC fixed columns

npm version npm downloads

Higher Order Components for ReactTable v6. It make possible to fixed one or more columns on the left and/or on the right. It use position: sticky for recent browsers, and fallback for legacy browser.

Documentation

Version 1

Documentation of previous v1 here

Features

Install

npm install react-table-hoc-fixed-columns --save

Simple example

It's really simple: add fixed property to your columns with value left and right

import ReactTable from 'react-table';
import "react-table/react-table.css";
import withFixedColumns from 'react-table-hoc-fixed-columns';
import 'react-table-hoc-fixed-columns/lib/styles.css' // important: this line must be placed after react-table css import

const ReactTableFixedColumns = withFixedColumns(ReactTable);
...
render () {
  return (
    <ReactTableFixedColumns
      data={data}
      columns={[
        {
          Header: 'First Name',
          accessor: 'firstName',
          fixed: 'left',
        },
        {
          Header: 'Last Name',
          accessor: 'lastName',
          fixed: 'left',
        },
        ...
        {
          Header: 'age',
          accessor: 'age',
          fixed: 'right',
        }
      ]}
    />
  )
}

Fixed columns also work with groups.

Tips: if your table contain at least one header group, place yours fixed columns into a group too (even with an empty Header name)

import ReactTable from 'react-table';
import "react-table/react-table.css";
import withFixedColumns from 'react-table-hoc-fixed-columns';
import 'react-table-hoc-fixed-columns/lib/styles.css' // important: this line must be placed after react-table css import

const ReactTableFixedColumns = withFixedColumns(ReactTable);
...
render () {
  return (
    <ReactTableFixedColumns
      data={data}
      columns={[
        {
          Header: 'Group names',
          fixed: 'left',
          columns: [
            {
              Header: 'First Name',
              accessor: 'firstName',
            },
            {
              Header: 'Last Name',
              accessor: 'lastName',
            },
          ]
        },
        {
          Header: 'Other group',
          columns: [
            ...
          ]
        }
      ]}
    />
  )
}

Props

There is some custom props that can be usefull

Legacy browsers

If the browser doesn't support position: sticky, there is a fallback with transform: translate3d() on each scroll event. The animation is not always smooth, it depend on your browser, OS, and scroll trigger (mouse wheel or scroll bar), but it works.

You can force to use only legacy browsers version:

import { withFixedColumnsScrollEvent } from 'react-table-hoc-fixed-columns'
import ReactTable from 'react-table';

const Table = withFixedColumnsScrollEvent(ReactTable);

or also force only sticky position version:

import { withFixedColumnsStickyPosition } from 'react-table-hoc-fixed-columns'
...

Check sticky support https://caniuse.com/#search=sticky

ES7 requirement

If your browser doesn't support ES7, please import es7-shim. Alternatively, you could just use the polyfill for the Array includes method.

Migrate v0 to v1

For migration to v0.1.x to v1.x.x , fixed: true is equivalent to fixed: left, no need to change the value.

Migrate v1 to v2

v2 contain styles improvement. CSS-in-JS was removed, in order to let a full override style. However, you now must manually include css file

Contribute

Follow these steps to get started developing :