data-table

1'use client';
2 
3import {
4  closestCenter,
5  DndContext,
6  type DragEndEvent,
7  KeyboardSensor,
8  PointerSensor,
9  useSensor,
10  useSensors,
11} from '@dnd-kit/core';
12import {
13  arrayMove,
14  SortableContext,
15  sortableKeyboardCoordinates,
16  useSortable,
17  verticalListSortingStrategy,
18} from '@dnd-kit/sortable';
19import { CSS } from '@dnd-kit/utilities';
20import {
21  type Column,
22  type ColumnDef,
23  type ColumnFiltersState,
24  type ColumnPinningState,
25  type FilterFn,
26  flexRender,
27  getCoreRowModel,
28  getFacetedRowModel,
29  getFacetedUniqueValues,
30  getFilteredRowModel,
31  getPaginationRowModel,
32  getSortedRowModel,
33  type OnChangeFn,
34  type PaginationState,
35  type RowData,
36  type RowSelectionState,
37  type SortingState,
38  type Table,
39  useReactTable,
40  type VisibilityState,
41} from '@tanstack/react-table';
42import {
43  ArrowDown,
44  ArrowDownUp,
45  ArrowUp,
46  Bookmark,
47  CheckIcon,
48  ChevronDown,
49  ChevronLeft,
50  ChevronRight,
51  ChevronsLeft,
52  ChevronsRight,
53  ChevronsUpDown,
54  EyeOff,
55  GripVertical,
56  Inbox,
57  ListFilter,
58  Loader2,
59  Plus,
60  PlusCircle,
61  Settings2,
62  Trash2,
63  X,
64} from 'lucide-react';
65import * as React from 'react';
66 
67import { Button } from '@/components/ui/button';
68import { Checkbox } from '@/components/ui/checkbox';
69import {
70  Command,
71  CommandEmpty,
72  CommandGroup,
73  CommandInput,
74  CommandItem,
75  CommandList,
76  CommandSeparator,
77} from '@/components/ui/command';
78import {
79  Dialog,
80  DialogContent,
81  DialogDescription,
82  DialogFooter,
83  DialogHeader,
84  DialogTitle,
85  DialogTrigger,
86} from '@/components/ui/dialog';
87import { Input } from '@/components/ui/input';
88import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
89import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
90import { Separator } from '@/components/ui/separator';
91import { TableBody, TableCell, TableHead, TableHeader, Table as TableRoot, TableRow } from '@/components/ui/table';
92import { cn } from '@/lib/utils';
93 
94export type DataTableFilterOption = {
95  label: string;
96  value: string;
97  icon?: React.ComponentType<{ className?: string }>;
98  count?: number;
99};
100 
101declare module '@tanstack/react-table' {
102  interface ColumnMeta<TData extends RowData, TValue> {
103    label?: string;
104    placeholder?: string;
105    variant?: 'text' | 'number' | 'date' | 'select' | 'multiSelect';
106    options?: DataTableFilterOption[];
107    icon?: React.ComponentType<{ className?: string }>;
108  }
109}
110 
111// … truncated