如何实现Material UI Data Grid水平滚动时首列固定？

可以实现该效果，优先使用组件内置的官方API实现，手动添加position: sticky不生效是因为Data Grid内部为了适配虚拟滚动、自适应布局，给表格容器、行容器设置了对应的overflow属性和定位规则，会中断sticky的定位上下文，同时容易和组件内置样式冲突。
具体实现步骤：

• 首先确认你要固定的首列对应的field字段值，比如首列字段为id
• 给Data Grid组件配置pinnedColumns属性，将首列字段加入左侧固定数组即可，示例代码如下：

// 列定义示例
const columns = [
  { field: 'id', headerName: '序号', width: 100 }, // 需要固定的首列
  { field: 'username', headerName: '用户名', width: 180 },
  { field: 'email', headerName: '邮箱', width: 220 },
  // 其余业务列省略
]

const rows = [
  // 你的业务行数据
]

// 组件调用示例
<DataGrid
  rows={rows}
  columns={columns}
  pinnedColumns={{
    left: ['id'] // 此处配置需要固定在左侧的列的field值
  }}
/>

• 如果需要自定义固定列的样式，可通过组件自带的.MuiDataGrid-pinnedColumns相关CSS类名修改，无需调整定位属性。

你提供的Data Grid示例参考：

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