ReactTable HOC for fixed columns
ReactTable HOC fixed columns
---


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.
* Demo on CodeSandbox
* Install
* Simple example
* Props
* Legacy browsers
* Contribute
-striped and -highlight className still working, even on fixed columns``bash`
npm install react-table-hoc-fixed-columns --save
It's really simple: add fixed property to your columns with value left and right
`js
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 (
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)
`js
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 (
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
* innerRef - ref to the ReactTable component`
js`
render () {
return (
/>
)
}
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:
`js
import { withFixedColumnsScrollEvent } from 'react-table-hoc-fixed-columns'
import ReactTable from 'react-table';
const Table = withFixedColumnsScrollEvent(ReactTable);
`
or also force only sticky position version:
`js`
import { withFixedColumnsStickyPosition } from 'react-table-hoc-fixed-columns'
...
Check sticky support https://caniuse.com/#search=sticky
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* inlude css file
`jsx
import "react-table/react-table.css";
...
import 'react-table-hoc-fixed-columns/lib/styles.css';
`
* stripedColor and highlightColor props was remove. You can now override it with pure css.
* See the CSS file if you want to override styleContribute
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.