Next.js Discord

Discord Forum

Trouble Implementing Column Filtering in TanStack/shadcnUI React Table

Unanswered
Miniature Schnauzer posted this in #help-forum
Open in Discord
Miniature SchnauzerOP
I'm currently working on a project using TanStack/shadcnUI React Table for a data grid with filtering capabilities. However, I've encountered an issue where the column filter doesn't seem to function as expected. Despite setting the filter, no results are displayed when they should be.

The filter state shows that the filter is being set correctly, but the table does not display any filtered results.

Could someone help me identify what I might be doing wrong or missing in my implementation to get the filtering to work to work properly?

I was following this documentation: https://ui.shadcn.com/docs/components/data-table#filtering

2 Replies

@Miniature Schnauzer I'm currently working on a project using TanStack/shadcnUI React Table for a data grid with filtering capabilities. However, I've encountered an issue where the column filter doesn't seem to function as expected. Despite setting the filter, no results are displayed when they should be. The filter state shows that the filter is being set correctly, but the table does not display any filtered results. Could someone help me identify what I might be doing wrong or missing in my implementation to get the filtering to work to work properly? I was following this documentation: https://ui.shadcn.com/docs/components/data-table#filtering
Miniature SchnauzerOP
Here's the relevant part of my code setup:

DataTable Component (data-table.tsx):
"use client";
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 >
      <Card>
        <CardHeader>
          <h2 >Subscripciones</h2>
          <p >
            Administra tus subscripciones y observa el precio total.
          </p>
        </CardHeader>
        <CardContent>
          <div >
            <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>
           Table CODE 
          </Table>
        </CardContent>
        <CardFooter >
        </CardFooter>
      </Card>
    </div>
  );
}
@Miniature Schnauzer Here's the relevant part of my code setup: **DataTable Component (`data-table.tsx`):** javascript "use client"; 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 > <Card> <CardHeader> <h2 >Subscripciones</h2> <p > Administra tus subscripciones y observa el precio total. </p> </CardHeader> <CardContent> <div > <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> Table CODE </Table> </CardContent> <CardFooter > </CardFooter> </Card> </div> ); }
Miniature SchnauzerOP
Column Definitions (columns.tsx):

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


Issue:
Even when I hardcode "Netflix" into the row data, filtering for "Netflix" yields no results. Here are the console logs when setting the filter:

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