Material Table操作列图标与列名滚动重叠问题求助

问题描述 #

向下滚动表格时，操作列的图标会在移出视野前与列名发生重叠，该问题仅出现在操作列中。

解决方案 #

这个问题是因为表头设置了position: sticky后，操作列的内容（编辑/删除图标）层级高于表头导致的重叠。可以通过以下方式修复：

提升表头层级 #

在表格配置的headerStyle中添加z-index属性，让表头层级高于表格内容，同时设置不透明背景色避免透传：

options={{
    pageSize: 20,
    search: false,
    showTitle: false,
    toolbar: false,
    thirdSortClick: false,
    headerStyle: {
        position: "sticky",
        top: "0",
        zIndex: 10, // 提升表头层级
        backgroundColor: "#fff" // 设置不透明背景
    },
    maxBodyHeight: "300px"
}}

如果上述方式未完全生效，可以通过全局CSS单独调整操作列表头的样式：

.MuiTableHead-root .MuiTableCell-root:last-child {
    z-index: 11;
    background-color: #fff;
}

用户原始代码 #

列定义与数据 #

const [columns2, setColumns2] = useState([
    { title: 'Name', field: 'name' },
    { title: 'Surname', field: 'surname', initialEditValue: 'initial edit value' },
    { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
    {
        title: 'Birth Place',
        field: 'birthCity',
        lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
    },
]);

const [data, setData] = useState([
    { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
    { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
    { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
    { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
    { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
    { name: 'Zerya Betül', surname: 'Baran', birthYear: 2017, birthCity: 34 },
]);

表格组件代码 #

<MaterialTable
    title="Editable Preview"
    columns={columns2}
    data={data}
    options={{
        pageSize: 20,
        search: false,
        showTitle: false,
        toolbar: false,
        thirdSortClick: false,
        headerStyle: {
            position: "sticky",
            top: "0"
        },
        maxBodyHeight: "300px"
    }}
    editable={{
        onRowAdd: newData =>
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    setData([...data, newData]);
                    resolve();
                }, 1000)
            }),
        onRowUpdate: (newData, oldData) =>
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    const dataUpdate = [...data];
                    const index = oldData.tableData.id;
                    dataUpdate[index] = newData;
                    setData([...dataUpdate]);
                    resolve();
                }, 1000)
            }),
        onRowDelete: oldData =>
            new Promise((resolve, reject) => {
                setTimeout(() => {
                    const dataDelete = [...data];
                    const index = oldData.tableData.id;
                    dataDelete.splice(index, 1);
                    setData([...dataDelete]);
                    resolve()
                }, 1000)
            }),
    }}
/>

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