Data Table Sort List

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";
11 
12import { Badge } from "@/components/ui/badge";
13import { Button } from "@/components/ui/button";
14import {
15  Command,
16  CommandEmpty,
17  CommandGroup,
18  CommandInput,
19  CommandItem,
20  CommandList,
21} from "@/components/ui/command";
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 { dataTableConfig } from "@/config/data-table";
43import { cn } from "@/lib/utils";
44 
45const SORT_SHORTCUT_KEY = "s";
46const REMOVE_SORT_SHORTCUTS = ["backspace", "delete"];
47 
48interface DataTableSortListProps<TData>
49  extends React.ComponentProps<typeof PopoverContent> {
50  table: Table<TData>;
51  disabled?: boolean;
52}
53 
54export function DataTableSortList<TData>({
55  table,
56  disabled,
57  className,
58  ...props
59}: DataTableSortListProps<TData>) {
60  const id = React.useId();
61  const labelId = React.useId();
62  const descriptionId = React.useId();
63  const [open, setOpen] = React.useState(false);
64  const addButtonRef = React.useRef<HTMLButtonElement>(null);
65 
66  const sorting = table.getState().sorting;
67  const onSortingChange = table.setSorting;
68 
69  const { columnLabels, columns } = React.useMemo(() => {
70    const labels = new Map<string, string>();
71    const sortingIds = new Set(sorting.map((s) => s.id));
72    const availableColumns: { id: string; label: string }[] = [];
73 
74    for (const column of table.getAllColumns()) {
75      if (!column.getCanSort()) continue;
76 
77      const label = column.columnDef.meta?.label ?? column.id;
78      labels.set(column.id, label);
79 
80      if (!sortingIds.has(column.id)) {
81        availableColumns.push({ id: column.id, label });
82      }
83    }
84 
85    return {
86      columnLabels: labels,
87      columns: availableColumns,
88    };
89  }, [sorting, table]);
90 
91  const onSortAdd = React.useCallback(() => {
92    const firstColumn = columns[0];
93    if (!firstColumn) return;
94 
95    onSortingChange((prevSorting) => [
96      ...prevSorting,
97      { id: firstColumn.id, desc: false },
98    ]);
99  }, [columns, onSortingChange]);
100 
101  const onSortUpdate = React.useCallback(
102// … truncated