Mui-datatables 滚动固定列 - （左或右）

Question

如何在滚动过程中固定屏幕上的列？使用 Mui-datatables 库，例如 doc 上的数据表。 doc

在 mui-datatables 中有一个 fixedSelectColumn 属性，但我无法 select 列或配置滚动。

我的选择：

 const options = {
        filter: true,
        filterType: 'multiselect',
        textLabels : TextLabels,
        responsive: 'scroll',
        fixedHeader: true,
        tableBodyHeight: '100%',
        selectableRows: false,
        fixedSelectColumn: true,


    };

Answer 1

fixedSelectColumn 属性用于“选择”元素，即复选框。我不认为 MUI-Datatables，在撰写本文时有像 this feature 这样的道具，你已经链接到 jQuery 数据表。

然而，在查看 this source code, we can see that some of the "fixed" columns utilize the CSS position: sticky 属性时。因此，实现固定列的一种方法是这样设置单元格和 header 单元格的样式：

const columns = [
  {
    name: "Name",
    options: {
      filter: true,
      setCellProps: () => ({
        style: {
          whiteSpace: "nowrap",
          position: "sticky",
          left: "0",
          background: "white",
          zIndex: 100
        }
      }),
      setCellHeaderProps: () => ({
        style: {
          whiteSpace: "nowrap",
          position: "sticky",
          left: 0,
          background: "white",
          zIndex: 101
        }
      })
    }
  },

  ...

Mui-datatables 滚动固定列 - （左或右）

Mui-datatables fixed column on scroll - (left or right)

reactjs

mui-datatable