React-Table中的固定列

Question

我正在使用React的优秀数据表库：

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

我唯一的问题是我需要“冻结”第一个（最左侧）列，以便当用户侧向滚动查看其他列时，它始终处于“视图”状态。我已经倾倒了文档并且没有找到任何引用，所以我认为没有办法在不破解源代码的情况下执行此操作。

Answer 1

不使用react-table或任何npm依赖项固定列只能通过react应用中的css技巧来实现。

找到完整的代码Here

第1步：划分固定列和滚动列的数据集

第2步：以看起来像单个表的方式并排放置两个表

第3步：将两个div都包裹起来，并使用固定宽度，为第二个宽度提供固定宽度或响应宽度，然后使之溢出-x：滚动；这样它可以一直水平滚动，而第一个表格的列将无法滚动

Answer 2

此问题已通过外部库暂时解决：

https://guillaumejasmin.github.io/react-table-hoc-fixed-columns/

示例：

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