ReactTable 组件中的固定列答案

【问题标题】：Fixed column in ReactTable componentReactTable 组件中的固定列
【发布时间】：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>
                  );

【讨论】：