ReactTable组件中的固定列

Question

当我们在使用较小页面时，是否可以固定水平列中的某一列呢？

例如，在这个示例中，我们是否可以固定 firstName 这一列呢？

谢谢！

- bhb

Answer 1

react-table不支持固定列，该问题已经被提出 Sticky columns。但是已经实现了解决方法，您可以在github或npm包中找到资源（链接取自线程Sticky columns）。 在线演示。 感谢GuillaumeJasmin。

- Alex

Answer 2

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

在此处找到完整的代码。

步骤1: 将固定列和可滚动列的数据集分开

步骤2: 将两个表并排放置，使其看起来像一个单一的表

步骤3: 使用单个div将两者包装起来，并使用固定宽度，为第二个表给出固定或响应式宽度，并使用overflow-x: scroll; 以便水平滚动，而第一个表的列将不可滚动。

- OnlyJS

Answer 3

自从最近发布了react-table的v7版本，并且进行了完全重写，react-table-hoc-fixed-columns与其不兼容。如果您正在使用版本<7，请参见上面@Alex的answer。

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

- Hardik Modha

---

上述库与react-window不兼容。这里是问题链接：https://stackoverflow.com/questions/61968493/react-table-v7-fixed-column-with-react-window。有人能提供帮助吗？ - priyanshu sinha

@priyanshusinha 你试过 https://github.com/tannerlinsley/react-virtual 吗？它是由 react-table 的作者开发的，非常容易设置。这里有一个示例：https://github.com/tannerlinsley/react-virtual#sample - Hardik Modha

Answer 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>

在TableBody下面。

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

- sid7747