I'm using an excellent data table library for React:
My only issue is that I need to "freeze" the first (left most) column so that it's always in "view" when a user is scrolling sideways to view the other columns. I've poured over the documentation and didn't find any references, so I don't think there is a way to do this without hacking up the source code.
This issue has been temporarily resolved with an external library:
https://guillaumejasmin.github.io/react-table-hoc-fixed-columns/
Example:
import createTable from 'react-table-hoc-fixed-columns';
const ReactTableFixedColumns = createTable(ReactTable);
class MyComponent extends React.Component {
...
...
...
render(){
<ReactTableFixedColumns
data={this.state.data}
// Fixed Column(s)
columns = {[
{
Header: "Name",
id: "name_id",
fixed: true,
accessor: d => d.name,
},
// Scrollable Column(s)
{columns: [
{
Header: "Address",
id: "address_id",
accessor: d => d.address,
},
.
.
.
]}
]}
