我正在寻找一种方法来在react material-ui中修复表组件中的第一列

Question

我正在寻找一种方法来固定第一列，例如底部的this website。

滚动时如何固定第一列？

（devexpress没用）

Answer 1

我找到了解决此问题的方法。对于TableRows的每个第一个TableCell，我添加了一个带有下一个属性的样式类

position: '-webkit-sticky',
position: 'sticky',
background: '#fff',
left: 0,
zIndex: 1,

有一个限制，Firefox上没有显示边框按钮，在Edge中的测试按预期进行。

Answer 2

在文档中对此进行了很好的解释。签出基本设置示例。您将需要使用<TableFixedColumns>组件。

import React, { useState } from 'react';

export default () => {
  return (
    <Paper>
      <Grid
        rows={rows}
        columns={columns}
      >
        <Table
          columnExtensions={tableColumnExtensions}
        />
        <TableHeaderRow />
        <TableFixedColumns
          leftColumns={leftColumns}
          rightColumns={rightColumns}
        />
      </Grid>
    </Paper>
  );
};