Material React Table表头rowSpan设置无效问题求助

你直接替换components.Header的方式不符合Material React Table（MRT）的设计逻辑，MRT的表头是基于columns数组动态生成的，自定义整个Header组件会和内置的列渲染流程冲突，导致你的rowSpan设置不生效，还会和原columns配置的列重复渲染。下面是具体修复方案：

1. 正确配置分组表头（实现rowSpan效果） #

通过columns的嵌套配置来实现多层表头，外层列会自动实现rowSpan=2的效果，无需手动写rowSpan：

const columns = [
  {
    header: 'Material',
    accessorKey: 'approve', // 对应数据中的字段
  },
  {
    header: 'In',
    columns: [
      { header: 'Time', accessorKey: 'inTime' },
      { header: 'Date', accessorKey: 'inDate' },
    ],
  },
  {
    header: 'Out',
    columns: [
      { header: 'Time', accessorKey: 'outTime' },
      { header: 'Date', accessorKey: 'outDate' },
    ],
  },
  {
    header: 'Action',
    accessorKey: 'action',
  },
];

2. 修复Row组件的错误 #

你的Row组件存在两个明显错误：

• 参数名错误：应该用row而非datas
• 数据引用错误：要通过row.original获取当前行数据，不能直接用全局data

修改后的Row组件：

Row: ({ row }) => {
  return (
    <TableRow>
      <TableCell>{row.original.approve}</TableCell>
      <TableCell align="center">{row.original.inTime}</TableCell>
      <TableCell align="center">{row.original.inDate}</TableCell>
      <TableCell align="center">{row.original.outTime}</TableCell>
      <TableCell align="center">{row.original.outDate}</TableCell>
      <TableCell align="center">{row.original.action}</TableCell>
    </TableRow>
  );
},

3. 移除自定义Header组件 #

删除components.Header的配置，让MRT基于你上面配置的分组columns自动生成带rowSpan的表头，这样才能保证表头和数据列的对应关系，同时保留MRT的排序、过滤等内置功能。

完整修改后的代码 #

return (
  <div className="m-2">
    <MaterialReactTable
      columns={columns} // 使用上面配置的分组columns
      data={data}
      getRowId={(row) => row.phoneNumber}
      initialState={{ showColumnFilters: false }}
      manualFiltering
      manualPagination
      manualSorting
      muiToolbarAlertBannerProps={
        isError
          ? {
              color: "error",
              children: "Error loading data",
            }
          : undefined
      }
      onColumnFiltersChange={setColumnFilters}
      onGlobalFilterChange={setGlobalFilter}
      onPaginationChange={setPagination}
      onSortingChange={setSorting}
      rowCount={rowCount}
      components={{
        Row: ({ row }) => {
          return (
            <TableRow>
              <TableCell>{row.original.approve}</TableCell>
              <TableCell align="center">{row.original.inTime}</TableCell>
              <TableCell align="center">{row.original.inDate}</TableCell>
              <TableCell align="center">{row.original.outTime}</TableCell>
              <TableCell align="center">{row.original.outDate}</TableCell>
              <TableCell align="center">{row.original.action}</TableCell>
            </TableRow>
          );
        },
      }}
      state={{
        columnFilters,
        globalFilter,
        isLoading,
        pagination,
        showAlertBanner: isError,
        showProgressBars: isRefetching,
        sorting,
      }}
    />
  </div>
);

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