Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProRows of description, quantity and unit price with a live line total, a running subtotal, tax and grand total in the right currency, and reorder and remove. Use this when the list drives a calculation the person must see change.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
A repeating row contributes to a total shown next to the list (invoice, quote, order, expense report).
Do not use it when: For a plain data table with inline cells, use the data grid. This pattern is for a handful of editable rows with a visible calculation.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
currency | string | USD | ISO 4217 code. |
taxRate | number | 0 | A fraction (0.2 is 20%). |
locale | string | browser | For number formats. |
initial | LineItem[] | two sample rows | |
onChange | (items, totals) => void | - | After every edit. |
computeTotals(items, taxRate) is exported; calculate again on the server.
output named "Line 2 total", and the totals are a description list. The grand total is a polite live region so a change is announced.Intl.NumberFormat, so the screen shows what the server will compute.The pattern ships with a Testing Library test (invoice-line-items.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.