"use client"; import React, { useMemo, useState } from "react"; import { Search, ChevronUp, ChevronDown, ChevronsUpDown, ChevronLeft, ChevronRight, MoreHorizontal, Plus, } from "lucide-react"; type Row = { name: string; owner: string; status: "Live" | "Draft" | "Archived"; views: number; updated: string; }; const ROWS: Row[] = [ { name: "Aurora Button", owner: "Design", status: "Live", views: 1240, updated: "2h ago" }, { name: "Metric Card", owner: "Growth", status: "Draft", views: 312, updated: "1d ago" }, { name: "Search Input", owner: "Platform", status: "Live", views: 876, updated: "4h ago" }, { name: "Nav Rail", owner: "Design", status: "Live", views: 2031, updated: "6h ago" }, { name: "Toast Stack", owner: "Platform", status: "Archived", views: 94, updated: "2w ago" }, { name: "Onboarding Modal", owner: "Growth", status: "Draft", views: 501, updated: "3d ago" }, { name: "Pricing Table", owner: "Growth", status: "Live", views: 1687, updated: "12h ago" }, { name: "Empty State", owner: "Design", status: "Draft", views: 158, updated: "5d ago" }, { name: "Command Palette", owner: "Platform", status: "Live", views: 943, updated: "1h ago" }, { name: "Avatar Group", owner: "Design", status: "Archived", views: 67, updated: "4w ago" }, ]; const STATUS_STYLES: Record = { Live: "bg-emerald-400/10 text-emerald-300", Draft: "bg-amber-400/10 text-amber-300", Archived: "bg-zinc-400/10 text-zinc-400", }; type SortKey = keyof Pick; type SortDir = "asc" | "desc"; const PAGE_SIZE = 5; function initials(text: string) { return text .split(" ") .map((w) => w[0]) .join("") .slice(0, 2) .toUpperCase(); } export default function AdminDataGridTable() { const [query, setQuery] = useState(""); const [sortKey, setSortKey] = useState("views"); const [sortDir, setSortDir] = useState("desc"); const [selected, setSelected] = useState>(new Set()); const [page, setPage] = useState(1); const filtered = useMemo(() => { const q = query.trim().toLowerCase(); const base = q ? ROWS.filter( (r) => r.name.toLowerCase().includes(q) || r.owner.toLowerCase().includes(q) || r.status.toLowerCase().includes(q) ) : ROWS; const sorted = [...base].sort((a, b) => { const av = a[sortKey]; const bv = b[sortKey]; const cmp = typeof av === "number" && typeof bv === "number" ? av - bv : String(av).localeCompare(String(bv)); return sortDir === "asc" ? cmp : -cmp; }); return sorted; }, [query, sortKey, sortDir]); const pageCount = Math.max(1, Math.ceil(filtered.length / PAGE_SIZE)); const currentPage = Math.min(page, pageCount); const pageRows = filtered.slice( (currentPage - 1) * PAGE_SIZE, currentPage * PAGE_SIZE ); const allOnPageSelected = pageRows.length > 0 && pageRows.every((r) => selected.has(r.name)); const someOnPageSelected = pageRows.some((r) => selected.has(r.name)); function toggleSort(key: SortKey) { if (key === sortKey) { setSortDir((d) => (d === "asc" ? "desc" : "asc")); } else { setSortKey(key); setSortDir("asc"); } } function toggleRow(name: string) { setSelected((prev) => { const next = new Set(prev); if (next.has(name)) next.delete(name); else next.add(name); return next; }); } function toggleAllOnPage() { setSelected((prev) => { const next = new Set(prev); if (allOnPageSelected) { pageRows.forEach((r) => next.delete(r.name)); } else { pageRows.forEach((r) => next.add(r.name)); } return next; }); } function SortIcon({ column }: { column: SortKey }) { if (sortKey !== column) return ; return sortDir === "asc" ? ( ) : ( ); } return (

{/* Header */}

Admin Data Grid Table

{filtered.length} component{filtered.length !== 1 ? "s" : ""} {selected.size > 0 ? ` · ${selected.size} selected` : ""}

{ setQuery(e.target.value); setPage(1); }} placeholder="Search components…" className="w-full rounded-lg border border-white/10 bg-white/[0.04] py-2 pl-8 pr-3 text-sm text-white placeholder-zinc-500 outline-none focus:border-white/20 sm:w-56" />

{/* Table */}

{pageRows.map((row) => { const isSelected = selected.has(row.name); return ( ); })} {pageRows.length === 0 && ( )}

{ if (el) el.indeterminate = !allOnPageSelected && someOnPageSelected; }} onChange={toggleAllOnPage} className="h-3.5 w-3.5 rounded border-white/20 bg-transparent accent-white" />
toggleRow(row.name)} className="h-3.5 w-3.5 rounded border-white/20 bg-transparent accent-white" />	{initials(row.name)} {row.name} Updated {row.updated}	{row.owner}	{row.status}	{row.views.toLocaleString()}
No components match “{query}”.

{/* Footer / pagination */}

Showing{" "} {filtered.length === 0 ? 0 : (currentPage - 1) * PAGE_SIZE + 1} –{Math.min(currentPage * PAGE_SIZE, filtered.length)} of{" "} {filtered.length}

{currentPage} / {pageCount}

); }

Admin Data Grid Table | Data Table for React & Tailwind CSS