How to global filter (search) manually

[marcosluizfp]

I wished to use the global filter (search) to manually filter rows on table (using a controlled rows state). If I use the manualFiltering option, then my global filter function is not being called.

Is there a way to get that?

[KevinVandy]

So are you following either the Remote Data Example or the React Query Example? Both use server-side global filtering.

Sounds like you are properly using manualFiltering, as long as you expect that using that turns off all filtering inside of MRT.

This means that you have to implement your own filtering on the server. The filterFNs on the client-side will be turned off and show all rows in the data prop when manualFiltering={true}.

[marcosluizfp]

Hi @KevinVandy,

In fact my goal was to filter on client side having a controlled global filter (sorry for not being so clear)

First I tried to use these table props:

manualFiltering
muiSearchTextFieldProps={{
   ...
   value={searchValue}
   onChange={setSearchValue}
}}

However it didn't work.

After some digging on material-react-table code I realized about the onGlobalFilterChange table prop and it worked perfect:

onGlobalFilterChange={(searchValue: string) => {
   setSearchValue(searchValue || "");
}}

[KevinVandy]

Well if you want the client-side filtering that is built into MRT to just work, just remove the manualFiltering prop and you shouldn't have to add anything extra.

[marcosluizfp]

Yes, I did it, thanks!

Also used the onGlobalFilterChange prop to control the filtered rows and (mainly) that helped to compute values based on filtered rows only.