Interactive Quotation
Edit quantities and unit prices — totals auto-calculate with SUM formulas. Real spreadsheet formulas running in the browser.
How it works
This demo renders a Japanese-format quotation (見積書) inside a ReoGrid spreadsheet. The yellow quantity and unit-price cells are editable — change any value and the line amounts, subtotal, 10% consumption tax, and grand total recalculate instantly.
- Edit Col C (Qty) or Col D (Unit Price) to trigger live formula recalculation
- Each amount column uses = C×D style multiplication formulas
- The subtotal row sums all line amounts with =SUM(E10:E14)
- The consumption-tax row is =Subtotal × 0.1, and the grand total is =Subtotal + Tax
- Currency cells are formatted with ¥#,##0 so numbers display as ¥1,000 style automatically
- Grid lines are hidden and the layout is built with merged cells, mimicking an Excel template
Key APIs used
createReogrid(options) Initialize the grid — options include workspace element selector, license key, and animation flag
worksheet.setCellInput(row, col, value) Set a value or formula (= prefix) — formulas are evaluated by the built-in formula engine
worksheet.setCellNumberFormat(row, col, format) Apply ¥#,##0 or other Excel-compatible format codes to make numbers display as currency
worksheet.range(ref).merge() Merge cells to build the multi-column title, vendor info, and totals section of the quotation layout
worksheet.range(ref).border(options) Apply border styles to define the table structure and totals box
Source Code
Related Documentation
Related Articles
Related Demos
Invoice (Formula)
Invoice with editable quantities and unit prices — totals auto-calculate with formulas. Available on StackBlitz as React, Vue, and Vanilla.
Attendance Sheet
Monthly attendance tracking with weekend/holiday coloring and summary columns.
Budget Tracker
Quarterly income and expense tracker with category sections, color-coded totals, and profit summary.