Filtering specific columns within a Global Filter

[kaeland]

Hi there,

I'm currently attempting to build an Airtable-esque filter component. I'm wondering if it is possible to use the useGlobalFilter hook to choose what columns to filter a table by programmatically. For example, Airtable implements table filtering using a component that lives outside of a given table's boundaries. Inside of this component, there is a dropdown menu to choose which column to apply a filterValue and a dropdown to choose the filterType for a given column. Based on react-table's documentation, it appears that useGlobalFilter is used to build filtering components that exist outside of the table. However, based on the documentation's code sandbox example, for filtering, it also appears that useGlobalFilter applies the filter value to all columns rather than to specific columns.

My question would be if it's possible to use useGlobalFilter's ability to create filtering UI outside of a table and have a way to select what columns to apply a filterValue & filterType, all from within the global filter?

If this is possible, would anyone be willing to provide tips or advice on the implementation? Please let me know if this task would be more suited for useFilters or another part of react-table's API.

I've provided a screenshot of Airtable's filter component as an example of what I'd like to build. Any feedback or advice would be much appreciated! ☺️

[000000armor]

Sorry for offtopic but this app is fire bro!

[kaeland]

Airtable is pretty fire!

[HermanNygaard]

I think setFilter would accomplish this, just call it on multiple column ID's: Here is a CodeSandbox with two examples

[kaeland]

Hey, thank you!

[raphaelfavier]

Did setFilter changed since last year? I can't figure out how to call it on multiple column ID's

A solution I found is this one