如何在TanStack React Table中通过两个Accessor Keys创建列？

数据老陈

2026-7-19

在TanStack React Table中合并两个字段创建列的正确方法

你需要创建名为Every的列，合并recurringDigit和recurringString字段，原代码的问题在于accessorFn的参数定义错误——它应该接收当前行的完整数据对象，而非单独的字符串参数，且返回值的类型定义也不符合语法要求。

以下是两种正确的实现方式：

方式1：使用`accessorFn`处理数据（适用于需要基于合并后的数据进行排序、过滤的场景）

import { ColumnDef } from "@tanstack/react-table";
import { Reminder } from "@prisma/client";

export const columns: ColumnDef<
  Omit<Reminder, "updatedAt" | "createdAt" | "id" | "userId"> & {
    recurring: boolean;
  }
>[] = [
  {
    header: 'Every',
    accessorFn: (row) => {
      // 处理字段可能为null的情况，可根据需求调整拼接逻辑
      const contentParts = [];
      if (row.recurringDigit) contentParts.push(row.recurringDigit);
      if (row.recurringString) contentParts.push(row.recurringString);
      return contentParts.join(' ');
    },
  },
];

方式2：使用`cell`渲染函数（仅需展示合并内容时更直接，支持返回JSX）

import { ColumnDef } from "@tanstack/react-table";
import { Reminder } from "@prisma/client";

export const columns: ColumnDef<
  Omit<Reminder, "updatedAt" | "createdAt" | "id" | "userId"> & {
    recurring: boolean;
  }
>[] = [
  {
    header: 'Every',
    cell: ({ row }) => {
      const contentParts = [];
      if (row.original.recurringDigit) contentParts.push(row.original.recurringDigit);
      if (row.original.recurringString) contentParts.push(row.original.recurringString);
      return <span>{contentParts.join(' ')}</span>;
    },
  },
];