Components•Invoice table
Components•Invoice table
Invoice table
Invoice line items with editable quantity, price, discount and tax. Totals are computed in integer minor units, so cents never drift, and the layout prints cleanly.
Dependencies
Copy below cli
npx shadcn add @bjork-ui/invoice-tableHow to use
import { InvoiceTable, type InvoiceLine } from "@/components/bjork-ui/tables/invoice-table";const [lines, setLines] = useState<InvoiceLine[]>([ { id: "ln-1", description: "Brand identity system", sku: "HR-ID-01", quantity: 1, unitPrice: 480_000, // minor units discount: 10, // percent taxRate: 8.25, // percent },]);<InvoiceTable lines={lines} onChange={(next, totals) => { setLines(next); console.log(totals.total); }} currency="USD" locale="en-US" editable/>
Invoice
INV-2026-0419
- Issued
- Due
FromHalden & Rowe Studio418 Tannery Row, Suite 3Portland, OR 97209Bill toMeridian Coffee RoastersAttn: Accounts payable77 Kiln Street, Duluth, MN 55802
| Item | Qty | Unit price | Disc. | Tax | Amount | Actions |
|---|---|---|---|---|---|---|
| $4,800.00 | ||||||
| $3,375.00$3,750.00 | ||||||
| $1,812.50 | ||||||
| $270.00 | ||||||
| $170.98$179.98 | ||||||
| Subtotal | $10,812.48 | |||||
| Discounts | -$384.00 | |||||
| Tax (8.25%) | $36.39 | |||||
| Total due (USD) | $10,464.87 | |||||