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?
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: