animated-table-search-demo

1import { User } from "lucide-react";
2import { useMemo, useState } from "react";
3import {
4  AnimatedTable,
5  type ColumnDef,
6} from "@/registry/default/ui/animated-table";
7 
8interface UserData {
9  id: string;
10  name: string;
11  email: string;
12  role: string;
13  status: "active" | "inactive" | "pending";
14}
15 
16const data: UserData[] = [
17  {
18    id: "1",
19    name: "Alice Johnson",
20    email: "alice@example.com",
21    role: "Admin",
22    status: "active",
23  },
24  {
25    id: "2",
26    name: "Bob Smith",
27    email: "bob@example.com",
28    role: "Developer",
29    status: "active",
30  },
31  {
32    id: "3",
33    name: "Carol White",
34    email: "carol@example.com",
35    role: "Designer",
36    status: "pending",
37  },
38  {
39    id: "4",
40    name: "David Brown",
41    email: "david@example.com",
42    role: "Developer",
43    status: "inactive",
44  },
45  {
46    id: "5",
47    name: "Emma Davis",
48    email: "emma@example.com",
49    role: "Manager",
50    status: "active",
51  },
52  {
53    id: "6",
54    name: "Frank Miller",
55    email: "frank@example.com",
56    role: "Developer",
57    status: "active",
58  },
59  {
60    id: "7",
61    name: "Grace Lee",
62    email: "grace@example.com",
63    role: "Designer",
64    status: "active",
65  },
66];
67 
68const StatusBadge = ({ status }: { status: UserData["status"] }) => {
69  const styles = {
70    active: "bg-green-500/20 text-green-400 border-green-500/30",
71    inactive: "bg-red-500/20 text-red-400 border-red-500/30",
72    pending: "bg-yellow-500/20 text-yellow-400 border-yellow-500/30",
73  };
74 
75  return (
76    <span
77      className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 font-medium text-xs ${styles[status]}`}
78    >
79      <span
80        className={`h-1.5 w-1.5 rounded-full ${status === "active" ? "bg-green-400" : status === "inactive" ? "bg-red-400" : "bg-yellow-400"}`}
81      />
82      {status.charAt(0).toUpperCase() + status.slice(1)}
83    </span>
84  );
85};
86 
87const columns: ColumnDef<UserData>[] = [
88  {
89    id: "name",
90    header: "Name",
91    sortable: true,
92    cell: (row) => (
93      <div className="flex items-center gap-3">
94        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-primary/20 text-primary">
95          <User className="h-4 w-4" />
96        </div>
97        <span className="font-medium text-foreground">{row.name}</span>
98      </div>
99    ),
100  },
101  {
102    id: "email",
103    header: "Email",
104    accessorKey: "email",
105    sortable: true,
106  },
107  {
108    id: "role",
109    header: "Role",
110    accessorKey: "role",
111    sortable: true,
112  },
113  {
114// … truncated