Orders ledger

Orders table with sortable columns and row selection.

Usage

import { OrdersTable } from '@/components/blocks/table-01'


<OrdersTable />


// Bring your own rows and handle actions
<OrdersTable
  title="Recent orders"
  rows={[
    {
      id: 'PR-1001',
      customer: 'Jane Doe',
      company: 'Acme',
      product: 'Posters, A2',
      status: 'success',
      quantity: 100,
      unitPrice: 2.5,
    },
  ]}
  onRowAction={(action, row) => console.log(action, row.id)}
  onExport={(rows) => console.log(rows)}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/table-01

npx shadcn@latest add @pastaui-pro/table-01

yarn dlx shadcn@latest add @pastaui-pro/table-01

bunx --bun shadcn@latest add @pastaui-pro/table-01

Source

Props

Orders ledger props
Prop	Type	Default	Description
title	string	= 'Recent print orders'	Panel heading, also used for the table caption.
description	string	= 'Orders placed with the studio in the last 30 days.'	Shown on the info icon and read out in the table caption.
rows	PrintOrder[]	= 12 sample orders	Rows with an id, customer, optional company, product, status, quantity and unitPrice. The total is quantity times unit price.
currency	string	= 'USD'	Currency code for prices and totals.
locale	string	= 'en-US'	Locale used to format money.
statusLabels	Partial<Record<'success' \| 'pending' \| 'refunded', string>>	= { success: 'Success', pending: 'Pending', refunded: 'Refunded' }	Text shown in the status badges (success, pending, and refunded use the success, pending, and expired badge styles). Search matches these labels too.
searchPlaceholder	string	= 'Search orders…'	Placeholder for the search field.
emptyState	string	= 'No orders found'	Heading shown when the search matches no rows.
onRowAction	(action: 'view' \| 'refund' \| 'copy', row: PrintOrder) => void	= —	Called from the row menu. Copy ID also copies the ID to the clipboard, and Refund is disabled for refunded orders.
onExport	(rows: PrintOrder[]) => void	= Downloads orders.csv	Called from the more menu with the rows currently shown.
className	string	= —	Additional classes for the section.
style	CSSProperties	= —	Inline styles, handy for overriding the --pp-* color variables.