How can I avoid removing empty filters entirely?

[grant-progress]

For my company's table UX, we want to make filters configurable outside the table itself via a menu system. This is similar to filter "pills" which can be added by selecting a column name to filter on. They are initialized with a default empty value, and the user can immediately add a more meaningful filter value in the menu. Removal of filters happens in this menu as well, by explicit action from the user.

I can't figure out how to achieve this with Tanstack Table's filter system, even after I overrode all built-in filterFn options with versions that have .autoRemove = () => false;. So I dug into the source and found this. It appears that the library enforces removing filters if their value is empty regardless of autoRemove?

I think this behavior is surprisingly opinionated for such an otherwise versatile tool. Can that logic be changed to utilize ?? instead, so that any autoRemove supplied value will be considered authoritative? Or better yet, can autoRemove be globally configurable, so I don't have to override all the default filter functions at all?

Marked as Q&A because hopefully there's a way to do this I didn't notice.

[grant-progress]

FWIW, since I'm integrating this as the underlying table solution for a shared design system package, I just ended up bailing out of the built-in filtering and wrapping the tools with my own filtering state solution. Not particularly difficult to do and gives the adaptability I needed. I think that's perfectly fine (and it's nice that it's easy to bail out like this), but I do still think the filter removal behavior is a bit too opinionated as the internal behavior.

[MILLERMARRU]

I checked column_setFilterValue/shouldAutoRemoveFilter in columnFilteringFeature.utils.ts and there's already a hook for exactly this, no need for custom filtering state:

export function shouldAutoRemoveFilter(filterFn, value, column) {
  if (typeof value === 'undefined') {
    return true
  }
  if (filterFn?.autoRemove) {
    return !!filterFn.autoRemove(value, column)
  }
  return typeof value === 'string' && !value
}

undefined is always the "clear this filter" sentinel and can't be kept, but everything else routes through filterFn.autoRemove when your filter function defines one, and only falls back to the built-in "drop empty strings" heuristic when it doesn't. So instead of bailing out to your own filter state, register a filterFn with an autoRemove that always returns false:

const keepEmptyFilterFn: FilterFn<any> = (row, columnId, filterValue) => {
  // your actual matching logic, including the empty case
}
keepEmptyFilterFn.autoRemove = () => false

Then set it via columnDef.filterFn = keepEmptyFilterFn (or register it in the table's filterFns map and reference it by name). With that, table_setColumnFilters in columnFilteringFeature.utils.ts will stop stripping the entry once its value goes empty, since shouldAutoRemoveFilter short-circuits to your autoRemove before ever reaching the empty-string default. It'll only get removed when you explicitly call column.setFilterValue(undefined), which stays a hard removal regardless of autoRemove.