Is it possible to move the filtering outside the Table component?

[bharathch0404]

I would like to move the filtering to a parent component and use Table as a child. I saw that this is possible in react-table v6. Was wondering if the same is possible in react-table 7?

[tsmith123]

Yes, I've done this in V7. Just let your Table component listen out for changes on certain props and then call setFilter or setGlobalFilter at this point.

[jaekunchoi]

do you have some example of this?

[mikoz93]

@hybmg57 A bit late to the party... You can pass in a prop, let's say 'keywordFilter' and then your table component would implement a useEffect that is called every time it changes and sets that filter internally.

[ayushmalviya27]

@tsmith123 @mikoz93 But how do I configure which filter is going to manage which particular column?
If you have a code sandbox example that would be helpful.

[HermanNygaard]

@ayushmalviya27 https://codesandbox.io/s/react-table-filter-outside-table-bor4f?file=/src/App.js

[SawkaDev]

Thanks..however I am getting this error when I add setFilter assignment in the useTable call:

Property 'setFilter' does not exist on type 'TableInstance'.ts(2339)

I am using typescript, but am unsure how to fix this warning without using // @ts-ignore

[fadi-george]

Alternatively, you can use imperative ref to control the table from outside (no need for state):
https://codesandbox.io/s/react-table-imperative-ref-jsx0p?file=/src/App.js

With Provider (assuming 1 Table rendered):
https://codesandbox.io/s/react-table-provider-8rfh3?file=/src/App.js

As a prop:
https://codesandbox.io/s/react-table-render-header-q4vg8?file=/src/App.js

[nuri-engin]

Dear @fadi-george Those samples are very good examples. Just I couldn't find any documentation or explanation related to comparing those three approaches.

All codesandbox's seems to come from tannerlinsley / react-table / master /examples/filtering but there is no any details.
On the other hand, react-table docs covers the useFilter and useGlobalFilters but not within a compression.

Is it possible to share your thoughts related to different approaches?
Or anybody... :)

Thanks in advance.

[dfederighi]

Is there an example for this using just setFilter? It's not clear to me how to filter (for example with a checkbox/toggle) from outside the table, but only filter on a single column.

Ideas?

[tm1000]

https://react-table-omega.vercel.app/docs/api/useFilters

"Instance Properties"

So const { useFilter } = useTable(<table settings>)

The function is just setFilter: Function(columnId, filterValue) => void

[TimMcCauley]

@dfederighi were you able to figure this one out?

[dfederighi]

Yes, I was ... we can close

[wlachenal]

@dfederighi were you able to figure this one out?

You probably already guessed it but to those people who are wondering how to do this.

const {
	setFilter, // <--- This
} = useTable({
	columns: tableColumns,
	data: userQuery.data,
	initialState: { pageIndex:0 }
}, useFilters, usePagination);

Then somewhere outside your table, add it to your text field

<input type="text" className="form-field"
	onChange={(e) => setFilter('username', e.target.value)}
/>

columnId = accessor from your table column
filterValue = thing you want to search

setFilter: Function(columnId, filterValue) => void
An instance-level function used to update the filter value for a specific column.

https://react-table-omega.vercel.app/docs/api/useFilters

Pardon for my explanation, hope you guys at least get the gist of it.