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

Question

如何在滚动期间固定屏幕上的列？使用 Mui-datatables 库，如 doc 上的数据表。文档

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

我的选择：

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


    };

Answer 1

该fixedSelectColumn道具用于“选择”元素，即复选框。我不认为 MUI-Datatables，在撰写本文时，您已链接到与 jQuery 数据表有关的此功能之类的道具。

但是，通过查看此源代码，我们可以看到一些“固定”列利用了 CSSposition: sticky属性。因此，实现固定列的一种方法是设置单元格和标题单元格的样式：

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
        }
      })
    }
  },

  ...