ReactTable 组件中的固定列

Posted 2023-02-19

【中文标题】ReactTable 组件中的固定列

【英文标题】：Fixed column in ReactTable component

【发布时间】：2018-06-13 06:56:45

【问题描述】：

当我们得到一个带有较小页面的水平列时，我们可以修复一个列吗？

例如，我们能否修复this 示例中的firstName 列。

干杯！！

【参考方案1】：

react-table 不支持固定列，问题已打开 Sticky columns。但是已经实现了解决方法，您可以找到来源github 或npm package（链接取自线程Sticky columns）。 Online Demo。 感谢 GuillaumeJasmin。

【参考方案2】：

由于react-table的v7最近发布并且完全重写，react-table-hoc-fixed-columns不兼容。如果您使用的是 answer。

react-table v7，可以使用同一作者的react-table-sticky。

【讨论】：

上面的库不能使用 react-window 进入图片。 Here's 问题。有人可以帮忙吗？

@priyanshusinha 你试过github.com/tannerlinsley/react-virtual吗？它来自 react-table 本身的作者，非常容易设置。这是一个示例：github.com/tannerlinsley/react-virtual#sample

【参考方案3】：

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

找到完整代码Here

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

第 2 步：将两张桌子并排放置，使其看起来像一张桌子

第 3 步：用单个 div 包裹两者并使用固定宽度，为第二个提供固定宽度或响应宽度，并制作 overflow-x: scroll;使其保持水平滚动，而第一个表列将不可滚动

【参考方案4】：

试试下面的方法，它可能会有所帮助：

在 React 中，CSS 部分属于组件本身：

fix:  
 position: 'sticky',
 right: 0,
 padding: '11px 16px',
 boxShadow: '0px 4px 4px 0px #999',
,
fixColumn:         
 position: 'sticky',       
 right: 0,
,

在我的例子中 - Material-UI DataTable

<MuiTable component="table" ...getProps()>
          <TableHead>
            headerGroups.map(prop => (
              <TableRow ...prop.getAllHeaderProps()>
                prop.headers.map((column, index) => 
                  const fixColIndex = column.id === 'column_id_need_to_fix' ? index : '';);
                  const fixHeaderProps = column.getHeaderProps(
                    className: clsx( [classes.fixColumn]: fixColIndex , column.className),
                  );return (
                <TableCell ...fixHeaderProps></TableCell>
              );
            )
          </TableRow>
        ))
      </TableHead>

在表体下

const Props = props.getProps(
                    className: clsx(
                      
                        [classes.fix]: props.column.id === fixColumnId,
                      ,
                    ),
                  );
                  return (
                    <TableCell ...Props>
                      prop.render('Cell')
                    </TableCell>
                  );