React material-table垂直滚动时操作图标、选择框遮挡表头问题咨询

问题现象 #

React项目中使用material-table组件时，垂直滚动表格过程中出现两类显示异常：

• 行级操作图标、行选择框穿透固定表头，产生重叠遮挡
• 滚动条从表格最顶部开始渲染，不符合滚动条从表头下方起始的预期

问题效果参考：

问题复现代码 #

<MaterialTable
    tableRef={tableRef}
    title=""
    onSelectionChange={(rows) => {
        handleClick(rows);
    }}
    columns={headerData}
    data={leadsDetails.data}   
    
    actions={[
        {
            icon: () => <PeopleAltIcon style={{ fontSize:"large", color: "#0096A2" }}/>,
            tooltip: 'Assign',
            position: 'row',
            onClick: (event, rowData) => {

            }
        },
        {
            icon: () => <DeleteIcon style={{ fontSize:"large", color: "#0096A2" }}/>,
            tooltip: 'Delete',
            position: 'row',
            onClick: (event, rowData) => {
                setConfirmDialog({
                    isOpen:true,
                    title:"Are you sure to delete this record ?",
                    subTitle:"",
                    onConfirm:() =>{onDeleteIcon(event, rowData)}
                })
                
            }
        },
    ]}

    options={{                            
        sorting: {sorting}, search: true,
        paging: true, pageSizeOptions: [10,20,30], pageSize: 10,
        exportButton: true,
        headerStyle: { background: "#0096A2", color: "#fff", fontSize: "0.85rem", position:'sticky', top:0,  whiteSpace:"nowrap", height: 20, maxHeight:20 },
        rowStyle: { color: "#0096A2", fontSize: "0.8rem", padding: 0,height: 20, whiteSpace:"nowrap", maxHeight:20},
        showTitle: false,
        toolbar: false,
        selection: true,
        maxBodyHeight: '60vh',
        draggable: false,
        thirdSortClick: false
    }}
    isLoading={isLoading}
/>

问题原因 #

1. 手动在headerStyle中添加position: sticky、top:0配置，破坏了material-table内置固定表头的层级逻辑，表头默认z-index低于表体行内元素，滚动时就会出现行内选择框、操作图标穿透遮挡表头的问题
2. 未开启组件内置的fixedHeader配置，滚动容器作用在整个表格外层，导致滚动条从表格最顶部开始渲染，覆盖表头区域
3. 代码中sorting: {sorting}属于错误写法，多包裹了一层对象，可能引发表格排序逻辑异常

修复步骤 #

1. 移除headerStyle中手动添加的position: sticky、top:0属性，给表头补充z-index配置，保证表头层级高于表体内容
2. 开启组件内置的fixedHeader: true配置，使用组件原生的固定表头能力，自动将滚动区域限定在表体部分
3. 修正sorting配置的写法错误
4. 如有必要，补充少量全局样式覆盖，强制表头不透明、滚动容器边界正确

修改后的组件配置 #

<MaterialTable
    tableRef={tableRef}
    title=""
    onSelectionChange={(rows) => {
        handleClick(rows);
    }}
    columns={headerData}
    data={leadsDetails.data}   
    
    actions={[
        {
            icon: () => <PeopleAltIcon style={{ fontSize:"large", color: "#0096A2" }}/>,
            tooltip: 'Assign',
            position: 'row',
            onClick: (event, rowData) => {}
        },
        {
            icon: () => <DeleteIcon style={{ fontSize:"large", color: "#0096A2" }}/>,
            tooltip: 'Delete',
            position: 'row',
            onClick: (event, rowData) => {
                setConfirmDialog({
                    isOpen:true,
                    title:"Are you sure to delete this record ?",
                    subTitle:"",
                    onConfirm:() =>{onDeleteIcon(event, rowData)}
                })
            }
        },
    ]}

    options={{                            
        sorting: sorting, // 修正之前多包一层对象的错误写法
        search: true,
        paging: true, 
        pageSizeOptions: [10,20,30], 
        pageSize: 10,
        exportButton: true,
        // 移除手动写的sticky定位，补充z-index
        headerStyle: { 
            background: "#0096A2", 
            color: "#fff", 
            fontSize: "0.85rem", 
            whiteSpace:"nowrap", 
            height: 20, 
            maxHeight:20,
            zIndex: 10
        },
        rowStyle: { 
            color: "#0096A2", 
            fontSize: "0.8rem", 
            padding: 0,
            height: 20, 
            whiteSpace:"nowrap", 
            maxHeight:20
        },
        showTitle: false,
        toolbar: false,
        selection: true,
        maxBodyHeight: '60vh',
        fixedHeader: true, // 开启内置固定表头
        draggable: false,
        thirdSortClick: false
    }}
    isLoading={isLoading}
/>

补充样式覆盖（可选，用于兼容特殊场景） #

如果修改配置后仍有穿透问题，在项目全局样式中添加以下代码：

/* 固定表头层级，避免内容穿透 */
.MuiTableCell-head {
  background-color: #0096A2 !important;
  z-index: 10 !important;
  position: sticky;
  top: 0;
}
/* 限定滚动区域仅为表体 */
.MuiTableBody-root {
  overflow-y: auto;
  max-height: calc(60vh - 40px);
}

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