ReactTable HOC fixed columns

Higher Order Components for ReactTable. 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

• Demo on CodeSandbox
• Install
• Simple example
• Props
• Legacy browsers
• Contribute

Features

• fix columns on the left and / or on the right side
• fixed columns can be a group
• works with fixed header
• -striped and -highlight className still working, even on fixed columns
• fixed columns are resizable
• works with differents cell height
• fallback for legacy browsers

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 withFixedColumns from 'react-table-hoc-fixed-columns';
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 withFixedColumns from 'react-table-hoc-fixed-columns';
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

• stripedColor - CSS color value of striped rows. That overrided className -striped

• highlightColor - CSS color value of hilighted rows. That overrided className -highlight

• innerRef - ref to the ReactTable component

  render () {
    return (
      <ReactTableFixedColumns
        innerRef={(ref) => { this.tableRef = ref; }}
      />
    )
  }

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.

Contribute

Follow these steps to get started developing :

• git clone https://github.com/guillaumejasmin/react-table-hoc-fixed-columns.git
• npm install
• npm run lib:watch - Transpile the src/lib folder in watch mode
• npm run demo - start a development server with the demo website based on the src/demo folder.
• Go to http://127.0.0.1:8080 to see the demo in action. Whenever you change the code in either src/lib or src/demo, the page will automatically update.