How To Filter A React Table Using Custom Filter Component?

I have a React Table(https://react-table.js.org) which gets populated from the data coming from an API. Above the table I have created a filter component which consists of a dropdo

Solution 1:

My understanding of your setup, you have:

<FilterComponent /><!-- Stores instructions for Filters to apply --><TableComponent /><!-- Displays data -->

And you expect that when the user makes changes in the filter component, the table component MUST reflect the changes.

If the above is true, the recommended way to do so (without relying on state management libraries) is lifting the state to the least common ancestor (see official docs).

If you do not have a least common ancestor, do not hesitate introducing a container component instead.

This component should serve the following function:

• It knows/stores the state of the FilterComponent or is able to consume the filter instructions from the FilterComponent
• It holds the data & filteredData in its state. filteredData can be passed to the table component as Props
• Every time it gets a signal from FilterComponent to "apply" a filter, it should filter the data (leading to change of filteredData in its state, which should make the table component re-render)

i.e. in your FilterComponent, when you click the Apply button, the internal state is lifted to the "container" component and that leads to recomputation of the data to be displayed in your TableComponent. The table should re-render itself when the data changes.

I hope it opens your mind to the possibilities and you can then best decide which component holds what state and what responsibilities.