基于MUI X Data Grid实现全局滚动下的固定表头（含固定列）

要让页面全局垂直滚动时，MUI X Data Grid的列头始终固定在视口顶部，可通过以下两种方案实现：

方案一：内置属性配合CSS（推荐） #

1. 启用粘性表头属性
   在Data Grid组件中开启stickyHeader，这是组件内置的基础配置，再配合CSS适配全局滚动场景：

   <DataGrid
     rows={rows}
     columns={columns}
     stickyHeader={true}
     // 保留你原有其他配置，如fixed列、分页等
   />
   

2. 添加全局样式
   给Data Grid的表头容器设置粘性定位，确保它在页面滚动时固定在顶部：

   .MuiDataGrid-columnHeaders {
     position: sticky !important;
     top: 0; /* 若有顶部导航栏，替换为导航栏高度，比如top: 64px */
     z-index: 100;
     background-color: #fff; /* 必须设置不透明背景，避免下方内容穿透 */
   }
   

   如果你有左侧固定列，还需要给固定列的表头单独设置：

   .MuiDataGrid-fixedColumnHeaders {
     position: sticky !important;
     left: 0;
     background-color: #fff;
   }
   

方案二：手动分离表头（复杂场景适配） #

如果内置方案在固定列或复杂布局下出现排版问题，可以手动拆分表头和表格主体：

1. 手动构建独立表头
   用MUI Table组件复刻Data Grid的列头样式，给容器设置粘性定位：

   <div style={{ 
     position: 'sticky', 
     top: 0, 
     zIndex: 100, 
     backgroundColor: '#fff',
     borderBottom: '1px solid rgba(224, 224, 224, 1)' // 匹配DataGrid表头边框
   }}>
     <Table>
       <TableHead>
         <TableRow>
           {columns.map(col => (
             <TableCell
               key={col.field}
               style={{ 
                 width: col.width, 
                 textAlign: col.align || 'left',
                 ...(col.fixed === 'left' ? { 
                   position: 'sticky', 
                   left: 0, 
                   backgroundColor: '#fff' 
                 } : {})
               }}
             >
               {col.headerName}
             </TableCell>
           ))}
         </TableRow>
       </TableHead>
     </Table>
   </div>
   

2. 隐藏DataGrid默认表头
   在Data Grid中添加hideHeader属性，避免重复显示表头：

   <DataGrid
     rows={rows}
     columns={columns}
     hideHeader={true}
     // 保留原有其他配置
   />
   

注意事项 #

• 确保表头背景色不透明，否则滚动时下方内容会透过表头显示
• 若页面存在顶部导航栏，需将表头的top值设置为导航栏的高度，防止被遮挡
• 左侧固定列的表头需要单独设置sticky和left属性，保证固定效果同步

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