Documentation about filters is not very helpful. Examples are not enough, and often overcomplicated

[licarth]

Hi, first of all thank you for the great library, I'm convinced this library is the right approach to the problem of rendering tables (I use it in React). I used to use v7 in a couple of projects.

However, I'm new to v8 and I wanted to add a simple boolean filter in v8 on a column, the example I get is a 436-line piece of code

The guide for filters looks like this:

Maybe it's me, maybe I don't look at the right place, maybe I'm not having a good day, but I'm lost.

I would expect a simple, let's say 30 line example with a filter on a boolean value, and another one with some text value.

setFilter()seems to have disappeared between v7 and v8, I could not find any mention of it in the migrating to v8 guide.

I've been struggling for 30 minutes for that basic feature, and I am wondering if I'm the only one.

[Kubonka]

I struggled with the same problem of filtering a boolean too.
I hope this example is useful for your case.
using a datamodel like this:

{
    date: "20/01/2020",
    to: "John Doe",
    id: 33,
    total: 150,
    accepted: true,
}

The "accepted" property is the one that we want to filter in the table.
So in the columns definition is something like this:

export const columns: ColumnDef< YOUR-TYPE >[] = [
  {
    id: "date",
    accessorKey: "date",
    //..
  },
  {
    accessorKey: "to",
    //..
  },  
  ..
  ..
  {
    id: "accepted",
    accessorKey: "accepted",    <-- THIS IS THE BOOLEAN COLUMN
  },
];

Then in the table you will have something like this:
(the ones with the "important" comment are the relevant to your filtering problem)

import {
  ColumnDef,
  Row,  
  flexRender,
  getCoreRowModel,
  ColumnFiltersState,   // <- important
  useReactTable,
  RowData,  
  getFilteredRowModel,   // <- important  
} from "@tanstack/react-table";

interface DataTableProps<TData, TValue> {
  columns: ColumnDef<TData, TValue>[];
  data: TData[];
}

export function DataTable<TData extends YOUR-TYPE, TValue>({
  columns,
  data,
}: DataTableProps<TData, TValue>) {
  
  const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
    [],
  );                                                  //<- important
  
  const table = useReactTable({
    data,
    columns,    
    getCoreRowModel: getCoreRowModel(),    
    onColumnFiltersChange: setColumnFilters,          //<- important
    getFilteredRowModel: getFilteredRowModel(),       //<- important    
    state: {      
      columnFilters,                                  //<- important      
    },    
  });
  return (
    <div>
      <div className="m-2 flex flex-row items-center gap-2 pt-2">        
        <Select
          onValueChange={(value) => {            
            if (value === "all")
              table.getColumn("accepted")?.setFilterValue(null);
            if (value === "true")
              table.getColumn("accepted")?.setFilterValue(true);
            if (value === "false")
              table.getColumn("accepted")?.setFilterValue(false);
          }}
        >
          <SelectTrigger className="w-[220px]">
            <SelectValue placeholder="Status" />
          </SelectTrigger>
          <SelectContent>
            <SelectGroup>
              <SelectItem value="all">Todos</SelectItem>
              <SelectItem value="true">Aceptado</SelectItem>
              <SelectItem value="false">Pendiente</SelectItem>
            </SelectGroup>
          </SelectContent>
        </Select>
      </div>
      <div className="m-2 h-full rounded-md border">
        <Table>
          //..
          //..
        </Table>
      </div>      
    </div>
  );
}

In this example i'm using a SELECT with 3 options and i want to filter TRUE , FALSE and ALL values in the "accepted" column.
The key part is in the onChange -> table.getColumn("accepted")?.setFilterValue(true);
You need to pass a boolean value true , false or null (to reset). So maybe you need to convert the strings to boolean values and do some logic there.
Good luck !

[amirstepT]

Hi, first of all thank you for the great library, I'm convinced this library is the right approach to the problem of rendering tables (I use it in React). I used to use v7 in a couple of projects.

However, I'm new to v8 and I wanted to add a simple boolean filter in v8 on a column, the example I get is a 436-line piece of code

Maybe it's me, maybe I don't look at the right place, maybe I'm not having a good day, but I'm lost.

I would expect a simple, let's say 30 line example with a filter on a boolean value, and another one with some text value.

setFilter()seems to have disappeared between v7 and v8, I could not find any mention of it in the migrating to v8 guide.

I've been struggling for 30 minutes for that basic feature, and I am wondering if I'm the only one.

I agree. I think filtering documentation needs improvement -- a simple guide would be very helpful to get folks started. There is a simpler example of filtering in the pagination example (here). However, that created even more confusion for me because the example sets filtering values -- for a string and for a min/max tuple -- but there was no filterFn specified anywhere, and there was no mention of a default filterFn in the documentation. It took me a while but I finally found the source code below (here). It indicates a default being applied when setFilterValue is called -- which I assumed was the case but without clear documentation, this was very confusing.

    column.setFilterValue = value => {
      table.setColumnFilters(old => {
        const filterFn = column.getFilterFn()                                // <----

and

column.getAutoFilterFn = () => {                                // <----
      const firstRow = table.getCoreRowModel().flatRows[0]

      const value = firstRow?.getValue(column.id)

      if (typeof value === 'string') {
        return filterFns.includesString
      }

      if (typeof value === 'number') {
        return filterFns.inNumberRange
      }

      if (typeof value === 'boolean') {
        return filterFns.equals
      }

      if (value !== null && typeof value === 'object') {
        return filterFns.equals
      }

      if (Array.isArray(value)) {
        return filterFns.arrIncludes
      }

      return filterFns.weakEquals
    }
    column.getFilterFn = () => {                                // <----
      return isFunction(column.columnDef.filterFn)
        ? column.columnDef.filterFn
        : column.columnDef.filterFn === 'auto'
          ? column.getAutoFilterFn()                                 // <----
          : // @ts-ignore
            table.options.filterFns?.[column.columnDef.filterFn as string] ??
            filterFns[column.columnDef.filterFn as BuiltInFilterFn]
    }

[KevinVandy]

Does anyone want to help? I have been writing about 2 new guides per week. They take time. I'll probably get around to the filter docs in a couple weeks.

[JackHammer29]

I'm not clued up enough to help I'm afraid - I'm really curious about the boolean side of filtering

[PeterKemperMTI]

@KevinVandy Any chance I could get an example of using the inNumberRange filter type? Im my use case I want it to work on a column with id of amount and I have two relevant filters named amountMin and amountMax that I have been trying to convert to lower and upper bounds for the value in the amount column, to no avail. Happy to get any official or working examples, thank you!

[brianmontanaocient]

Same, but the nice thing is the function is nicely named:

table/packages/table-core/src/filterFns.ts

Line 95 in 6d89e41

const inNumberRange: FilterFn<any> = (

const inNumberRange: FilterFn<any> = (
  row,
  columnId: string,
  filterValue: [number, number]
) => {
  let [min, max] = filterValue

  const rowValue = row.getValue<number>(columnId)
  return rowValue >= min && rowValue <= max
}

So if your object in the filter is {id: 'range': value: [1, 10]} it should grab values in that range.

[masewo]

Yea, the documentation is quite poor but I got the inNumberRange filter finally working:

...
accessorKey: "count",
filterFn: "inNumberRange"
...

const column = table.getColumn("count");
const filterValue = column?.getFilterValue();
const isSet = filterValue !== undefined;
column?.setFilterValue([1, 10]); // min 1, max 10: 1 <= count <= 10
column?.setFilterValue(undefined); // reset