Updating the filter type on a column programatically.

[ledbetterljoshua]

When filtering a column in Airtable, you are able to set the specific filter type for that column. As an example, you can choose "is any of", "is exact", or "is not", before setting the filter value. I am attempting to do this with react-table.

Basically, I need to build a way to update the default filter type on a column. So, if the default filter type on a column is "includes", I want to be able to set it to "excludes" instead. After doing this, I would want the table to re-run the filtering.

As of right now, my current plan is to take the useFilters plugin, and rewrite it, extending its functionality to act how I want. But I'm curious if there's a better way. Maybe by simply building my own custom plugin that extends useFilter directly.

Any help on this would be really appreciated.

Thanks!

[jp-olvera]

I had the same problem, I wanted to use something like startsWith and endsWith, and I solve it this way

You can add your own filter types via table options in a memoized value, check the sandbox of filtering (line 216)
https://react-table.tanstack.com/docs/examples/filtering

If you want to use a different function to do the filtering you need to specified in the column options, but there is not a function to programatically update the column options.

What I did was, having access to visibleColumn or allColumns you can do something like this

Create a function that receives the column id you want to use, the new filter type (of course you would need to add your custom filters first), the value to filter and the columns you are displaying to the user.
In the function you need to find the column you want to filter and update its filter prop

const setCustomFilter = (
    column_id: string,
    value: number | string,
    new_filter_type: string, // contains, startsWith, isNot
    visibleColumns: ColumnInstance[]
  ) => {
    const column = visibleColumns.find((d) => d.id === column_id);
    if (column) {
      //  this will update the column instance filter
      column.filter = new_filter_type;
    }
    setFilter(column_id, value);
  };

It's probably not the best way and maybe I shouldn't do it this way, but it worked

[Christian-Garrison]

@lachlancollins I'm unsure who needs ping for visibility to issues, but is this doable in a more sensible fashion?

Something like column.setFilterFn()?

For updating filtering types dynamically and making it more reusable on options like: is, isNot, notEquals, etc. just adding in more flexibility for custom types etc etc.