Cell's filterFn never gets called

[SpadarShut]

Describe the bug

The filterFn prop of a cell definition never gets called.
My initial problem was that the filterFn's resolveFilterValue was never called, but in fact filterFn is just ignored.

Your minimal, reproducible example

https://codesandbox.io/p/sandbox/stupefied-water-3kcw7h?embed=1&file=%2Fsrc%2Fmain.tsx%3A52%2C18

Steps to reproduce

1 Create a basic table with a filterFn prop on a cell
2 Optionally add globalFilter
3 try to search

Expected behavior

As a user I expect filterFn to be called, but returning false from the fn of plain console.log/alert never gets executed.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

macOS

react-table version

8.9.3

TypeScript version

5.1.3

Additional context

No response

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[arnaugomez]

I am going to take a look at this and try to publish a fix. Can you assign it to me?

[arnaugomez]

After looking at the code and your example, I have found that it may not be a bug.
The filter function only gets called if there is a columnFilters property in the state object of the table, and this property contains a value that corresponds to the filter value of the column.

Check out the official filters example:
https://codesandbox.io/p/sandbox/github/tanstack/table/tree/main/examples/react/filters?embed=1&file=%2Fsrc%2Fmain.tsx%3A352%2C20-352%2C29

Should we close the issue or make changes to the documentation to explain it more clearly?

[SpadarShut]

@arnaugomez thanks for looking into the issue! If this is the intended behaviour, this should be documented I think. And also, what is then the intended way to transform cell value for (global) filters?

[arnaugomez]

@SpadarShut as I see it, the filter function filterFn is, along with the filters state, the correct way to filter the data.

I plan to issue a PR tomorrow with a proposal to make the documentation clearer on this subject. Thanks for the suggestion 😄

[laduke]

cant find the PR.

Can the global filter use a custom filterFn for a specific column? It doesn't seem like it.
Do I need to define one global filter fn like the fuzzyFilter example, and put a if (columnId === 'my special column") in it?

[sarthakgupta072]

And also, what is then the intended way to transform cell value for (global) filters?

Do we have a solution to this?

[HeathHopkins]

Any update on this? The documentation for global filters demonstrates using a column's filterFn for global filtering, but when using an inline function for filterFn, the function never gets called.

[KevinVandy]

for global filtering, the table uses the globalFilterFn

[HeathHopkins]

@KevinVandy, thanks!

[LadislavBohm]

One possible workaround for this that I found:

globalFilterFn: (row, id, value, addMeta) => {
      const customFilterFn = row
        .getVisibleCells()
        .find((c) => c.column.id === id)
        ?.column.getFilterFn();

      if (typeof customFilterFn === "function") {
        return customFilterFn(row, id, value, addMeta);
      }

      return filterFns.includesString(row, id, value, addMeta);
    }

This way I look for current cells column and whether it has defined a filterFn. If it does then use it or fallback to some pre-defined filter function. This is still a bit simplified as it only works with filterFn that is defined as a function but works for me.

[NaqibAli]

@LadislavBohm i have tried this way but this function wont be called if the column accessorkey returns object. do you have any suggestion ?

[joseph-mccombs]

I have noticed the same thing as @NaqibAli where the filter does not get triggered when the accessor returns an object. Is there any solution for this?

[NaqibAli]

@joseph-mccombs i come with some solution, if the column you are trying to filter is not primitive (string, number, etc) the function wont get called so i added accessorFn in the column definition to convert the column value to string, now my filter fn gets called with the implementation of @LadislavBohm

accessorFn: (row) => row.customer.name + ", " + row.customer.phone