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.

[kr-arunp]

How do same thing using ten stack v8 ,please