How to combine filters (checkboxes) and render them outside the table

[Knufle]

Hi there! I'm Knufle and I've been trying to do something using react-table for a while, but I couldn't

So, my question is pretty basic, I'm using react-table in a project and I have 2 main questions:

1 - How can I render table filters outside of the table without having to render another table that only shows the filters?
2 - How can I pass an array to the filter so I can combine multiple values in one filter for the same column (example with checkboxes in the codesandbox below)?

The problem is that when I add a checkbox filter, I can't combine them, whenever I click a new checkbox it doesn't add that checkbox's value, it filters the table again considering only the new clicked value, which is not what I want.

You can check an example for both questions in the codesandbox below:
https://codesandbox.io/s/react-table-combined-filters-issue-f9fdh

Thanks so much in advance, I fell in love with react-table because I love utility-first non-opinionated libraries, congratulations for the work.

[SanjaySankar]

Even I would like to do something similar to this. Anyone have any solutions?

[goldflag]

Heres how you can do it:
https://codesandbox.io/s/react-table-combined-filters-issue-forked-k2lqn?file=/src/App.tsx

[Knufle]

Thanks a lot for your contribution! It was almost perfect for my use case, the thing is since I'm using it for more than one column, I need to pass the accessor dynamically. I made a new codesandbox with this fix and also the filters rendered outside the table as you also showed me how to :)

Here's the link for anyone who might need it: https://codesandbox.io/s/react-table-combined-filters-issue-fixed-0zwg4

[Roshanyadav1]

thanks alot bro i am also stuck in these thing thank you so much 😘😍

[rkvirajgupta]

thankx man it helps me alot.

[Akalfa77]

Thanks for sharing this example it actually helped me a lot in understanding how to wire up multi-select filters with react-table.

While playing around with the sandbox, I ran into a small issue. Selecting multiple checkboxes works fine, but when you start unchecking them (especially when clearing all), the table doesn’t always go back to showing the full dataset. It feels like the filter gets stuck sometimes.

After digging a bit, it turns out the problem is coming from this helper:

function setFilteredParams(filterArr, val) {
if (filterArr.includes(val)) {
filterArr = filterArr.filter((n) => {
return n !== val;
});
} else filterArr.push(val);

if (filterArr.length === 0) filterArr = undefined;
return filterArr;
}

The .push() is mutating the same array reference. Since React Table relies on immutable updates to know something changed, it sometimes doesn’t re-run the filtering logic because the reference hasn’t changed.

So instead of mutating the array, creating a new one fixes the behavior:

function setFilteredParams(filterArr = [], val) {
let next;

if (filterArr.includes(val)) {
next = filterArr.filter((n) => n !== val);
} else {
next = [...filterArr, val]; // create new array instead of mutating
}

return next.length ? next : undefined;
}

One more small tweak that helped making the checkbox controlled so it always reflects the current filter state:

<input
type="checkbox"
value={option}
checked={filterValue.includes(option) || false}
onChange={(e) => {
setFilter(setFilteredParams(filterValue, e.target.value));
}}
/>

After these changes: Multiple selections combine correctly, Unchecking values updates the table as expected, Clearing all checkboxes restores the full data again.

Here's the link for anyone who might want full solution: https://codesandbox.io/p/sandbox/react-table-combined-filters-issue-fixed-forked-s7sfrq?file=%2Fsrc%2FApp.tsx

[kr-arunp]

How do same thing using ten stack v8 ,please