Data Table with Filters

1import { DataTableFilterField } from "@/components/data-table/types";
2import { ControlsProvider } from "@/providers/controls";
3import type {
4  ColumnDef,
5  ColumnFiltersState,
6  PaginationState,
7  RowSelectionState,
8  SortingState,
9  Table,
10  VisibilityState,
11} from "@tanstack/react-table";
12import { createContext, useContext, useMemo } from "react";
13import { DataTableStoreSync } from "./data-table-store-sync";
14 
15// REMINDER: read about how to move controlled state out of the useReactTable hook
16// https://github.com/TanStack/table/discussions/4005#discussioncomment-7303569
17 
18interface DataTableStateContextType {
19  columnFilters: ColumnFiltersState;
20  sorting: SortingState;
21  rowSelection: RowSelectionState;
22  columnOrder: string[];
23  columnVisibility: VisibilityState;
24  pagination: PaginationState;
25  enableColumnOrdering: boolean;
26}
27 
28interface DataTableBaseContextType<TData = unknown, TValue = unknown> {
29  table: Table<TData>;
30  filterFields: DataTableFilterField<TData>[];
31  columns: ColumnDef<TData, TValue>[];
32  isLoading?: boolean;
33  totalRows?: number;
34  filterRows?: number;
35  getFacetedUniqueValues?: (
36    table: Table<TData>,
37    columnId: string,
38  ) => Map<string, number>;
39  getFacetedMinMaxValues?: (
40    table: Table<TData>,
41    columnId: string,
42  ) => undefined | [number, number];
43}
44 
45interface DataTableContextType<TData = unknown, TValue = unknown>
46  extends DataTableStateContextType,
47    DataTableBaseContextType<TData, TValue> {}
48 
49export const DataTableContext = createContext<DataTableContextType<
50  any,
51  any
52> | null>(null);
53 
54export function DataTableProvider<TData, TValue>({
55  children,
56  ...props
57}: Partial<DataTableStateContextType> &
58  DataTableBaseContextType<TData, TValue> & {
59    children: React.ReactNode;
60  }) {
61  const value = useMemo(
62    // eslint-disable-next-line react-hooks/preserve-manual-memoization
63    () => ({
64      ...props,
65      columnFilters: props.columnFilters ?? [],
66      sorting: props.sorting ?? [],
67      rowSelection: props.rowSelection ?? {},
68      columnOrder: props.columnOrder ?? [],
69      columnVisibility: props.columnVisibility ?? {},
70      pagination: props.pagination ?? { pageIndex: 0, pageSize: 10 },
71      enableColumnOrdering: props.enableColumnOrdering ?? false,
72    }),
73    [
74      props.columnFilters,
75      props.sorting,
76      props.rowSelection,
77      props.columnOrder,
78      props.columnVisibility,
79      props.pagination,
80      props.table,
81      props.filterFields,
82      props.columns,
83// … truncated