在 TanStack/shadcnUI React Table 中实现列过滤时遇到问题

Question

我目前正在开发一个项目，使用 TanStack/shadcnUI React Table 作为具有过滤功能的数据网格。但是，我遇到了一个问题，列过滤器似乎没有按预期运行。尽管设置了过滤器，但应该显示的结果却没有显示。

这是我的代码设置的相关部分：

数据表组件（

data-table.tsx

）：

"use client";

// Define the subscription data type based on the columns created
interface TablaSubscripcionesProps {
  columns: ColumnDef<Views<"user_specific_popular_recurrent_gastos">>[];
  data: Views<"user_specific_popular_recurrent_gastos">[];
}

export function TablaSubscripciones({
  columns,
  data,
}: TablaSubscripcionesProps) {
  const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    onColumnFiltersChange: setColumnFilters,
    getFilteredRowModel: getFilteredRowModel(),
    state: {
      columnFilters,
    },
  });
  const { totalPrice, taxDetails, totalPriceSinImpuestos } =
    useSubscriptionData();
  // Convert taxDetails object to an array for easy mapping
  const taxEntries = Object.entries(taxDetails);
  // Log the current filter state
  console.log("Current filter state:", table.getState().columnFilters);
  return (
    <div className="rounded-md border">
      <Card>
        <CardHeader className=" p-4">
          <h2 className="text-lg font-bold">Subscripciones</h2>
          <p className="text-sm ">
            Administra tus subscripciones y observa el precio total.
          </p>
        </CardHeader>
        <CardContent>
          <div className="flex items-center py-4">
            <Input
              placeholder="Filter services by name"
              value={
                (table.getColumn("serviceName")?.getFilterValue() as string) ??
                ""
              }
              onChange={(event) => {
                console.log("Setting filter value to:", event.target.value); // Log the value being set

                table
                  .getColumn("serviceName")
                  ?.setFilterValue(event.target.value);
              }}
              className="max-w-sm"
            />
          </div>
          <Table>
            <TableHeader>
              {table.getHeaderGroups().map((headerGroup) => (
                <TableRow key={headerGroup.id}>
                  {headerGroup.headers.map((header) => (
                    <TableHead key={header.id}>
                      {header.isPlaceholder
                        ? null
                        : flexRender(
                            header.column.columnDef.header,
                            header.getContext()
                          )}
                    </TableHead>
                  ))}
                </TableRow>
              ))}
            </TableHeader>
            <TableBody>
              {table.getRowModel().rows.length > 0 ? (
                table.getRowModel().rows.map((row) => (
                  <TableRow key={row.id}>
                    {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>
        </CardContent>
        <CardFooter className="flex flex-col items-start p-4 bg-gray-100 dark:bg-gray-800">
        </CardFooter>
      </Card>
    </div>
  );
}

列定义 (

columns.tsx

):

  {
    accessorKey: "serviceName",
    header: () => "Service Name",
    cell: ({ row }) => (
      <div className="font-medium">
        Netlfix{row.original.service_name}
      </div>
    ),
  }

问题： 即使我将“Netflix”硬编码到行数据中，过滤“Netflix”也不会产生任何结果。以下是设置过滤器时的控制台日志：

Setting filter value to: Netflix
Current filter state: [{id: 'serviceName', value: 'Netflix'}]

过滤器状态显示过滤器设置正确，但表格不显示任何过滤结果。

有人可以帮助我确定我在实现中可能做错或遗漏的地方，以使过滤正常工作吗？

我正在关注此文档：https://ui.shadcn.com/docs/components/data-table#filtering

Answer 1

我发现问题在于accessorKey的名称必须与数据对象中的属性名称完全匹配，例如这里的serviceName和type。这可以确保 React Table 正确地将每一列链接到其相应的数据字段。