css - ReactTable 组件中的固定列

Question

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

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

干杯！！

Answer 1

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

Answer 2

由于 v7 ofreact-table最近发布并且完全重写，react-table-hoc-fixed-columns与它不兼容。如果您使用的是 <7 版本，请参阅上面的@Alex 的回答。

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

Answer 3

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

在这里找到完整的代码

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

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

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

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>

桌身下

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