Data table filter - TanStack Table (add-on)

1import type { ColumnDef, ColumnFiltersState } from '@tanstack/react-table'
2import type { Column, FilterModel, FiltersState } from '../../core/types'
3import { multiOptionFilterFn, optionFilterFn } from '../../lib/filter-fns'
4import {
5  isColumnOption,
6  isColumnOptionArray,
7  isStringArray,
8} from '../../lib/helpers'
9import { dateFilterFn, numberFilterFn, textFilterFn } from './filter-fns'
10 
11interface CreateTSTColumns<TData> {
12  columns: ColumnDef<TData, any>[]
13  configs: Column<TData>[]
14}
15 
16export function createTSTColumns<TData>({
17  columns,
18  configs,
19}: CreateTSTColumns<TData>) {
20  const _cols: ColumnDef<TData>[] = []
21 
22  for (const col of columns) {
23    // Get the column filter config for this column
24    const config = configs.find((c) => c.id === col.id)
25 
26    // If the column is not filterable or doesn't have a filter config, skip it
27    // An explicit check is done on `enableColumnFilter`
28    if (col.enableColumnFilter === false || !config) {
29      _cols.push(col)
30      continue
31    }
32 
33    if (config.type === 'text') {
34      col.filterFn = textFilterFn
35      _cols.push(col)
36      continue
37    }
38 
39    if (config.type === 'number') {
40      col.filterFn = numberFilterFn
41      _cols.push(col)
42      continue
43    }
44 
45    if (config.type === 'date') {
46      col.filterFn = dateFilterFn
47      _cols.push(col)
48      continue
49    }
50 
51    if (config.type === 'option') {
52      col.filterFn = (row, columnId, filterValue: FilterModel<'option'>) => {
53        const value = row.getValue<unknown>(columnId)
54 
55        if (!value) return false
56 
57        if (typeof value === 'string') {
58          return optionFilterFn(value, filterValue)
59        }
60 
61        if (isColumnOption(value)) {
62          return optionFilterFn(value.value, filterValue)
63        }
64 
65        const sanitizedValue = config.transformOptionFn!(value as never)
66        return optionFilterFn(sanitizedValue.value, filterValue)
67      }
68    }
69 
70    if (config.type === 'multiOption') {
71      col.filterFn = (
72        row,
73        columnId,
74        filterValue: FilterModel<'multiOption'>,
75      ) => {
76        const value = row.getValue(columnId)
77 
78        if (!value) return false
79 
80        if (isStringArray(value)) {
81          return multiOptionFilterFn(value, filterValue)
82        }
83 
84        if (isColumnOptionArray(value)) {
85          return multiOptionFilterFn(
86            value.map((v) => v.value),
87            filterValue,
88          )
89        }
90 
91        const sanitizedValue = (value as never[]).map((v) =>
92// … truncated