如何让react-admin List组件滚动时表头保持可见（冻结表头）？

要在react-admin的List组件中实现滚动时表头固定，有几种简单可行的方案，具体如下：

方法一：利用Datagrid内置属性 #

react-admin的<Datagrid>组件自带fixedHeader属性，配合height设置即可快速实现表头冻结。当表格内容高度超过设定值时，内容区域滚动，表头保持固定。

示例代码：

import { List, Datagrid, TextField, NumberField } from 'react-admin';

export const ProductList = () => (
    <List>
        <Datagrid fixedHeader height={600}>
            <TextField source="id" label="ID" />
            <TextField source="name" label="商品名称" />
            <NumberField source="price" label="价格" />
        </Datagrid>
    </List>
);

• fixedHeader设为true开启表头冻结
• height指定表格的整体高度，超出部分内容自动滚动

方法二：自定义CSS实现sticky表头 #

如果需要更灵活的样式控制，可以通过CSS给表头添加position: sticky属性，强制表头固定在顶部。

示例CSS：

/* 针对MUI DataGrid的表头类 */
.MuiDataGrid-columnHeaders {
    position: sticky !important;
    top: 0;
    background-color: #ffffff; /* 匹配你的主题背景色，避免内容穿透 */
    z-index: 1;
}

使用时无需给Datagrid设置fixedHeader，只需确保表格所在容器有固定高度或能产生滚动区域即可。

方法三：自定义容器布局适配复杂场景 #

若页面存在顶部导航栏等元素，需要调整表头的固定位置，可通过外层容器配合自定义样式实现：

示例代码：

import { List, Datagrid, TextField } from 'react-admin';
import './StickyList.css';

export const StickyHeaderList = () => (
    <List className="sticky-list-wrapper">
        <Datagrid className="sticky-datagrid">
            <TextField source="id" />
            <TextField source="title" />
            {/* 其他字段 */}
        </Datagrid>
    </List>
);

对应的StickyList.css：

.sticky-list-wrapper {
    height: calc(100vh - 120px); /* 减去顶部导航和底部元素的高度 */
    overflow: hidden;
}

.sticky-datagrid .MuiDataGrid-columnHeaders {
    position: sticky;
    top: 64px; /* 匹配顶部导航栏高度，避免被遮挡 */
    background-color: #fff;
    z-index: 10;
}

.sticky-datagrid .MuiDataGrid-virtualScroller {
    height: calc(100% - 56px); /* 减去表头高度，防止内容被表头遮挡 */
}

注意事项 #

• 确保表头背景色不透明，否则滚动时内容会透过表头显示
• 根据页面顶部固定元素（如导航栏）调整top值，避免表头被遮挡
• position: sticky属性兼容现代主流浏览器，若需支持IE等旧浏览器，建议使用方法一

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