animated-table-column-demo

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