import { useState } from "react"; type SortKey = "name" | "copies" | "likes"; const DATA = [ { name: "Glassmorphism Hero", category: "Heroes", model: "Claude Opus 4", copies: 712, likes: 198, status: "featured" }, { name: "Neubrutalist Buttons", category: "Buttons", model: "GPT-4o", copies: 423, likes: 87, status: "approved" }, { name: "Pricing Cards", category: "Pricing", model: "Claude Sonnet 4", copies: 867, likes: 234, status: "featured" }, { name: "Dark Modal", category: "Modals", model: "Gemini 2.5 Pro", copies: 245, likes: 56, status: "approved" }, { name: "Chat Interface", category: "AI Chat", model: "Claude Sonnet 4", copies: 1120, likes: 312, status: "featured" }, { name: "Sidebar Nav", category: "Sidebars", model: "GPT-4o", copies: 512, likes: 108, status: "approved" }, { name: "Upload Dropzone", category: "Forms", model: "o3", copies: 278, likes: 61, status: "pending" }, { name: "Toast Stack", category: "Alerts", model: "DeepSeek V3", copies: 156, likes: 38, status: "approved" }, ]; const STATUS_COLORS: Record = { featured: "bg-blue-500/10 text-blue-400", approved: "bg-green-500/10 text-green-400", pending: "bg-yellow-500/10 text-yellow-400", }; export default function DataTable() { const [sortKey, setSortKey] = useState("copies"); const [asc, setAsc] = useState(false); const sorted = [...DATA].sort((a, b) => { const va = a[sortKey], vb = b[sortKey]; if (typeof va === "number" && typeof vb === "number") return asc ? va - vb : vb - va; return asc ? String(va).localeCompare(String(vb)) : String(vb).localeCompare(String(va)); }); const toggleSort = (key: SortKey) => { if (sortKey === key) setAsc(!asc); else { setSortKey(key); setAsc(false); } }; const SortIcon = ({ active }: { active: boolean }) => ( ); return (

{sorted.map((row, i) => ( ))}

toggleSort("name")}>Name	Category	Model	toggleSort("copies")}>Copies	toggleSort("likes")}>Likes	Status
{row.name}	{row.category}	{row.model}	{row.copies.toLocaleString()}	{row.likes.toLocaleString()}	{row.status}

); }

Tables Components

Animated Data Table