← Playground index

Invoice, nice and simple

Pick a customer, add tags, edit the lines, drag to reorder. Three update containers - the lines, the totals, and the live preview (it could all be one container, but this also shows off multi-container updates). One observe field watches the whole form and refreshes all three on change.

+ Add line

Product Qty Unit price Amount
1000 ×
1200 ×
300 ×
Total 2500
INVOICE
Bill to Acme Corp
Product Qty Unit price Amount
Widget 2 500 1000
Gadget 1 1200 1200
Sprocket 4 75 300
Total 2500