50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:Tfff,import { User } from "lucide-react"; import { useMemo, useState } from "react"; import { AnimatedTable, type ColumnDef, } from "@/registry/default/ui/animated-table"; interface UserData { id: string; name: string; email: string; role: string; status: "active" | "inactive" | "pending"; } const generateData = (): UserData[] => [ { id: "1", name: "Alice Johnson", email: "alice@example.com", role: "Admin", status: "active", }, { id: "2", name: "Bob Smith", email: "bob@example.com", role: "Developer", status: "active", }, { id: "3", name: "Carol White", email: "carol@example.com", role: "Designer", status: "pending", }, { id: "4", name: "David Brown", email: "david@example.com", role: "Developer", status: "inactive", }, { id: "5", name: "Emma Davis", email: "emma@example.com", role: "Manager", status: "active", }, { id: "6", name: "Frank Miller", email: "frank@example.com", role: "Developer", status: "active", }, { id: "7", name: "Grace Lee", email: "grace@example.com", role: "Designer", status: "active", }, { id: "8", name: "Henry Wilson", email: "henry@example.com", role: "Developer", status: "pending", }, { id: "9", name: "Ivy Chen", email: "ivy@example.com", role: "Manager", status: "active", }, { id: "10", name: "Jack Taylor", email: "jack@example.com", role: "Developer", status: "active", }, { id: "11", name: "Kate Anderson", email: "kate@example.com", role: "Designer", status: "inactive", }, { id: "12", name: "Liam Harris", email: "liam@example.com", role: "Developer", status: "active", }, ]; const allData = generateData(); const StatusBadge = ({ status }: { status: UserData["status"] }) => { const styles = { active: "bg-green-500/20 text-green-400 border-green-500/30", inactive: "bg-red-500/20 text-red-400 border-red-500/30", pending: "bg-yellow-500/20 text-yellow-400 border-yellow-500/30", }; return ( {status.charAt(0).toUpperCase() + status.slice(1)} ); }; const columns: ColumnDef[] = [ { id: "name", header: "Name", sortable: true, cell: (row) => (

{row.name}

), }, { id: "email", header: "Email", accessorKey: "email", sortable: true, }, { id: "role", header: "Role", accessorKey: "role", sortable: true, }, { id: "status", header: "Status", sortable: true, align: "center", cell: (row) => , }, ]; export default function AnimatedTablePaginationDemo() { const [page, setPage] = useState(1); const [pageSize, setPageSize] = useState(5); const handlePageSizeChange = (newSize: number) => { setPageSize(newSize); setPage(1); }; const paginatedData = useMemo(() => { const start = (page - 1) * pageSize; return allData.slice(start, start + pageSize); }, [page, pageSize]); return (

); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@jolyui","registryDependencies":["animated-table"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"examples/animated-table-pagination-demo.tsx","content":"$52","type":"registry:example","target":""}],"className":"h-[70svh] min-h-80"}]]}]