Invoice with Auto-Calculating Formulas
An interactive invoice where quantities and unit prices are editable — subtotal, tax, and total recalculate instantly via spreadsheet formulas. A practical example of ReoGrid's built-in formula engine.
How it works
This demo renders a complete Japanese-format invoice inside a ReoGrid spreadsheet. The yellow cells (Qty and Unit Price) are directly editable — change any value and watch the line amount, subtotal, 10% consumption tax, and grand total recalculate in real time.
All totals are driven by real spreadsheet formulas (SUM, multiplication, etc.),
not JavaScript event listeners. This means the same patterns you'd use in Excel work here out of the box.
- Edit Col C (Qty) or Col D (Unit Price) to see live recalculation
- Column E uses
=C×Dformulas for each line item - Subtotal row:
=SUM(E10:E14) - Tax row:
=Subtotal × 0.1 - Total:
=Subtotal + Tax, formatted as¥#,##0
Key APIs used
createReogrid() Initialize the grid with workspace element and license key
worksheet.setCellInput() Set a cell value or formula (formula starts with =)
worksheet.setCellNumberFormat() Apply number format like ¥#,##0 or #,##0
worksheet.range().merge() Merge a range of cells into one
worksheet.range().border() Apply border style to a range
worksheet.setCellStyle() Set font, color, background, alignment
Source Code