animated-table-full-demo

1import { Mail, MapPin, Phone, User } from "lucide-react";
2import { useMemo, useState } from "react";
3import {
4  AnimatedTable,
5  type ColumnDef,
6  type SortDirection,
7} from "@/registry/default/ui/animated-table";
8 
9interface UserData {
10  id: string;
11  name: string;
12  email: string;
13  role: string;
14  status: "active" | "inactive" | "pending";
15  department: string;
16  joinDate: string;
17  location: string;
18  phone: string;
19}
20 
21const generateData = (): UserData[] => [
22  {
23    id: "1",
24    name: "Alice Johnson",
25    email: "alice@example.com",
26    role: "Admin",
27    status: "active",
28    department: "Engineering",
29    joinDate: "2024-01-15",
30    location: "New York, NY",
31    phone: "+1 555-0101",
32  },
33  {
34    id: "2",
35    name: "Bob Smith",
36    email: "bob@example.com",
37    role: "Developer",
38    status: "active",
39    department: "Engineering",
40    joinDate: "2024-02-20",
41    location: "San Francisco, CA",
42    phone: "+1 555-0102",
43  },
44  {
45    id: "3",
46    name: "Carol White",
47    email: "carol@example.com",
48    role: "Designer",
49    status: "pending",
50    department: "Design",
51    joinDate: "2024-03-10",
52    location: "Los Angeles, CA",
53    phone: "+1 555-0103",
54  },
55  {
56    id: "4",
57    name: "David Brown",
58    email: "david@example.com",
59    role: "Developer",
60    status: "inactive",
61    department: "Engineering",
62    joinDate: "2023-11-05",
63    location: "Chicago, IL",
64    phone: "+1 555-0104",
65  },
66  {
67    id: "5",
68    name: "Emma Davis",
69    email: "emma@example.com",
70    role: "Manager",
71    status: "active",
72    department: "Management",
73    joinDate: "2023-08-22",
74    location: "Boston, MA",
75    phone: "+1 555-0105",
76  },
77  {
78    id: "6",
79    name: "Frank Miller",
80    email: "frank@example.com",
81    role: "Developer",
82    status: "active",
83    department: "Engineering",
84    joinDate: "2024-04-01",
85    location: "Seattle, WA",
86    phone: "+1 555-0106",
87  },
88  {
89    id: "7",
90    name: "Grace Lee",
91    email: "grace@example.com",
92    role: "Designer",
93    status: "active",
94    department: "Design",
95    joinDate: "2024-01-30",
96    location: "Austin, TX",
97    phone: "+1 555-0107",
98  },
99  {
100    id: "8",
101    name: "Henry Wilson",
102    email: "henry@example.com",
103    role: "Developer",
104    status: "pending",
105    department: "Engineering",
106    joinDate: "2024-05-15",
107    location: "Denver, CO",
108    phone: "+1 555-0108",
109  },
110  {
111    id: "9",
112    name: "Ivy Chen",
113    email: "ivy@example.com",
114    role: "Manager",
115    status: "active",
116// … truncated