4e: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"] 4f: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"] 50:T2300,import { Mail, MapPin, Phone, User } from "lucide-react"; import { useMemo, useState } from "react"; import { AnimatedTable, type ColumnDef, type SortDirection, } from "@/registry/default/ui/animated-table"; interface UserData { id: string; name: string; email: string; role: string; status: "active" | "inactive" | "pending"; department: string; joinDate: string; location: string; phone: string; } const generateData = (): UserData[] => [ { id: "1", name: "Alice Johnson", email: "alice@example.com", role: "Admin", status: "active", department: "Engineering", joinDate: "2024-01-15", location: "New York, NY", phone: "+1 555-0101", }, { id: "2", name: "Bob Smith", email: "bob@example.com", role: "Developer", status: "active", department: "Engineering", joinDate: "2024-02-20", location: "San Francisco, CA", phone: "+1 555-0102", }, { id: "3", name: "Carol White", email: "carol@example.com", role: "Designer", status: "pending", department: "Design", joinDate: "2024-03-10", location: "Los Angeles, CA", phone: "+1 555-0103", }, { id: "4", name: "David Brown", email: "david@example.com", role: "Developer", status: "inactive", department: "Engineering", joinDate: "2023-11-05", location: "Chicago, IL", phone: "+1 555-0104", }, { id: "5", name: "Emma Davis", email: "emma@example.com", role: "Manager", status: "active", department: "Management", joinDate: "2023-08-22", location: "Boston, MA", phone: "+1 555-0105", }, { id: "6", name: "Frank Miller", email: "frank@example.com", role: "Developer", status: "active", department: "Engineering", joinDate: "2024-04-01", location: "Seattle, WA", phone: "+1 555-0106", }, { id: "7", name: "Grace Lee", email: "grace@example.com", role: "Designer", status: "active", department: "Design", joinDate: "2024-01-30", location: "Austin, TX", phone: "+1 555-0107", }, { id: "8", name: "Henry Wilson", email: "henry@example.com", role: "Developer", status: "pending", department: "Engineering", joinDate: "2024-05-15", location: "Denver, CO", phone: "+1 555-0108", }, { id: "9", name: "Ivy Chen", email: "ivy@example.com", role: "Manager", status: "active", department: "Management", joinDate: "2023-06-12", location: "Portland, OR", phone: "+1 555-0109", }, { id: "10", name: "Jack Taylor", email: "jack@example.com", role: "Developer", status: "active", department: "Engineering", joinDate: "2024-02-28", location: "Miami, FL", phone: "+1 555-0110", }, ]; 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, hideable: false, cell: (row) => (

{row.name}

), }, { id: "email", header: "Email", accessorKey: "email", sortable: true, }, { id: "role", header: "Role", accessorKey: "role", sortable: true, }, { id: "department", header: "Department", accessorKey: "department", sortable: true, }, { id: "status", header: "Status", sortable: true, align: "center", cell: (row) => , }, { id: "joinDate", header: "Join Date", sortable: true, align: "right", cell: (row) => ( {new Date(row.joinDate).toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric", })} ), }, ]; const ExpandedRowContent = ({ row }: { row: UserData }) => (

Email: {row.email}

Phone: {row.phone}

Location: {row.location}

); export default function AnimatedTableFullDemo() { const [selectedIds, setSelectedIds] = useState<(string | number)[]>([]); const [sortColumn, setSortColumn] = useState(); const [sortDirection, setSortDirection] = useState(null); const [searchValue, setSearchValue] = useState(""); const [page, setPage] = useState(1); const [pageSize, setPageSize] = useState(5); const [visibleColumns, setVisibleColumns] = useState( columns.map((c) => c.id), ); const handleSort = (columnId: string, direction: SortDirection) => { setSortColumn(columnId); setSortDirection(direction); }; // Filter data based on search const filteredData = useMemo(() => { if (!searchValue) return allData; const search = searchValue.toLowerCase(); return allData.filter( (row) => row.name.toLowerCase().includes(search) || row.email.toLowerCase().includes(search) || row.role.toLowerCase().includes(search) || row.department.toLowerCase().includes(search), ); }, [searchValue]); // Sort filtered data const sortedData = useMemo(() => { if (!sortColumn || !sortDirection) return filteredData; return [...filteredData].sort((a, b) => { const aVal = a[sortColumn as keyof UserData]; const bVal = b[sortColumn as keyof UserData]; if (typeof aVal === "string" && typeof bVal === "string") { return sortDirection === "asc" ? aVal.localeCompare(bVal) : bVal.localeCompare(aVal); } return 0; }); }, [filteredData, sortColumn, sortDirection]); // Paginate sorted data const paginatedData = useMemo(() => { const start = (page - 1) * pageSize; return sortedData.slice(start, start + pageSize); }, [sortedData, page, pageSize]); // Reset to page 1 when search changes const handleSearchChange = (value: string) => { setSearchValue(value); setPage(1); }; const handlePageSizeChange = (newSize: number) => { setPageSize(newSize); setPage(1); }; const handleRowClick = (row: UserData) => { console.log("Clicked:", row.name); }; return (

} columnVisibility visibleColumns={visibleColumns} onVisibleColumnsChange={setVisibleColumns} pagination={{ page, pageSize, totalItems: sortedData.length, pageSizeOptions: [5, 10, 20], onPageChange: setPage, onPageSizeChange: handlePageSizeChange, }} /> {selectedIds.length > 0 && (

{selectedIds.length} row{selectedIds.length > 1 ? "s" : ""} selected

)}

); } 4d:["$","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,["$","$L4e",null,{"namespace":"@jolyui","registryDependencies":["animated-table"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"examples/animated-table-full-demo.tsx","content":"$50","type":"registry:example","target":""}],"className":"h-[70svh] min-h-80"}]]}]