Manual Server-Side Column Filtering with client side global filter

[ohmycode]

Hello, firtst let me thank you for your amazing work. I'm so glad not having to start with react table from scratch!

A common use case for breaking down my data would be to apply a filter on the server side, and then globally search on the client side to quickly find any results of the subset.

I'm trying to implement that, but it is stated that setting
manualFiltering: true, turns off all client-side filtering.

is there a way to manually trigger the client side filtering when setting a global filter with manualFiltering turned to true?

I found this two links in the docu, but coulnd't find a way around it:
manual-server-side-column-filtering
manual-server-side-global-filtering

[alessandrojcm]

Hey, no if you set manualFiltering to true that means that you need to handle all sorting by yourself. What you could do, though, is use the onGlobalFilterChange (or orColumnFilterChange) callback and decide on a per-column basis if you want to apply server or client filters. MRT exports both filtering and sorting functions so you could use those.

[ohmycode]

Hi @alessandrojcm, thanks for your insights. I tried to apply a client side filter manually for the last couple of hours, but I can't find a way to do that.
I've passed a react state to the table state which is correctly updated via

onGlobalFilterChange: (s) => {
    return setGlobalFilter(s);
},

I've also found the MRT_FilterFns.fuzzy filter in import { MRT_FilterFns } from 'mantine-react-table';.
I can't find how to use it though. I've tried to use

onGlobalFilterChange: (s) => {
    let filtered = table.getFilteredRowModel().rows.filter((row, columnId) => {
        return MRT_FilterFns.fuzzy(row, columnId, s, ()=>{});
    });
    return setGlobalFilter(s);
},

But the filtering did't work. Using a custom filter logic worked, but I couldn't find any example of how to update the rowModel with a custom filtered subset neither.

[alessandrojcm]

Could you upload a minimum example of what you are trying to accomplish?

[ohmycode]

I just found a way that works for me, leave it here in case it serves somebody else:

const [globalFilter, setGlobalFilter] = useState("")
const searchTerm = String(globalFilter).toLowerCase();
const table = useMantineReactTable({
    data: myData.filter((item => columns.some((col) => (typeof col.enableGlobalFilter === 'undefined' || col.enableGlobalFilter === true) && String(item[col.accessorKey]).toLowerCase().includes(searchTerm))));
    manualFiltering: true,
    onGlobalFilterChange: (s) => {
        return setGlobalFilter(s);
    },
    state: {
        globalFilter
    },
    ...
});

the data.filter() function is a custom implementation for the client side filtering, which looks if any of the rows contains the searched text, but still respecting the column option (enableGlobalFilter).

I would still be interested in how to reuse the MRT_FilterFns.fuzzy filter manually.

[alessandrojcm]

Glad you sorted it, the fuzzy filter itself won't sort the data, it will only rank it according to the filter input so you can decide yourself if that column should be filtered in or out. This is actually not an MRT implementation but a TanStack table re-export.