如何将状态及其设置器传递给TanStack Table的ColumnDef

需求背景 #

原本在DataTable组件中，需要通过判断列ID为details来单独渲染触发setCardOpen(true)的按钮，现在希望将cardOpen状态和setCardOpen设置器直接传递到ColumnDef的配置中，让details列的cell配置直接使用这些状态，无需在渲染逻辑中单独处理。

解决方案步骤 #

1. 扩展ColumnDef类型（可选但推荐）

为了让TypeScript识别自定义的状态参数，我们可以扩展ColumnDef类型，添加用于传递状态的meta字段：

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

// 扩展ColumnDef，支持自定义meta字段传递状态
type CustomColumnDef<TData> = ColumnDef<TData> & {
  meta?: {
    cardOpen?: boolean;
    setCardOpen?: (value: boolean) => void;
  };
};

2. 修改columns数组配置

更新details列的cell函数，从column.meta中获取setCardOpen并直接使用：

export const columns: CustomColumnDef<Dispute>[] = [
  {
    id: 'select',
    header: ({ table }) => (
      <Checkbox
        checked={table.getIsAllPageRowsSelected()}
        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
        aria-label='Select all'
      />
    ),
    cell: ({ row }) => (
      <Checkbox
        checked={row.getIsSelected()}
        onCheckedChange={(value) => row.toggleSelected(!!value)}
        aria-label='Select row'
      />
    ),
    enableSorting: false,
    enableHiding: false,
  },
  {
    id: 'details',
    cell: ({ column }) => {
      const { setCardOpen } = column.meta || {};
      return (
        <Button onClick={() => setCardOpen?.(true)}>
          <ArrowLeftFromLine />
        </Button>
      );
    },
  },
  // ...其他列配置
];

3. 在DataTable组件中注入状态到columns

在DataTable组件中，将cardOpen和setCardOpen注入到每个列的meta字段中，这样所有列都能访问到这些状态（按需使用）：

export function DataTable<TData, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
  const [sorting, setSorting] = React.useState<SortingState>([]);
  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>([]);
  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
  const [rowSelection, setRowSelection] = React.useState({});
  const [cardOpen, setCardOpen] = React.useState(false);

  // 给columns添加meta字段，注入状态
  const enhancedColumns = (columns as CustomColumnDef<TData>[]).map(col => ({
    ...col,
    meta: {
      ...col.meta,
      cardOpen,
      setCardOpen,
    },
  }));

  const table = useReactTable({
    data,
    columns: enhancedColumns,
    getCoreRowModel: getCoreRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    onSortingChange: setSorting,
    getSortedRowModel: getSortedRowModel(),
    onColumnFiltersChange: setColumnFilters,
    getFilteredRowModel: getFilteredRowModel(),
    onColumnVisibilityChange: setColumnVisibility,
    onRowSelectionChange: setRowSelection,
    state: {
      sorting,
      columnFilters,
      columnVisibility,
      rowSelection,
    },
  });

  // 渲染逻辑无需再单独判断details列，统一处理所有单元格
  return (
    // ...表格容器代码（省略）
    {table.getRowModel().rows.map(row => (
      <TableRow
        key={row.id}
        data-state={row.getIsSelected() && 'selected'}
        className='mat-row'
      >
        {row.getVisibleCells().map((cell) => (
          <TableCell key={cell.id}>
            {flexRender(
              cell.column.columnDef.cell,
              cell.getContext()
            )}
          </TableCell>
        ))}
      </TableRow>
    ))}
    // ...表格其他部分代码（省略）
  );
}

效果说明 #

通过上述改造，details列的cell配置可以直接访问到setCardOpen，无需在DataTable的渲染逻辑中单独判断列ID，实现了状态与列配置的解耦，代码结构更清晰。

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