如何在@tanstack/react-table中合并指定表头

1. 修改列定义，将需要合并的表头归为同一组 #

要实现特定表头的合并，核心是通过columnHelper.group()将目标列包裹在同一个分组下，@tanstack/react-table会自动计算该分组表头的colSpan值。

修改后的列配置代码如下：

import { createColumnHelper } from '@tanstack/react-table';
import type { ColumnDef } from '@tanstack/react-table';

type Data = {
  검수: string;
  시도명: string;
  시군구명: string;
  읍면동명: string;
  합계: { 계: number; 남: number; 여: number };
  '10대': { 계: number; 남: number; 여: number };
  // Add dummy data for other groups
};

const columnHelper = createColumnHelper<Data>();

const columns: ColumnDef<Data, any>[] = [
  // 将需要合并的前四列放入同一个分组，自定义合并后的表头文本
  columnHelper.group({
    header: '기본정보',
    columns: [
      columnHelper.accessor('검수', {
        header: '검수',
        size: 50,
      }),
      columnHelper.accessor('시도명', {
        header: '시도명',
        size: 100,
      }),
      columnHelper.accessor('시군구명', {
        header: '시군구명',
        size: 100,
      }),
      columnHelper.accessor('읍면동명', {
        header: '읍면동명',
        size: 100,
      }),
    ],
  }),
  columnHelper.group({
    header: '합계',
    columns: [
      columnHelper.accessor('합계.계', {
        header: '계',
        size: 100,
      }),
      columnHelper.accessor('합계.남', {
        header: '남',
        size: 100,
      }),
      columnHelper.accessor('합계.여', {
        header: '여',
        size: 100,
      }),
    ],
  }),
  // Repeat for other groups
];

2. 表头组件复用现有逻辑即可 #

你当前的表头组件已经正确处理了分组表头的colSpan属性（header.colSpan由@tanstack/react-table自动计算，等于分组下子列的数量），直接复用即可，若需微调样式可修改className：

<thead className="bg-[#F7F7F8]">
  {table.getHeaderGroups().map((headerGroup) => (
    <tr key={headerGroup.id}>
      {headerGroup.headers.map((header) => (
        <th
          key={header.id}
          colSpan={header.colSpan}
          className={`border border-[#F1F1F3] p-2 text-base font-semibold text-[#171719] text-center`}
          style={{ width: header.column.columnDef.size ? `${header.getSize()}px` : 'auto' }}
        >
          {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
        </th>
      ))}
    </tr>
  ))}
</thead>

原理说明 #

• 使用columnHelper.group()定义列分组时，@tanstack/react-table会自动生成对应表头组，并计算分组表头的colSpan值（即分组内子列的总数）。
• 表头组件通过header.colSpan将合并属性传递给<th>标签，浏览器会自动渲染合并后的单元格。

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