使用TanStack Table与shadcn时flexRender无法渲染表格单元格内容

我尝试用React和shadcn构建表格，但表格单元格没有内容显示。将flexRender相关代码替换为静态文本（比如"test"）后，表格能正常显示内容，推测问题出在flexRender的使用部分。

以下是我的组件实现代码：

import { ColumnDef, flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
interface DataTableProps<TData, TValue> { columns: ColumnDef<TData, TValue>[]; data: TData[]; }
function Checks<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
  const table = useReactTable({ data, columns, getCoreRowModel: getCoreRowModel() });
  return (
    <div className="rounded-md border">
      <Table>
        <TableHeader>
          {table.getHeaderGroups().map((headerGroup) => (
            <TableRow key={headerGroup.id}>
              {headerGroup.headers.map((header) => {
                return (
                  <TableHead key={header.id}>
                    {flexRender(header.column.columnDef.header, header.getContext())}
                  </TableHead>
                );
              })}
            </TableRow>
          ))}
        </TableHeader>
        <TableBody>
          {table.getRowModel().rows?.length ? (
            table.getRowModel().rows.map((row) => (
              <TableRow key={row.id} //data-state={row.getIsSelected() && "selected"}
              >
                {row.getVisibleCells().map((cell) => (
                  <TableCell key={cell.id}>
                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
                  </TableCell>
                ))}
              </TableRow>
            ))
          ) : (
            <TableRow>
              <TableCell colSpan={columns.length} className="h-24 text-center">
                No results.
              </TableCell>
            </TableRow>
          )}
        </TableBody>
      </Table>
    </div>
  );
}
export default Checks;

解决方案 #

1. 修正flexRender的调用方式 #

问题出在直接访问columnDef.header和columnDef.cell，TanStack Table提供了更可靠的renderHeader和renderCell属性来获取渲染内容。修改代码如下：

表头部分修改：

<TableHead key={header.id}>
  {flexRender(header.column.renderHeader, header.getContext())}
</TableHead>

单元格部分修改：

<TableCell key={cell.id}>
  {flexRender(cell.column.renderCell, cell.getContext())}
</TableCell>

2. 确保columns定义正确 #

检查传入Checks组件的columns数组，确保每个ColumnDef的配置符合要求：

• 用accessorKey对应数据中的字段名，或者用accessorFn自定义数据获取逻辑
• header可以是静态字符串或渲染函数
• cell需要返回要显示的内容

示例columns定义：

interface User {
  id: number;
  name: string;
  email: string;
}

const columns: ColumnDef<User>[] = [
  {
    accessorKey: 'id',
    header: 'ID',
  },
  {
    accessorKey: 'name',
    header: '姓名',
    cell: ({ row }) => <span className="font-medium">{row.original.name}</span>,
  },
  {
    accessorKey: 'email',
    header: '邮箱',
  },
];

完成以上修改后，表格应该能正常渲染单元格内容。

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