Table
Quote Totals
A quote with the arithmetic left visible: line items on top, and subtotal, tax and amount due as separate rows in tfoot instead of one collapsed number.
What you can change
- the work items, quantities and prices through lines
- the tax rate through taxRate
- the currency sign through currency
A link for your AI agent: preview, code and instructions.
Preview
Use it with AI
- 1. Copy the link.
- 2. Write to your agent in your own words and drop the link into the sentence.
- 3. The agent opens the link and installs the component from the registry.
put this on the home page as the hero:
https://vibeui.ru/c/table-012?lang=en&theme=dark
Not sure where to paste it? Step-by-step guide
Show the full instructions
What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.
Loading…
For developers
The install command lives in the “Component source” block below — a signed link that stays valid for 24 hours.
Technical notes
The component is self-contained: one file, no dependencies, its palette in the --vibeui-table-012-* variables. A server component: it computes the subtotal and the tax at render time, and there is no state. The line items sit in tbody and the arithmetic in tfoot, where every label is marked up as th scope="row" with colSpan, so a number is always announced together with its word. Amounts are printed by a local money() function: the digit groups are separated by a narrow no-break space rather than by Intl, because Intl output depends on the environment locale and would differ between server and client. Numeric columns get font-variant-numeric:tabular-nums and white-space:nowrap: the digit groups line up and an amount does not break across lines.
Tags
- table
- invoice
- totals
- finance
Component source
The same file your agent installs. Here in case you would rather copy it by hand.
Loading…