TanStack Table 8：如何访问数据模型中的嵌套数组并渲染

你可以通过给 columnHelper.accessor 传入自定义函数，直接在函数内对嵌套的 categories 数组做映射处理，提取分类名称并组合展示。以下是两种常用实现方式：

方式1：返回拼接字符串（适合简单展示） #

如果只需要用分隔符将分类名称串联显示，可直接在 accessor 函数里完成映射与拼接：

const columns = [
  // 其他列定义...
  columnHelper.accessor((row) => row.categories.map(cat => cat.name).join(', '), {
    id: 'categories', // 必须指定id，因accessor为函数而非字符串路径
    header: '分类',
  }),
];

方式2：返回JSX元素（适合带样式的复杂渲染） #

在React等支持JSX的环境中，若要渲染带样式的分类标签，可选择直接在accessor返回JSX，或更灵活地在cell.render中处理（保留原始数据用于后续操作）：

直接在accessor返回JSX #

const columns = [
  columnHelper.accessor((row) => (
    <div className="category-list">
      {row.categories.map((category) => (
        <span key={category.slug} className="category-tag">
          {category.name}
        </span>
      ))}
    </div>
  ), {
    id: 'categories',
    header: '分类',
  }),
];

在cell.render中处理（更灵活） #

若需保留原始categories数据用于排序、过滤等操作，建议将accessor指向原始字段，再在cell.render中处理渲染逻辑：

const columns = [
  columnHelper.accessor('categories', {
    id: 'categories',
    header: '分类',
    cell: ({ row }) => (
      <div className="category-list">
        {row.original.categories.map((category) => (
          <span key={category.slug} className="category-tag">
            {category.name}
          </span>
        ))}
      </div>
    ),
  }),
];

注意：无论哪种方式，都要给列指定id属性——当accessor为函数时，TanStack Table无法自动生成唯一列标识，显式指定id可避免列的key冲突问题。

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