React-Table 中的固定列

Question

我正在为 React 使用一个出色的数据表库：

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

我唯一的问题是我需要“冻结”第一列（最左侧），以便在用户侧向滚动以查看其他列时它始终处于“视图”状态。 我翻遍了文档并没有找到任何参考资料，所以我认为没有办法在不破解源代码的情况下做到这一点。

Answer 1

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

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

Answer 2

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

在这里找到完整的代码

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

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

第3步：将两个div都包裹起来，并使用固定宽度，为第二个宽度赋予固定宽度或响应宽度，然后使之溢出-x：滚动； 因此它会保持水平滚动，而第一个表格列将无法滚动