如何在 MUI v5 数据网格中固定第一列

Question

我想锁定 MUI v5 DataGrid 的第一列。我知道 DataGrid Pro 中有一个功能（通过 prop）可以做到这一点，但我买不起，所以我想我将通过 CSS 将第一列设置为第一个标题列和第一个正文列。我能够实现一些我需要的目标，但无法使其正常工作。我面临 1 个问题： 1.虽然第一个正文列通过位置粘性被锁定，但第一个标题列没有被锁定。 我已将 columnBuffer 设置为列的长度以避免虚拟化，这也意味着我的第一列将是第一列，无论它是否存在于视图中。

<DataGrid
              sx={{
                '.MuiDataGrid-virtualScroller': {
                  height: '260px !important',
                  overflowY: 'auto',
                },
                '& .MuiDataGrid-cell:first-child': {
                  position: 'sticky',
                  top: '0',
                  left: '0',
                  paddingLeft: '1.5rem',
                  zIndex: 999,
                },
                '& .MuiDataGrid-columnHeader:first-child': {
                  position: 'sticky',
                  top: '0',
                  left: '0',
                  paddingLeft: '1.5rem',
                  border: 'none',
                  zIndex: 999,
                },
              }}
              columnBuffer={columns.length}/>

Answer 1

我的主要语言不是英语，如果任何短语没有正确的语法含义，我提前道歉。

我实现了您在问题中指出的 CSS 样式库，并进行了以下修改：

1. 为了影响标题中未固定位置的第一个单元格，我应用了如下样式：

“& .MuiDataGrid-columnHeaders”：{ “& .MuiDataGrid-columnHeadersInner”：{ 转换：“无！重要”， “&div”：{ “& .MuiDataGrid-columnHeader:第一个子项”:{ 背景颜色：“#FFFFFF”， z索引：2， }, }, }, },

2. 我使用了 useEffect 在 HTML 元素上添加 Scroll 事件，该元素具有 .MuiDataGrid-virtualScroller 类。

   useEffect(() => {
   const findVirtualScroller = () => {
       const virtualScrollerElement = document.querySelector(
           ".MuiDataGrid-virtualScroller"
       );
       if (!virtualScrollerElement) {
           setTimeout(findVirtualScroller, 100);
       } else {
           virtualScrollerElement.addEventListener(
               "scroll",
               handleScrollHorizontal
           );
           return () => {
               virtualScrollerElement.removeEventListener(
                   "scroll",
                   handleScrollHorizontal
               );
           };
       }
   };
   findVirtualScroller();
   

   }, []);

3. 最后，我应用了转换，分别直接转换为数据网格标题。

   const handleScrollHorizontal = () => { const currentScrollPos = document.querySelector( “.MuiDataGrid-virtualScroller” ).scrollLeft; const columnsHeaders = document.querySelectorAll( “.MuiDataGrid-columnHeader:not(.MuiDataGrid-columnHeader:first-child)” ）； columnsHeaders.forEach((columnHeader) => { columnHeader.style.transform =

   translate3d(-${currentScrollPos}px, 0px, 0px)

   ; }); };

我希望这可以作为解决您提到的问题的指南。

问候。