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：滾動； 因此它會保持水平滾動，而第一個表格列將無法滾動