Antd Table按字段分组并插入自定义样式行的实现方案咨询

嘿，我之前刚好碰到过一模一样的需求，折腾了好一阵终于找到完美的解决办法——完全不用拆成多个表格，既能自定义分组行样式，还能保证列宽同步，完美解决你之前的痛点，跟你分享下：

核心思路 #

我们可以通过预处理数据源，把分组标题行插入到数据列表中，再利用Antd Table的components属性自定义行渲染，区分分组行和普通数据行来应用不同样式。这样整个表格还是一个完整的Antd Table，列宽、表头都能保持统一，不用额外折腾。

具体步骤 #

1. 预处理数据源，插入分组行

先把原始数据按目标字段分组，然后给每个组添加一个标记为分组类型的行，再把分组行和对应的数据行合并成新的数据源。这里我用原生的Object.groupBy（低版本环境可以用lodash的groupBy替代）：

// 假设你的原始数据是这样的
const rawData = [
  { id: 1, department: '研发部', name: '张三', salary: 20000 },
  { id: 2, department: '研发部', name: '李四', salary: 18000 },
  { id: 3, department: '市场部', name: '王五', salary: 15000 },
  { id: 4, department: '市场部', name: '赵六', salary: 16000 },
];

// 按department分组，构造带分组行的新数据源
const groupedData = [];
const grouped = Object.groupBy(rawData, item => item.department);

Object.entries(grouped).forEach(([dept, employees]) => {
  // 添加分组标题行，标记type为'group'方便后续识别
  groupedData.push({
    key: `group-${dept}`,
    type: 'group',
    department: dept,
    // 其他字段可以留空，不影响渲染
  });
  // 添加该组的所有数据行，记得给每个行加唯一key
  groupedData.push(...employees.map(emp => ({ ...emp, key: emp.id })));
});

2. 自定义Table的行组件，渲染分组样式

通过Antd Table的components属性重写tr组件，根据行数据的type判断是分组行还是普通行，给分组行设置自定义样式（比如跨列、背景色、加粗等）：

import { Table } from 'antd';

// 自定义行组件
const CustomTableRow = ({ record, ...restProps }) => {
  if (record.type === 'group') {
    // 分组行：跨所有列，设置你想要的样式
    return (
      <tr {...restProps} style={{ 
        backgroundColor: '#f0f2f5', 
        fontWeight: 600,
        padding: '8px 16px',
        borderBottom: '1px solid #d9d9d9'
      }}>
        {/* colSpan要和你的表格列数一致 */}
        <td colSpan={3}>{record.department}</td>
      </tr>
    );
  }
  // 普通数据行，正常渲染即可
  return <tr {...restProps} />;
};

// 渲染Table
export default function GroupedTable() {
  const columns = [
    { title: '姓名', dataIndex: 'name', key: 'name' },
    { title: '部门', dataIndex: 'department', key: 'department' },
    { title: '薪资', dataIndex: 'salary', key: 'salary' },
  ];

  return (
    <Table
      dataSource={groupedData}
      columns={columns}
      components={{ tr: CustomTableRow }}
      // 其他Table属性正常设置，比如pagination、bordered等
    />
  );
}

额外优化点 #

• 如果需要固定列，这个方案完全兼容，所有行都在同一个Table里，固定列逻辑不受影响；
• 要是需要排序/筛选，记得在排序/筛选完成后，重新执行分组逻辑构造新的groupedData；
• 如果是可编辑表格，在编辑逻辑里判断record.type !== 'group'即可避免分组行被编辑。

这个方法我在项目里用过好几次，既满足了自定义分组样式的需求，又保留了Antd Table的所有原生功能，比拆成多个表格省心太多啦！

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