Animated Data Table

1import { useState } from "react";
2 
3type SortKey = "name" | "copies" | "likes";
4const DATA = [
5  { name: "Glassmorphism Hero", category: "Heroes", model: "Claude Opus 4", copies: 712, likes: 198, status: "featured" },
6  { name: "Neubrutalist Buttons", category: "Buttons", model: "GPT-4o", copies: 423, likes: 87, status: "approved" },
7  { name: "Pricing Cards", category: "Pricing", model: "Claude Sonnet 4", copies: 867, likes: 234, status: "featured" },
8  { name: "Dark Modal", category: "Modals", model: "Gemini 2.5 Pro", copies: 245, likes: 56, status: "approved" },
9  { name: "Chat Interface", category: "AI Chat", model: "Claude Sonnet 4", copies: 1120, likes: 312, status: "featured" },
10  { name: "Sidebar Nav", category: "Sidebars", model: "GPT-4o", copies: 512, likes: 108, status: "approved" },
11  { name: "Upload Dropzone", category: "Forms", model: "o3", copies: 278, likes: 61, status: "pending" },
12  { name: "Toast Stack", category: "Alerts", model: "DeepSeek V3", copies: 156, likes: 38, status: "approved" },
13];
14 
15const STATUS_COLORS: Record<string, string> = {
16  featured: "bg-blue-500/10 text-blue-400",
17  approved: "bg-green-500/10 text-green-400",
18  pending: "bg-yellow-500/10 text-yellow-400",
19};
20 
21export default function DataTable() {
22  const [sortKey, setSortKey] = useState<SortKey>("copies");
23  const [asc, setAsc] = useState(false);
24 
25  const sorted = [...DATA].sort((a, b) => {
26    const va = a[sortKey], vb = b[sortKey];
27    if (typeof va === "number" && typeof vb === "number") return asc ? va - vb : vb - va;
28    return asc ? String(va).localeCompare(String(vb)) : String(vb).localeCompare(String(va));
29  });
30 
31  const toggleSort = (key: SortKey) => {
32    if (sortKey === key) setAsc(!asc);
33    else { setSortKey(key); setAsc(false); }
34  };
35 
36  const SortIcon = ({ active }: { active: boolean }) => (
37    <svg className={`ml-1 inline h-3 w-3 ${active ? "text-orange-400" : "text-zinc-600"}`} fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
38      <path strokeLinecap="round" d="M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" />
39    </svg>
40  );
41 
42  return (
43    <div className="flex min-h-screen items-start justify-center bg-[#09090b] p-8 pt-20">
44      <div className="w-full max-w-4xl overflow-hidden rounded-xl border border-zinc-800">
45        <table className="w-full text-left text-sm">
46          <thead className="sticky top-0 border-b border-zinc-800 bg-[#111113]">
47            <tr>
48              <th className="px-4 py-3 font-medium text-zinc-400 cursor-pointer select-none" onClick={() => toggleSort("name")}>Name <SortIcon active={sortKey==="name"} /></th>
49              <th className="px-4 py-3 font-medium text-zinc-400">Category</th>
50              <th className="px-4 py-3 font-medium text-zinc-400">Model</th>
51              <th className="px-4 py-3 font-medium text-zinc-400 cursor-pointer select-none text-right" onClick={() => toggleSort("copies")}>Copies <SortIcon active={sortKey==="copies"} /></th>
52              <th className="px-4 py-3 font-medium text-zinc-400 cursor-pointer select-none text-right" onClick={() => toggleSort("likes")}>Likes <SortIcon active={sortKey==="likes"} /></th>
53              <th className="px-4 py-3 font-medium text-zinc-400">Status</th>
54            </tr>
55          </thead>
56          <tbody>
57            {sorted.map((row, i) => (
58              <tr key={row.name} className="border-b border-zinc-800/50 transition hover:bg-zinc-800/30">
59                <td className="px-4 py-3 font-medium text-white">{row.name}</td>
60                <td className="px-4 py-3 text-zinc-400">{row.category}</td>
61                <td className="px-4 py-3 text-zinc-400">{row.model}</td>
62                <td className="px-4 py-3 text-right tabular-nums text-zinc-300">{row.copies.toLocaleString()}</td>
63                <td className="px-4 py-3 text-right tabular-nums text-zinc-300">{row.likes.toLocaleString()}</td>
64                <td className="px-4 py-3">
65                  <span className={`inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_COLORS[row.status]}`}>
66                    {row.status}
67                  </span>
68                </td>
69              </tr>
70            ))}
71          </tbody>
72        </table>
73      </div>
74    </div>
75  );
76}