InvoiceTable

Radix

A SaaS composite that renders a Card with a hand-built table of invoices. Each row shows invoice number, date, description, formatted amount, and color-coded status Badge. Supports download actions and a detail Dialog with line items breakdown.

SaaSinvoicebillingpaymentfinancesaas

Invoice list

import { InvoiceTable } from '@primstack/ui/invoice-table'

<InvoiceTable
  invoices={[
    { id: '1', number: 'INV-001', date: '2024-01-15', amount: 99.00, status: 'paid' },
    { id: '2', number: 'INV-002', date: '2024-02-15', amount: 99.00, status: 'pending' },
  ]}
  onDownload={(id) => downloadPdf(id)}
/>

With download

import { InvoiceTable } from '@primstack/ui/invoice-table'

<InvoiceTable
  invoices={invoices}
  onDownload={(id) => downloadInvoice(id)}
/>

Related Components

Card

Composable container with header, content, and footer slots.

data-displaycontainersurface

Badge

Small status label with color variants.

data-displaylabelstatus

Dialog

Modal dialog with overlay, accessible focus management.

overlaysmodalpopup

Skeleton

Placeholder loading shimmer for content areas.

feedbackloadingplaceholder