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

Posted 2023-02-21

【中文标题】滚动上的 Mui-datatables 固定列 - （左或右）

【英文标题】：Mui-datatables fixed column on scroll - (left or right)

【发布时间】：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,


    ;

【参考方案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 代码。