51: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"] 52: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"] 53:T385a,'use client'; import * as React from 'react'; import { DataTable, type DataTableColumn } from '@/components/spectrumui/data-table'; /* Iconly / Bold icons, filled with currentColor. */ type IconProps = React.SVGProps; function Glyph({ children, ...props }: IconProps) { return ( ); } /** Iconly / Bold / More Circle. */ function IconMore(props: IconProps) { return ( ); } /** Iconly / Bold / Download. */ function IconDownload(props: IconProps) { return ( ); } /** Iconly / Bold / Delete. */ function IconDelete(props: IconProps) { return ( ); } type PaymentStatus = 'paid' | 'pending' | 'failed' | 'refunded'; interface Payment { id: string; customer: string; email: string; avatar: string; status: PaymentStatus; method: string; date: string; amount: number; plan: string; seats: number; } const PAYMENTS: Payment[] = [ { id: 'in_4021', customer: 'Marta Halapin', email: 'marta@northsail.co', avatar: '/avatars/people/01.jpg', status: 'paid', method: 'Visa •• 4242', date: '2026-09-08', amount: 1840, plan: 'Scale (annual)', seats: 24, }, { id: 'in_4020', customer: 'Devansh Rao', email: 'devansh@quillbase.io', avatar: '/avatars/people/02.jpg', status: 'pending', method: 'ACH transfer', date: '2026-09-08', amount: 420, plan: 'Team (monthly)', seats: 6, }, { id: 'in_4019', customer: 'Ines Almeida', email: 'ines@fold.studio', avatar: '/avatars/people/03.jpg', status: 'paid', method: 'Mastercard •• 8801', date: '2026-09-07', amount: 96, plan: 'Starter (monthly)', seats: 2, }, { id: 'in_4018', customer: 'Tobias Werner', email: 'tobias@heliolab.de', avatar: '/avatars/people/04.jpg', status: 'failed', method: 'Visa •• 1119', date: '2026-09-07', amount: 2400, plan: 'Scale (annual)', seats: 32, }, { id: 'in_4017', customer: 'Amara Okonjo', email: 'amara@brightpath.ng', avatar: '/avatars/people/05.jpg', status: 'paid', method: 'Amex •• 3005', date: '2026-09-06', amount: 780, plan: 'Team (annual)', seats: 12, }, { id: 'in_4016', customer: 'Rafael Costa', email: 'rafael@medela.com.br', avatar: '/avatars/people/06.jpg', status: 'refunded', method: 'Visa •• 6710', date: '2026-09-05', amount: 96, plan: 'Starter (monthly)', seats: 2, }, { id: 'in_4015', customer: 'Suki Tanaka', email: 'suki@kirin-works.jp', avatar: '/avatars/people/07.jpg', status: 'paid', method: 'Wire transfer', date: '2026-09-05', amount: 5600, plan: 'Enterprise', seats: 140, }, { id: 'in_4014', customer: 'Elliot Brandt', email: 'elliot@zoning.app', avatar: '/avatars/people/08.jpg', status: 'pending', method: 'ACH transfer', date: '2026-09-04', amount: 320, plan: 'Team (monthly)', seats: 5, }, { id: 'in_4013', customer: 'Nour Haddad', email: 'nour@carbonline.me', avatar: '/avatars/people/09.jpg', status: 'paid', method: 'Mastercard •• 2260', date: '2026-09-03', amount: 1120, plan: 'Scale (monthly)', seats: 18, }, { id: 'in_4012', customer: 'Priya Venkat', email: 'priya@loomstack.in', avatar: '/avatars/people/10.jpg', status: 'paid', method: 'Visa •• 9033', date: '2026-09-02', amount: 240, plan: 'Team (monthly)', seats: 4, }, { id: 'in_4011', customer: 'Kwame Mensah', email: 'kwame@arcfield.gh', avatar: '/avatars/people/11.jpg', status: 'failed', method: 'Visa •• 4477', date: '2026-09-02', amount: 780, plan: 'Team (annual)', seats: 12, }, { id: 'in_4010', customer: 'Lena Fischer', email: 'lena@paperkite.ch', avatar: '/avatars/people/12.jpg', status: 'paid', method: 'Amex •• 7712', date: '2026-09-01', amount: 3200, plan: 'Enterprise', seats: 80, }, { id: 'in_4009', customer: 'Owen Whitcombe', email: 'owen@tidepool.uk', avatar: '/avatars/people/13.jpg', status: 'paid', method: 'Visa •• 5521', date: '2026-08-31', amount: 96, plan: 'Starter (monthly)', seats: 1, }, { id: 'in_4008', customer: 'Sara Lindqvist', email: 'sara@nordform.se', avatar: '/avatars/people/14.jpg', status: 'refunded', method: 'Mastercard •• 1044', date: '2026-08-30', amount: 420, plan: 'Team (monthly)', seats: 6, }, ]; const STATUS_STYLE: Record = { paid: 'bg-emerald-50 text-emerald-700 ring-emerald-600/20 dark:bg-emerald-400/10 dark:text-emerald-300 dark:ring-emerald-300/20', pending: 'bg-amber-50 text-amber-800 ring-amber-600/20 dark:bg-amber-400/10 dark:text-amber-300 dark:ring-amber-300/25', failed: 'bg-rose-50 text-rose-700 ring-rose-600/20 dark:bg-rose-400/10 dark:text-rose-300 dark:ring-rose-300/25', refunded: 'bg-neutral-100 text-neutral-600 ring-neutral-500/20 dark:bg-neutral-100/10 dark:text-neutral-300 dark:ring-white/15', }; const money = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0, }); const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; /** Formatted by hand rather than by locale, so the server and client agree. */ function shortDate(iso: string) { const [, month, day] = iso.split('-'); return `${MONTHS[Number(month) - 1]} ${Number(day)}`; } function StatusPill({ status }: { status: PaymentStatus }) { return ( ); } const columns: DataTableColumn[] = [ { id: 'customer', header: 'Customer', sortable: true, value: (row) => row.customer, cell: (row) => (

{/* eslint-disable-next-line @next/next/no-img-element */}

{row.customer} {row.email}

), }, { id: 'status', header: 'Status', sortable: true, value: (row) => row.status, cell: (row) => , }, { id: 'date', header: 'Date', sortable: true, hideBelow: 'sm', value: (row) => row.date, cell: (row) => {shortDate(row.date)}, }, { id: 'amount', header: 'Amount', sortable: true, numeric: true, value: (row) => row.amount, formatTotal: (sum) => money.format(sum), cell: (row) => ( {money.format(row.amount)} ), }, ]; export default function DataTableDemo() { const [rows, setRows] = React.useState(PAYMENTS); const removed = PAYMENTS.length - rows.length; return (

row.id} rowLabel={(row) => `payment from ${row.customer}`} caption="Payments from the last two weeks, with status, method, date and amount." quickFilter={{ columnId: 'status', label: 'Filter by status' }} totals={['amount']} onDelete={(ids) => setRows((current) => current.filter((row) => !ids.includes(row.id)))} toolbar={ <> {removed > 0 && ( )} } selectable defaultSort={{ columnId: 'date', direction: 'desc' }} pageSize={6} renderDetail={(row) => (

{label}: {value}

)} rowActions={(row) => ( )} bulkActions={({ ids, clear, remove }) => ( <> )} />

); } 50:["$","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,["$","$L51",null,{"namespace":"@spectrumui","registryDependencies":["@spectrumui/data-table"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"app/registry/data-table/data-table-demo.tsx","content":"$53","type":"registry:component","target":"components/spectrumui/data-table-demo.tsx"}],"className":"h-[70svh] min-h-80"}]]}]