T
TanStack3y ago
provincial-silver

Manual Filter by clicking in buttons outside the column rendering

Hello everyone!! Just a quick question. Imagine we have 3 fixed filters. We can filter (example) every person who earns MORE than $ 10.000; another filter which shows those who earn less than $4.000; and the last one shows people older than 30y. I'd like to present this 3 options, so the user just need to click on any of these options, and the table will be filtered. How can I implement this scenario? Just reading the documentation does not made it easy to figured out.
3 Replies
wise-white
wise-white3y ago
Hi, were you able to figure it out? Because I have about the same problem
stormy-gold
stormy-gold3y ago
1. You need to add:
getFilteredRowModel: getFilteredRowModel()
getFilteredRowModel: getFilteredRowModel()
on the options of the UseReactTable hook. 2. On the component you pass the column for which you want to filter:
tableInstance.getColumn("accessor (id)")
tableInstance.getColumn("accessor (id)")
3. Then on the component you have to do something like this:
<button onClick={() => column.setFilterValue(value)}>Filter</button>
<button onClick={() => column.setFilterValue(value)}>Filter</button>
conscious-sapphire
conscious-sapphire3y ago
how do you pass the tableInstance to another component?

Did you find this page helpful?