animated-table-sort-demo

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