Global filter

declare module '@tanstack/table-core' {
  interface FilterFns {
    fuzzy: FilterFn<unknown>
  }
  interface FilterMeta {
    itemRank: RankingInfo
  }
}

const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
  console.log('fuzzyFilter', row, columnId, value, addMeta)
  // Rank the item
  const itemRank = rankItem(row.getValue(columnId), value)

  // Store the itemRank info
  addMeta({
    itemRank
  })

  // Return if the item should be filtered in/out
  return itemRank.passed
}

export const BasicTable = <Data,>({
  data,
  columns,
  withPagination,
  withCount,
  withSearch,
  pageSizeOptions,
  language: maybeLanguage
}: AbstractTableProps<Data>) => {
  const language = useLanguage(maybeLanguage, defaultTableLanguage)
  const rerender = React.useReducer(() => ({}), {})[1]

  const [globalFilter, setGlobalFilter] = useState('')

  useEffect(() => {
    console.log('globalFilter', globalFilter)
    rerender()
  }, [globalFilter, rerender])

  const table = useReactTable({
    data,
    columns,
    filterFns: {
      fuzzy: fuzzyFilter
    },
    getCoreRowModel: getCoreRowModel(),
    state: {
      globalFilter
    },
    onGlobalFilterChange: setGlobalFilter,
    globalFilterFn: 'equals',
    enableGlobalFilter: true,
    debugTable: true,
    debugHeaders: true,
    debugColumns: false
  })

  return (
   // ...
  )
}

declare module '@tanstack/table-core' {
  interface FilterFns {
    fuzzy: FilterFn<unknown>
  }
  interface FilterMeta {
    itemRank: RankingInfo
  }
}

const fuzzyFilter: FilterFn<any> = (row, columnId, value, addMeta) => {
  console.log('fuzzyFilter', row, columnId, value, addMeta)
  // Rank the item
  const itemRank = rankItem(row.getValue(columnId), value)

  // Store the itemRank info
  addMeta({
    itemRank
  })

  // Return if the item should be filtered in/out
  return itemRank.passed
}

export const BasicTable = <Data,>({
  data,
  columns,
  withPagination,
  withCount,
  withSearch,
  pageSizeOptions,
  language: maybeLanguage
}: AbstractTableProps<Data>) => {
  const language = useLanguage(maybeLanguage, defaultTableLanguage)
  const rerender = React.useReducer(() => ({}), {})[1]

  const [globalFilter, setGlobalFilter] = useState('')

  useEffect(() => {
    console.log('globalFilter', globalFilter)
    rerender()
  }, [globalFilter, rerender])

  const table = useReactTable({
    data,
    columns,
    filterFns: {
      fuzzy: fuzzyFilter
    },
    getCoreRowModel: getCoreRowModel(),
    state: {
      globalFilter
    },
    onGlobalFilterChange: setGlobalFilter,
    globalFilterFn: 'equals',
    enableGlobalFilter: true,
    debugTable: true,
    debugHeaders: true,
    debugColumns: false
  })

  return (
   // ...
  )
}