'use client'; /* * Vireo Next.js — Grid.js (tables/gridjs). Faithful port of * src/html/tables/gridjs.html: the lightweight data-grid chrome — global search, * sortable columns & pagination — built on the shared .ax-table classes (the * reference uses no external Grid.js runtime; it's Alpine-driven, re-expressed * here with useState so pixels + behavior match 1:1). */ import { useMemo, useState } from 'react'; import { PageHead } from '../../components/shell/PageHead'; type SortDir = 'asc' | 'desc'; interface Row { id: string; number: string; customer: string; initials: string; items: number; total: number; status: string; placed: string; daysAgo: number; c: string; } const C = { cyan: 'var(--ax-viz-cyan)', violet: 'var(--ax-viz-violet)', pink: 'var(--ax-viz-pink)', amber: 'var(--ax-viz-amber)', emerald: 'var(--ax-viz-emerald)', red: 'var(--ax-viz-red)', }; const ROWS: Row[] = [ { id: 'ord_10482', number: '10482', customer: 'Camila Rossi', initials: 'CR', items: 4, total: 312.0, status: 'Shipped', placed: '2h ago', daysAgo: 0, c: C.cyan }, { id: 'ord_10481', number: '10481', customer: 'Henry Whitlock', initials: 'HW', items: 1, total: 129.0, status: 'Processing', placed: '5h ago', daysAgo: 0, c: C.violet }, { id: 'ord_10480', number: '10480', customer: 'Aisha Bello', initials: 'AB', items: 3, total: 80.0, status: 'Delivered', placed: '1d ago', daysAgo: 1, c: C.emerald }, { id: 'ord_10479', number: '10479', customer: 'Erik Lindqvist', initials: 'EL', items: 9, total: 1544.0, status: 'Delivered', placed: '2d ago', daysAgo: 2, c: C.amber }, { id: 'ord_10478', number: '10478', customer: 'Daniel Cho', initials: 'DC', items: 1, total: 24.0, status: 'Cancelled', placed: '3d ago', daysAgo: 3, c: C.red }, { id: 'ord_10477', number: '10477', customer: 'Olivia Penrose', initials: 'OP', items: 5, total: 200.0, status: 'Delivered', placed: '4d ago', daysAgo: 4, c: C.pink }, { id: 'ord_10476', number: '10476', customer: 'Sofia Marchetti', initials: 'SM', items: 2, total: 104.0, status: 'Shipped', placed: '5d ago', daysAgo: 5, c: C.cyan }, { id: 'ord_10475', number: '10475', customer: 'Yuki Tanaka', initials: 'YT', items: 5, total: 225.0, status: 'Pending', placed: '6d ago', daysAgo: 6, c: C.violet }, { id: 'ord_10474', number: '10474', customer: 'Rahul Menon', initials: 'RM', items: 5, total: 80.0, status: 'Delivered', placed: '7d ago', daysAgo: 7, c: C.amber }, { id: 'ord_10473', number: '10473', customer: 'Nadia Haddad', initials: 'NH', items: 3, total: 238.0, status: 'Refunded', placed: '8d ago', daysAgo: 8, c: C.pink }, { id: 'ord_10472', number: '10472', customer: 'Greta Hoffmann', initials: 'GH', items: 2, total: 160.0, status: 'Delivered', placed: '9d ago', daysAgo: 9, c: C.emerald }, { id: 'ord_10471', number: '10471', customer: 'Mateo Alvarez', initials: 'MA', items: 1, total: 44.0, status: 'Processing', placed: '10d ago', daysAgo: 10, c: C.cyan }, { id: 'ord_10470', number: '10470', customer: 'Camila Rossi', initials: 'CR', items: 6, total: 498.0, status: 'Delivered', placed: '12d ago', daysAgo: 12, c: C.violet }, { id: 'ord_10469', number: '10469', customer: 'Olivia Penrose', initials: 'OP', items: 2, total: 78.0, status: 'Shipped', placed: '14d ago', daysAgo: 14, c: C.pink }, { id: 'ord_10468', number: '10468', customer: 'Erik Lindqvist', initials: 'EL', items: 8, total: 1280.0, status: 'Delivered', placed: '15d ago', daysAgo: 15, c: C.amber }, { id: 'ord_10467', number: '10467', customer: 'Yuki Tanaka', initials: 'YT', items: 3, total: 172.0, status: 'Delivered', placed: '17d ago', daysAgo: 17, c: C.emerald }, ]; const money = (v: number) => '$' + v.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }); const statusClass = (s: string) => (({ Delivered: 'ax-badge--success', Shipped: 'ax-badge--accent', Processing: 'ax-badge--info', Pending: 'ax-badge--warning', Cancelled: 'ax-badge--neutral', Refunded: 'ax-badge--danger' } as Record)[s] || 'ax-badge--neutral'); const SortGlyph = ({ active, dir }: { active: boolean; dir: SortDir }) => { if (!active) return ; return dir === 'asc' ? : ; }; export function Gridjs() { const [q, setQ] = useState(''); const [page, setPage] = useState(1); const [sortKey, setSortKey] = useState('daysAgo'); const [sortDir, setSortDir] = useState('asc'); const perPage = 8; const filtered = useMemo(() => { const term = q.trim().toLowerCase(); let r = ROWS.filter((x) => !term || x.number.includes(term) || x.customer.toLowerCase().includes(term) || x.status.toLowerCase().includes(term)); const dir = sortDir === 'asc' ? 1 : -1; r = [...r].sort((a, b) => { const va = a[sortKey]; const vb = b[sortKey]; if (typeof va === 'number' && typeof vb === 'number') return (va - vb) * dir; return String(va).localeCompare(String(vb)) * dir; }); return r; }, [q, sortKey, sortDir]); const totalPages = Math.max(1, Math.ceil(filtered.length / perPage)); const safePage = Math.min(page, totalPages); const paged = filtered.slice((safePage - 1) * perPage, (safePage - 1) * perPage + perPage); const rangeStart = filtered.length ? (safePage - 1) * perPage + 1 : 0; const rangeEnd = Math.min(safePage * perPage, filtered.length); const pageList = Array.from({ length: totalPages }, (_, i) => i + 1); const sortBy = (k: keyof Row) => { if (sortKey === k) setSortDir((d) => (d === 'asc' ? 'desc' : 'asc')); else { setSortKey(k); setSortDir('asc'); } setPage(1); }; const ariaSort = (k: keyof Row): 'ascending' | 'descending' | 'none' => (sortKey === k ? (sortDir === 'asc' ? 'ascending' : 'descending') : 'none'); const Th = ({ k, label, num }: { k: keyof Row; label: string; num?: boolean }) => ( sortBy(k)}> {label} ); return ( <> Full data table } />

Order Ledger

{filtered.length} results

{ setQ(e.target.value); setPage(1); }} style={{ paddingInlineStart: 34 }} aria-label="Search the grid" />
{paged.map((r) => ( ))}
Orders, sortable and searchable
#{r.number}
{r.initials} {r.customer}
{r.items} {money(r.total)} {r.status} {r.placed}
{!filtered.length && (

No matches

No rows match your search. Try a different term.

)} {filtered.length > 0 && (
Showing {rangeStart} to {rangeEnd} of {filtered.length}
)}
); } export default Gridjs;