如何为mui-datatables配置支持跨列的多行表头

MUIDataTable 默认只渲染单行表头，要实现多行+跨列（colspan）效果不用改源码，直接用组件暴露的自定义表头接口就能做，对新手来说门槛不高，按下面步骤走就行：

• 先梳理清楚表头层级对应关系
  先把你要的表头结构捋明白：哪几行是分类大表头、哪个单元格跨几列、哪一行是和数据字段一一对应的实际列头。核心规则：每一行所有单元格的colspan值加总，必须和你传入表格的总列数完全相等，不然一定会出现列错位。比如总共有5列数据，第一行两个单元格分别设colSpan={2}、colSpan={3}，加起来刚好5，就不会错。如果有单元格要纵向跨多行，加rowspan属性就行，计算规则和colspan一致。

• 按最底层数据列配置columns数组
  不用把跨列的大表头写到columns配置里，你就按最靠近数据行的那一层表头（也就是没有跨列、和数据字段一一对应的那一行）正常写columns配置就行，每个列对应好字段名、展示名、对齐方式、排序规则这些属性。

• 替换默认表头组件渲染多行结构
  利用MUIDataTable配置项里的components字段，传入自定义的TableHead组件，直接写你要的多行表头结构就行，参考代码：

import MUIDataTable from "mui-datatables";
import { TableHead, TableRow, TableCell } from "@mui/material";

// 自定义多行表头
const MultiLineTableHead = (props) => {
  // props里能拿到你之前配置的columns、排序状态等所有表头相关属性
  const { columns } = props;
  return (
    <TableHead>
      {/* 第一行：跨列分类表头 */}
      <TableRow>
        <TableCell colSpan={2} align="center" sx={{ fontWeight: 700, bgcolor: '#f0f4ff' }}>
          用户基础信息
        </TableCell>
        <TableCell colSpan={3} align="center" sx={{ fontWeight: 700, bgcolor: '#f0f4ff' }}>
          账号运营数据
        </TableCell>
      </TableRow>
      {/* 第二行：和数据列一一对应的实际列头 */}
      <TableRow>
        {columns.map((col) => (
          <TableCell 
            key={col.name} 
            align={col.align || 'left'}
            sx={{ fontWeight: 500 }}
          >
            {col.label}
          </TableCell>
        ))}
      </TableRow>
    </TableHead>
  )
};

// 表格配置项里注册自定义表头
const tableOptions = {
  components: {
    TableHead: MultiLineTableHead
  },
  // 其余分页、筛选、排序等配置正常写，不受影响
};

// 正常渲染表格，传入columns、data、options即可

• 新手注意事项
  • 如果要做3层及以上的表头，逻辑完全一致，多嵌套一层TableRow写对应跨列单元格就行，只要遵守colSpan/rowspan的加总规则就不会错位。
  • 跨列的大分类表头建议只做展示用，不要绑定排序、筛选这类交互，这类交互直接绑定在最底层和数据列一一对应的表头上就行，不然逻辑很容易写乱。
  • 如果你用的是4.0以下的旧版本mui-datatables，components替换不生效的话，可以换成在options里配置customHeadRender属性，返回的JSX结构和上面写的自定义表头完全一样。
  • 刚开始调试的时候建议先给每列设固定宽度，等结构完全调通再改成自适应，能省很多错位排查的时间。

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