Data Table Filter Command Palette

1"use client";
2 
3import { useDataTable } from "@/components/data-table/data-table-provider";
4import {
5  Command,
6  CommandEmpty,
7  CommandGroup,
8  CommandItem,
9  CommandList,
10  CommandSeparator,
11} from "@/components/ui/command";
12import { Kbd } from "@/components/ui/kbd";
13import { Separator } from "@/components/ui/separator";
14import { useHotKey } from "@/hooks/use-hot-key";
15import { useLocalStorage } from "@/hooks/use-local-storage";
16import { getCommandHistoryKey } from "@/lib/constants/local-storage";
17import { formatCompactNumber } from "@/lib/format";
18import type { SchemaDefinition } from "@/lib/store/schema/types";
19import { cn } from "@/lib/utils";
20import { Command as CommandPrimitive } from "cmdk";
21import { formatDistanceToNow } from "date-fns";
22import { LoaderCircle, Search, X } from "lucide-react";
23import React, { useEffect, useMemo, useRef, useState } from "react";
24import type { DataTableFilterField } from "../types";
25import {
26  columnFiltersParserFromSchema,
27  getFieldOptions,
28  getFilterValue,
29  getWordByCaretPosition,
30  replaceInputByFieldType,
31} from "./utils";
32 
33interface DataTableFilterCommandProps {
34  // Schema definition for parsing/serializing filter values (BYOS)
35  schema: SchemaDefinition;
36  // Unique ID for this table (used to namespace localStorage)
37  tableId?: string;
38}
39 
40export function DataTableFilterCommand({
41  schema,
42  tableId = "default",
43}: DataTableFilterCommandProps) {
44  const {
45    table,
46    isLoading,
47    filterFields: _filterFields,
48    getFacetedUniqueValues,
49  } = useDataTable();
50  const columnFilters = table.getState().columnFilters;
51  const inputRef = useRef<HTMLInputElement>(null);
52  const [open, setOpen] = useState<boolean>(false);
53  const [currentWord, setCurrentWord] = useState<string>("");
54  // Guard to prevent effect cycle when serializing
55  const isSerializingRef = useRef(false);
56  const filterFields = useMemo(
57    () => _filterFields?.filter((i) => !i.commandDisabled),
58    [_filterFields],
59  );
60  const columnParser = useMemo(
61    () => columnFiltersParserFromSchema({ schema, filterFields }),
62    [schema, filterFields],
63  );
64  const [inputValue, setInputValue] = useState<string>(
65    columnParser.serialize(columnFilters),
66  );
67  const [lastSearches, setLastSearches] = useLocalStorage<
68    {
69      search: string;
70      timestamp: number;
71    }[]
72  >(getCommandHistoryKey(tableId), []);
73 
74  useEffect(() => {
75    // Skip if this update came from serialization (prevents infinite loop)
76    if (isSerializingRef.current) {
77// … truncated