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

【问题标题】：Mui-datatables fixed column on scroll - (left or right)滚动上的 Mui-datatables 固定列 - （左或右）
【发布时间】：2020-12-20 02:20:06
【问题描述】：

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

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

我的选择：

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


    };

【问题讨论】：

标签： reactjs mui-datatable

【解决方案1】：

fixedSelectColumn 属性用于“选择”元素，即复选框。在撰写本文时，我认为 MUI 数据表没有像 this feature 这样的道具，您已链接到与 jQuery 数据表相关的内容。

但是，在查看 this source code 时，我们可以看到一些“固定”列使用 CSS position: 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
        }
      })
    }
  },

  ...

【讨论】：

我在样式对象中的=> 和冒号: 处出现错误。我正在使用 VS 代码。