How can I add filters like (equals, starts with, ...)?

[NicolasCassunde]

Hi, how can I create filters such as equals, contains, starts with, ends with, between, greater than, greater than or equal to, less than, and less than or equal to?"

like this:

Does anyone have an example repository? The docs are not helpful.

[lamhungypl]

Table Options - FilterFns

declare module '@tanstack/table-core' {
  interface FilterFns {
    myCustomFilter: FilterFn<unknown>
  }
}

const column = columnHelper.data('key', {
  filterFn: 'myCustomFilter',
})

const table = useReactTable({
  columns: [column],
  filterFns: {
    myCustomFilter: (rows, columnIds, filterValue) => {
      // return the filtered rows
    },
  },
})

Map your filters to accordingly functions then pass them to useTable hook options.

Extra steps for TS users: extends table-core module

Then you may need some custom api like table.setColumnFilterFns

[joshAntoniuk]

Can anyone point me in the right direction for this? What would the filter functions look like?

[joshAntoniuk]

I have figured this out. I did this by having a filters object like this (mine is a list for multiple filters):

[
    {
        "id": , // the attribute you want to filter
        "operator": , // starts with, ends with etc. 
        "value": , // the value to filter by, ex 'A'
    }
]

Then have a function which returns either true or false for the filter:

filterData(data) {
    let bool;
    switch (filter.operator) {
        case 'Contains':
          bool = data[filter.id].toLowerCase().includes(filter.value.toLowerCase());
          break;
        case 'Does not contain':
          bool = !data[filter.id].toLowerCase().includes(filter.value.toLowerCase());
          break;
        case 'Equals':
          bool = data[filter.id].toLowerCase() === filter.value.toLowerCase();
          break;
        case 'Does not equal':
          bool = data[filter.id].toLowerCase() !== filter.value.toLowerCase();
          break;
        default:
          bool = false;

    return bool;
}

And finally, mark that function as the filterFn in the column:

filterFn: (e) => {
    return filterData(e.original);
 // your data structure might look different, but that was how I was able to access the value of each cell in the column
 // you can console.log(e) to see what yours looks like
},

[NarenderDhamarlapally]

I am working Material react table . If code is good please give one like

  {
    accessorKey: "businessGroupName",
    header: "Business Group Name",
    filterFn: "contains",
    columnFilterModeOptions: ["fuzzy", "contains", "startsWith"],
  },

//filterFn is mandatory when page load it set contains to that field

const [columnFilterFns, setColumnFilterFns] = useState(
Object.fromEntries(
columns.map(({ accessorKey, filterFn }) => [accessorKey, filterFn])
)
);
onColumnFilterFnsChange: setColumnFilterFns,

---

onColumnFiltersChange: (updater) => {
const nextState = updater(columnFilters);
if (nextState.length > 0) {
const list = nextState.map((item) => {
const { id, value } = item;
const filterFn = columnFilterFns[id];
return {
id,
value,
operator: filterFn,
};
});

    setColumnFilters(list);
  } else {
    setColumnFilters([]);
  }
},




 state: {
  columnFilterFns,
  columnFilters,

},