如何在MUI X DataGrid社区版通过CSS实现列固定？

社区版MUI X DataGrid本身没有原生列固定功能，但可以通过CSS结合组件DOM结构模拟实现，以下是可行的方案：

• 核心思路：利用CSS的position: sticky特性，针对目标列的表头单元格和数据单元格设置粘性定位，配合表格的横向滚动实现固定效果。

• 具体实现步骤（以固定首列为例）：

  1. 在列定义中为目标列添加自定义类名：

     const columns = [
       {
         field: 'id',
         headerName: 'ID',
         width: 150,
         cellClassName: 'sticky-first-column',
         headerClassName: 'sticky-first-column'
       },
       // 其他列...
     ];
     

  2. 编写自定义CSS样式覆盖默认样式：

     /* 固定首列的表头和数据单元格 */
     .sticky-first-column {
       position: sticky !important;
       left: 0;
       z-index: 1;
       background-color: #ffffff; /* 背景色防止滚动内容穿透 */
     }
     
     /* 添加右侧边框区分固定列与滚动列 */
     .MuiDataGrid-columnHeader.sticky-first-column {
       border-right: 1px solid rgba(224, 224, 224, 1);
     }
     
     .MuiDataGrid-cell.sticky-first-column {
       border-right: 1px solid rgba(224, 224, 224, 1);
     }
     

  3. 确保DataGrid开启横向滚动：

     <DataGrid
       rows={rows}
       columns={columns}
       scrollX={true}
       // 其他属性...
     />
     

• 多列固定调整：如果需要固定多列，需为每一列设置递增的left值，比如第二列固定时设置left: 150px（对应首列的宽度），同时调整z-index避免层叠问题。

• 常见失败原因排查：

  • 未正确选中DataGrid的内部DOM元素（需结合.MuiDataGrid-cell、.MuiDataGrid-columnHeader这类组件默认类名）
  • 未添加!important覆盖组件的默认定位样式
  • 未设置背景色导致滚动后内容穿透固定列
  • 未开启DataGrid的scrollX属性

内容的提问来源于stack exchange，提问作者HamzaButt