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,
		}),
	)

	const [id, setId] = useState(0)
	const forcedData = useMemo(() => [...data], [data, id])
	function setFilterFn(fn: 'includesString' | 'includesStringSensitive') {
		_setFilterFn(fn)
		setId((i) => i + 1)
	}