React-Table 中的固定列

Question

I'm using an excellent data table library for React:

https://react-table.js.org/

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.

Answer 1

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,
               },
               .
               .
               .        
            ]}
          ]}

Answer 2

without using react-table or any npm dependencies fixed column can be achieved only via css tricks with in react app.

Find the full code Here

Step 1 : divide the dataset of fixed and scrollable columns

Step 2 : place two tables side by side in such a way that it looks as single table

Step 3 : Wrap both with a single div and use a fixed width, give fixed width or responsive width for second one and make overflow-x: scroll; so that it keeps scrolling horizontally,while first tables columns will not be scrollable