2

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 useFilter 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!

Airtable Filter Component

Filter Component w/ Dropdown Menu

kaeland
  • 191
  • 2
  • 9

1 Answers1

1
`const columns = React.useMemo(
    () => [

        {
            Header: 'Group Name',
            accessor: 'name',
            // disableGlobalFilter: true
        },

        {
            Header: 'Created',
            accessor: 'sector',
            disableGlobalFilter: true,
        },
        
    ],
    []
)`

Add this in the column array inside the column where you want to disable global filter

faiza07
  • 36
  • 2