React-Table中的固定列

Question

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

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

我的唯一问题是，我需要“冻结”第一列（最左侧的列），以便在用户水平滚动查看其他列时，它始终处于“视图”中。我已经仔细阅读了文档，没有找到任何参考资料，因此我认为除非篡改源代码，否则没有办法做到这一点。

- mk8efz

---

https://github.com/react-tools/react-table/issues/848 - Alexis

这个回答解决了您的问题吗？ReactTable组件中固定列 - Hardik Modha

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

- mk8efz