Data Grid Sort Menu

1"use client";
2 
3import type { ColumnSort, SortDirection, Table } from "@tanstack/react-table";
4import {
5  ArrowDownUp,
6  ChevronsUpDown,
7  GripVertical,
8  Trash2,
9} from "lucide-react";
10import * as React from "react";
11import { Badge } from "@/components/ui/badge";
12import { Button } from "@/components/ui/button";
13import {
14  Command,
15  CommandEmpty,
16  CommandGroup,
17  CommandInput,
18  CommandItem,
19  CommandList,
20} from "@/components/ui/command";
21import { useDirection } from "@/components/ui/direction";
22import {
23  Popover,
24  PopoverContent,
25  PopoverTrigger,
26} from "@/components/ui/popover";
27import {
28  Select,
29  SelectContent,
30  SelectGroup,
31  SelectItem,
32  SelectTrigger,
33  SelectValue,
34} from "@/components/ui/select";
35import {
36  Sortable,
37  SortableContent,
38  SortableItem,
39  SortableItemHandle,
40  SortableOverlay,
41} from "@/components/ui/sortable";
42import { cn } from "@/lib/utils";
43 
44const SORT_SHORTCUT_KEY = "s";
45const REMOVE_SORT_SHORTCUTS = new Set(["backspace", "delete"]);
46const SORT_ORDERS = [
47  { label: "Asc", value: "asc" },
48  { label: "Desc", value: "desc" },
49];
50 
51interface DataGridSortMenuProps<TData>
52  extends React.ComponentProps<typeof PopoverContent> {
53  table: Table<TData>;
54  disabled?: boolean;
55}
56 
57export function DataGridSortMenu<TData>({
58  table,
59  disabled,
60  className,
61  ...props
62}: DataGridSortMenuProps<TData>) {
63  const dir = useDirection();
64  const id = React.useId();
65  const labelId = React.useId();
66  const descriptionId = React.useId();
67  const [open, setOpen] = React.useState(false);
68  const addButtonRef = React.useRef<HTMLButtonElement>(null);
69 
70  const sorting = table.getState().sorting;
71  const onSortingChange = table.setSorting;
72 
73  const { columnLabels, columns } = React.useMemo(() => {
74    const labels = new Map<string, string>();
75    const sortingIds = new Set(sorting.map((s) => s.id));
76    const availableColumns: { id: string; label: string }[] = [];
77 
78    for (const column of table.getAllColumns()) {
79      if (!column.getCanSort()) continue;
80 
81      const label = column.columnDef.meta?.label ?? column.id;
82      labels.set(column.id, label);
83 
84      if (!sortingIds.has(column.id)) {
85        availableColumns.push({ id: column.id, label });
86      }
87    }
88 
89    return {
90      columnLabels: labels,
91      columns: availableColumns,
92    };
93  }, [sorting, table]);
94 
95  const onSortAdd = React.useCallback(() => {
96    const firstColumn = columns[0];
97    if (!firstColumn) return;
98 
99    onSortingChange((prevSorting) => [
100      ...prevSorting,
101// … truncated