Data Grid Filter Menu

1"use client";
2 
3import type { Column, ColumnFilter, Table } from "@tanstack/react-table";
4import {
5  CalendarIcon,
6  Check,
7  ChevronsUpDown,
8  GripVertical,
9  ListFilter,
10  Trash2,
11} from "lucide-react";
12import * as React from "react";
13import { Badge } from "@/components/ui/badge";
14import { Button } from "@/components/ui/button";
15import { Calendar } from "@/components/ui/calendar";
16import {
17  Command,
18  CommandEmpty,
19  CommandGroup,
20  CommandInput,
21  CommandItem,
22  CommandList,
23} from "@/components/ui/command";
24import { useDirection } from "@/components/ui/direction";
25import { Input } from "@/components/ui/input";
26import {
27  Popover,
28  PopoverContent,
29  PopoverTrigger,
30} from "@/components/ui/popover";
31import {
32  Select,
33  SelectContent,
34  SelectGroup,
35  SelectItem,
36  SelectTrigger,
37  SelectValue,
38} from "@/components/ui/select";
39import {
40  Sortable,
41  SortableContent,
42  SortableItem,
43  SortableItemHandle,
44  SortableOverlay,
45} from "@/components/ui/sortable";
46import { useDebouncedCallback } from "@/hooks/use-debounced-callback";
47import {
48  getDefaultOperator,
49  getOperatorsForVariant,
50} from "@/lib/data-grid-filters";
51import { formatDate } from "@/lib/format";
52import { cn } from "@/lib/utils";
53import type { FilterOperator, FilterValue } from "@/types/data-grid";
54 
55const FILTER_SHORTCUT_KEY = "f";
56const REMOVE_FILTER_SHORTCUTS = new Set(["backspace", "delete"]);
57const FILTER_DEBOUNCE_MS = 300;
58const OPERATORS_WITHOUT_VALUE = new Set([
59  "isEmpty",
60  "isNotEmpty",
61  "isTrue",
62  "isFalse",
63]);
64 
65interface DataGridFilterMenuProps<TData>
66  extends React.ComponentProps<typeof PopoverContent> {
67  table: Table<TData>;
68  disabled?: boolean;
69}
70 
71export function DataGridFilterMenu<TData>({
72  table,
73  disabled,
74  className,
75  ...props
76}: DataGridFilterMenuProps<TData>) {
77  const dir = useDirection();
78  const id = React.useId();
79  const labelId = React.useId();
80  const descriptionId = React.useId();
81  const [open, setOpen] = React.useState(false);
82  const addButtonRef = React.useRef<HTMLButtonElement>(null);
83 
84  const columnFilters = table.getState().columnFilters;
85 
86  const { columnLabels, columns, columnVariants } = React.useMemo(() => {
87    const labels = new Map<string, string>();
88    const variants = new Map<string, string>();
89    const filteringIds = new Set(columnFilters.map((f) => f.id));
90    const availableColumns: { id: string; label: string }[] = [];
91 
92    for (const column of table.getAllColumns()) {
93      if (!column.getCanFilter()) continue;
94 
95// … truncated