Change globalFilterFn at runtime?

[CapitaineToinon]

I made a global filter input to my table with the option for the filter to be case sensitive or not:

Internally, this toggles a state from includeString to includeStringSensitive that is then passed to useReactTable.

	const [filterFn, setFilterFn] = useState<
		'includesString' | 'includesStringSensitive'
	>('includesString')

	const table = useNoMemo(() =>
		useReactTable({
			data,
			columns,
			getRowId,
			state: {
				columnVisibility,
				columnFilters,
				globalFilter,
				sorting,
				pagination,
				rowSelection,
			},
			globalFilterFn: filterFn,
			// getRowCanExpand: (row) => true,
			// getExpandedRowModel: getExpandedRowModel(),
			getCoreRowModel: getCoreRowModel(),
			getFilteredRowModel: getFilteredRowModel(),
			getFacetedRowModel: getFacetedRowModel(),
			getFacetedUniqueValues: getFacetedUniqueValues(),
			getFacetedMinMaxValues: getFacetedMinMaxValues(),
			getSortedRowModel: getSortedRowModel(),
			getPaginationRowModel: getPaginationRowModel(),
			onColumnVisibilityChange: setColumnVisibility,
			onColumnFiltersChange: (...params) => {
				setRowSelection({})
				setColumnFilters(...params)
			},
			onGlobalFilterChange: (value) => {
				setGlobalFilter(value)
				setRowSelection({})
			},
			onSortingChange: setSorting,
			onPaginationChange: setPagination,
			onRowSelectionChange: setRowSelection,
			// custom stuff added to the table type
			// see types.d.ts
			...extraData,
		}),
	)

However this doesn't seems to trigger any rerender. I had to make a wrap my data in a use memo and a dummy id number that I then increment for the change to be picked up.

	const [id, setId] = useState(0)
	const forcedData = useMemo(() => [...data], [data, id])

	function setFilterFn(fn: 'includesString' | 'includesStringSensitive') {
		_setFilterFn(fn)
		setId((i) => i + 1)
	}

Is this use case not intended by the library? Is there a better way to do this?

Thanks for help. 👋

[manimovassagh]

The issue is that changing globalFilterFn doesn't trigger a re-filter because TanStack Table only recomputes the filtered row model when the globalFilter value or the data changes — not when the filter function reference changes.

The cleanest fix is to not swap function names at all. Instead, write a single custom filter function that reads the current mode from a ref or state:

const [caseSensitive, setCaseSensitive] = useState(false)

const globalFilterFn: FilterFn<any> = useCallback((row, columnId, filterValue) => {
  const cellValue = String(row.getValue(columnId) ?? '')
  const search = String(filterValue)

  if (caseSensitive) {
    return cellValue.includes(search)
  }
  return cellValue.toLowerCase().includes(search.toLowerCase())
}, [caseSensitive])

const table = useReactTable({
  data,
  columns,
  state: {
    globalFilter,
    // ...
  },
  globalFilterFn,
  getCoreRowModel: getCoreRowModel(),
  getFilteredRowModel: getFilteredRowModel(),
})

But this alone still won't trigger a re-filter. The trick is to force the filtered model to recompute when the mode changes. The simplest way: toggle the globalFilter value to trigger a recomputation:

function toggleCaseSensitivity() {
  setCaseSensitive((prev) => !prev)
  // Force re-filter by "touching" the filter value
  setGlobalFilter((prev) => prev)
}

If that doesn't work (since it's the same reference), bump it slightly:

function toggleCaseSensitivity() {
  setCaseSensitive((prev) => !prev)
  // Force re-filter
  setGlobalFilter((prev) => prev + ' ')
  // Then trim it back on next tick
  requestAnimationFrame(() => setGlobalFilter((prev) => prev.trim()))
}

Or, a cleaner approach — encode the sensitivity mode into the filter value itself:

const [caseSensitive, setCaseSensitive] = useState(false)
const [searchText, setSearchText] = useState('')

// Combine mode + text into the globalFilter value
const globalFilter = useMemo(
  () => ({ text: searchText, caseSensitive }),
  [searchText, caseSensitive]
)

const globalFilterFn: FilterFn<any> = (row, columnId, filterValue) => {
  const { text, caseSensitive: cs } = filterValue as { text: string; caseSensitive: boolean }
  const cellValue = String(row.getValue(columnId) ?? '')
  return cs
    ? cellValue.includes(text)
    : cellValue.toLowerCase().includes(text.toLowerCase())
}

This way, changing caseSensitive produces a new globalFilter object, which triggers the re-filter automatically. This is the most idiomatic approach — the filter function is stable, and all the variable state lives in the filter value.

[CapitaineToinon]

Thank you very much for the slop answer that did not help at all.