如何在Material UI Table的Alert List列下添加三个动态子标题

实现思路 #

核心思路是扩展表头配置项的结构，让配置支持嵌套子列，再根据配置自动计算rowSpan、colSpan属性，不需要硬编码合并规则，适配动态表头场景。

具体改造步骤 #

• 第一步：改造headCells配置，新增子列配置字段
  给需要添加子标题的列新增children属性，存储子列的配置信息，普通列保持原有结构即可：

const headCells = [
  {
    id: "name",
    numeric: false,
    disablePadding: true,
    label: "Dessert (100g serving)"
  },
  { 
    id: "list", 
    numeric: true, 
    disablePadding: false, 
    label: "Alert List",
    // 新增子列配置，可根据需求调整数量和字段
    children: [
      { id: "alertLevel", label: "告警等级", numeric: false },
      { id: "alertCount", label: "告警数量", numeric: true },
      { id: "alertTime", label: "最近告警时间", numeric: false }
    ]
  },
  { id: "fat", numeric: true, disablePadding: false, label: "Fat (g)" },
  { id: "carbs", numeric: true, disablePadding: false, label: "Carbs (g)" },
  { id: "protein", numeric: true, disablePadding: false, label: "Protein (g)" }
];

• 第二步：改造EnhancedTableHead组件，自动渲染多级表头
  分别处理第一层父表头、第二层子表头的渲染逻辑，自动计算单元格合并属性：

function EnhancedTableHead(props) {
  const {
    classes,
    order,
    orderBy,
    onRequestSort
  } = props;
  const createSortHandler = (property) => (event) => {
    onRequestSort(event, property);
  };
  // 拍平所有要渲染的列（父列+子列），用于子表头和表格内容渲染
  const allRenderColumns = headCells.flatMap(col => col.children || [col]);

  return (
    <TableHead>
      {/* 第一层父表头 */}
      <TableRow>
        {headCells.map((headCell) => (
          <TableCell
            key={headCell.id}
            padding={headCell.disablePadding ? "none" : "normal"}
            sortDirection={orderBy === headCell.id ? order : false}
            // 有子列的父列跨列数等于子列数量，否则为1
            colSpan={headCell.children?.length || 1}
            // 有子列的父列只占1行，普通列占2行和子表头高度对齐
            rowSpan={headCell.children ? 1 : 2}
          >
            <TableSortLabel
              active={orderBy === headCell.id}
              direction={orderBy === headCell.id ? order : "asc"}
              onClick={createSortHandler(headCell.id)}
            >
              {headCell.label}
              {orderBy === headCell.id ? (
                <span className={classes.visuallyHidden}>
                  {order === "desc" ? "sorted descending" : "sorted ascending"}
                </span>
              ) : null}
            </TableSortLabel>
          </TableCell>
        ))}
      </TableRow>
      {/* 第二层子表头：仅当存在带children的列时才渲染 */}
      {headCells.some(col => col.children) && <TableRow>
        {allRenderColumns.filter(col => headCells.every(parent => parent.id !== col.id)).map((childCell) => (
          <TableCell
            key={childCell.id}
            align={childCell.numeric ? "right" : "left"}
            padding={childCell.disablePadding ? "none" : "normal"}
          >
            {childCell.label}
          </TableCell>
        ))}
      </TableRow>}
    </TableHead>
  );
}

• 第三步：改造行数据和表格内容渲染逻辑
  调整行数据结构匹配子列id，渲染表格内容时遍历拍平后的列集合：

// 调整行数据生成函数，匹配子列的id字段
function createData(name, alertLevel, alertCount, alertTime, fat, carbs, protein) {
  return { name, alertLevel, alertCount, alertTime, fat, carbs, protein };
}

const rows = [
  createData("Cupcake", "高危", 3, "2024-05-01", 3.7, 67, 4.3),
  createData("Donut", "中危", 1, "2024-05-03", 25.0, 51, 4.9),
  // 其余行数据按相同结构补充即可
];

修改EnhancedTable组件内TableBody的列遍历逻辑：

// 和表头逻辑保持一致，先拍平所有要渲染的列
const allRenderColumns = headCells.flatMap(col => col.children || [col]);

// 原有TableBody内的遍历逻辑替换为allRenderColumns
<TableBody>
  {stableSort(rows, getComparator(order, orderBy))
    .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
    .map((row, index) => {
      const isItemSelected = isSelected(row.name);

      return (
        <TableRow
          hover
          onClick={(event) => handleClick(event, row.name)}
          role="checkbox"
          aria-checked={isItemSelected}
          tabIndex={-1}
          key={row.name}
          selected={isItemSelected}
        >
          {allRenderColumns.map((column) => {
            const value = row[column.id];
            return (
              <TableCell key={column.id} align={column.numeric ? "right" : "left"}>
                {column.format && typeof value === "number"
                  ? column.format(value)
                  : value}
              </TableCell>
            );
          })}
        </TableRow>
      );
    })}
</TableBody>

方案优势 #

• 完全适配动态表头场景：只需要修改headCells配置，给对应列加children属性即可自动生成多级表头，无需修改组件渲染逻辑
• 兼容原有配置：没有子列的普通列不需要调整任何配置，原有排序、分页等功能完全不受影响
• 扩展性强：任意列需要添加子标题时都可以通过加children配置实现，支持多个列同时配置多级表头

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