Data Table Filter List

1"use client";
2 
3import type { Column, ColumnMeta, Table } from "@tanstack/react-table";
4import {
5  CalendarIcon,
6  Check,
7  ChevronsUpDown,
8  GripVertical,
9  ListFilter,
10  Trash2,
11} from "lucide-react";
12import { parseAsStringEnum, useQueryState } from "nuqs";
13import * as React from "react";
14 
15import { DataTableRangeFilter } from "@/components/data-table/data-table-range-filter";
16import { Badge } from "@/components/ui/badge";
17import { Button } from "@/components/ui/button";
18import { Calendar } from "@/components/ui/calendar";
19import {
20  Command,
21  CommandEmpty,
22  CommandGroup,
23  CommandInput,
24  CommandItem,
25  CommandList,
26} from "@/components/ui/command";
27import {
28  Faceted,
29  FacetedBadgeList,
30  FacetedContent,
31  FacetedEmpty,
32  FacetedGroup,
33  FacetedInput,
34  FacetedItem,
35  FacetedList,
36  FacetedTrigger,
37} from "@/components/ui/faceted";
38import { Input } from "@/components/ui/input";
39import {
40  Popover,
41  PopoverContent,
42  PopoverTrigger,
43} from "@/components/ui/popover";
44import {
45  Select,
46  SelectContent,
47  SelectGroup,
48  SelectItem,
49  SelectTrigger,
50  SelectValue,
51} from "@/components/ui/select";
52import {
53  Sortable,
54  SortableContent,
55  SortableItem,
56  SortableItemHandle,
57  SortableOverlay,
58} from "@/components/ui/sortable";
59import { dataTableConfig } from "@/config/data-table";
60import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
61import { getDefaultFilterOperator, getFilterOperators } from "@/lib/data-table";
62import { formatDate } from "@/lib/format";
63import { generateId } from "@/lib/id";
64import { getFiltersStateParser } from "@/lib/parsers";
65import { cn } from "@/lib/utils";
66import type {
67  ExtendedColumnFilter,
68  FilterOperator,
69  JoinOperator,
70} from "@/types/data-table";
71 
72const DEBOUNCE_MS = 300;
73const THROTTLE_MS = 50;
74const FILTER_SHORTCUT_KEY = "f";
75const REMOVE_FILTER_SHORTCUTS = ["backspace", "delete"];
76 
77interface DataTableFilterListProps<TData>
78  extends React.ComponentProps<typeof PopoverContent> {
79  table: Table<TData>;
80  debounceMs?: number;
81  throttleMs?: number;
82  shallow?: boolean;
83  disabled?: boolean;
84}
85 
86export function DataTableFilterList<TData>({
87  table,
88  debounceMs = DEBOUNCE_MS,
89  throttleMs = THROTTLE_MS,
90  shallow = true,
91  disabled,
92  ...props
93}: DataTableFilterListProps<TData>) {
94  const id = React.useId();
95  const labelId = React.useId();
96  const descriptionId = React.useId();
97  const [open, setOpen] = React.useState(false);
98  const addButtonRef = React.useRef<HTMLButtonElement>(null);
99 
100// … truncated