animated-table-pagination-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 generateData = (): 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    id: "8",
68    name: "Henry Wilson",
69    email: "henry@example.com",
70    role: "Developer",
71    status: "pending",
72  },
73  {
74    id: "9",
75    name: "Ivy Chen",
76    email: "ivy@example.com",
77    role: "Manager",
78    status: "active",
79  },
80  {
81    id: "10",
82    name: "Jack Taylor",
83    email: "jack@example.com",
84    role: "Developer",
85    status: "active",
86  },
87  {
88    id: "11",
89    name: "Kate Anderson",
90    email: "kate@example.com",
91    role: "Designer",
92    status: "inactive",
93  },
94  {
95    id: "12",
96    name: "Liam Harris",
97    email: "liam@example.com",
98    role: "Developer",
99    status: "active",
100  },
101];
102 
103const allData = generateData();
104 
105const StatusBadge = ({ status }: { status: UserData["status"] }) => {
106  const styles = {
107    active: "bg-green-500/20 text-green-400 border-green-500/30",
108    inactive: "bg-red-500/20 text-red-400 border-red-500/30",
109    pending: "bg-yellow-500/20 text-yellow-400 border-yellow-500/30",
110  };
111 
112  return (
113    <span
114      className={`inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 font-medium text-xs ${styles[status]}`}
115    >
116      <span
117        className={`h-1.5 w-1.5 rounded-full ${status === "active" ? "bg-green-400" : status === "inactive" ? "bg-red-400" : "bg-yellow-400"}`}
118      />
119// … truncated