reactjsreact-table

Selecting the filter type in React Table on the UI


I'm trying to create a stylized table that includes a dropdown for selecting the filter type, e.g. equals, not equals, greater than, less than, etc. I'm using React Table and Bootstrap. Getting the dropdown is easy enough, but I can't seem to change the filter value of the column. I created a StackBlitz to demonstrate what I mean:

https://stackblitz.com/edit/react-ts-89vz1j?file=custom-filter.tsx

In particular, take a look at CustomFilter. It has the dropdown to change the filter type. In it, there's a onClick callback that for each item that would set the filter value. The problem is that I don't have a hook like setFilter to adjust the value and update the grid. Is there such a hook? Could such a hook be built?

EDIT: Screenshot of the dropdown in question enter image description here


Solution

  • I figured out the solution to this. I wrote my own plugin hook that includes a new action, setFilterType. That function sets the state of the column to the filter type I want. I include a reference to that function on each column. Within the filter code, I can call that function. So then the dropdown can use that function to set the filter type based on what the user chooses. See my stackblitz:

    https://stackblitz.com/edit/react-ts-qj2sop?file=App.tsx