Material React Table无法固定展开列至最左侧问题求助

要同时固定展开/折叠列和tasks列在左侧，只需将展开列的内置标识mrt-row-expand加入到列固定配置中即可，具体修改如下：

修改组件配置 #

在initialState.columnPinning.left数组里添加"mrt-row-expand"，它是Material React Table内置展开列的专属accessorKey：

export const WBSTable1 = ({ datae = [], column = [] }) => {
  return (
    <React.Fragment>
      <CustomPaper
        className={"paperCon"}
        sx={{
          width: "100%",
        }}
      >
        <MaterialReactTable
          columns={column}
          data={datae}
          enableExpanding
          enableExpandAll
          enablePinning
          initialState={{
            expanded: true,
            // 添加mrt-row-expand到左侧固定列表
            columnPinning: { left: ["mrt-row-expand", "tasks"] },
          }}
          positionExpandColumn={"first"}
          enableStickyFooter
        />
      </CustomPaper>
    </React.Fragment>
  );
};

原理说明 #

Material React Table的展开列是框架自动生成的特殊列，它的accessorKey默认是mrt-row-expand，不会出现在你自定义的columns数组里。之前只固定了tasks列，没有把这个内置列加入固定列表，所以展开列无法跟随固定。

加入后，框架会同时将展开列和tasks列固定在最左侧，且保持positionExpandColumn="first"的设置让展开列排在tasks列前面。

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