Data Table Filter Menu

1"use client";
2 
3import type { Column, Table } from "@tanstack/react-table";
4import { BadgeCheck, CalendarIcon, ListFilter, Text, X } from "lucide-react";
5import { useQueryState } from "nuqs";
6import * as React from "react";
7 
8import { DataTableRangeFilter } from "@/components/data-table/data-table-range-filter";
9import { Button } from "@/components/ui/button";
10import { Calendar } from "@/components/ui/calendar";
11import {
12  Command,
13  CommandEmpty,
14  CommandGroup,
15  CommandInput,
16  CommandItem,
17  CommandList,
18} from "@/components/ui/command";
19import { Input } from "@/components/ui/input";
20import {
21  Popover,
22  PopoverContent,
23  PopoverTrigger,
24} from "@/components/ui/popover";
25import {
26  Select,
27  SelectContent,
28  SelectGroup,
29  SelectItem,
30  SelectTrigger,
31  SelectValue,
32} from "@/components/ui/select";
33import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
34import { getDefaultFilterOperator, getFilterOperators } from "@/lib/data-table";
35import { formatDate } from "@/lib/format";
36import { generateId } from "@/lib/id";
37import { getFiltersStateParser } from "@/lib/parsers";
38import { cn } from "@/lib/utils";
39import type { ExtendedColumnFilter, FilterOperator } from "@/types/data-table";
40 
41const DEBOUNCE_MS = 300;
42const THROTTLE_MS = 50;
43const FILTER_SHORTCUT_KEY = "f";
44const REMOVE_FILTER_SHORTCUTS = ["backspace", "delete"];
45 
46interface DataTableFilterMenuProps<TData>
47  extends React.ComponentProps<typeof PopoverContent> {
48  table: Table<TData>;
49  debounceMs?: number;
50  throttleMs?: number;
51  shallow?: boolean;
52  disabled?: boolean;
53}
54 
55export function DataTableFilterMenu<TData>({
56  table,
57  debounceMs = DEBOUNCE_MS,
58  throttleMs = THROTTLE_MS,
59  shallow = true,
60  disabled,
61  className,
62  ...props
63}: DataTableFilterMenuProps<TData>) {
64  const id = React.useId();
65 
66  const columns = React.useMemo(() => {
67    return table
68      .getAllColumns()
69      .filter((column) => column.columnDef.enableColumnFilter);
70  }, [table]);
71 
72  const [open, setOpen] = React.useState(false);
73  const [selectedColumn, setSelectedColumn] =
74    React.useState<Column<TData> | null>(null);
75  const [inputValue, setInputValue] = React.useState("");
76  const triggerRef = React.useRef<HTMLButtonElement>(null);
77  const inputRef = React.useRef<HTMLInputElement>(null);
78 
79  const onOpenChange = React.useCallback((open: boolean) => {
80    setOpen(open);
81 
82    if (!open) {
83      setTimeout(() => {
84        setSelectedColumn(null);
85        setInputValue("");
86      }, 100);
87    }
88  }, []);
89 
90// … truncated