Tag: #spreadsheet
17 articles
-
Stop Bad Data at the Cell — Data Validation in a JavaScript Spreadsheet
Dropdown lists, numeric and date bounds, custom formula checks — reject invalid input the moment it's typed, with zero form-validation code. A full order-entry example using ReoGrid Web's Excel-style data validation, including input prompts, error alerts, and xlsx round-trip.
-
ReoGrid Web v1.4 — page layout, print-perfect PDF export, and Excel-grade data features
ReoGrid Web v1.4 turns the grid into a document tool: Excel-style page layout with a page-break preview and PDF export powered by our own in-house engine that paginates exactly like the preview — plus pivot tables, table styles, data validation, report binding, cell comments, and named ranges. No breaking API changes.
-
Traffic-Light Dashboards in a JavaScript Spreadsheet — Conditional Formatting by Example
Color-code a spreadsheet by its values — red stock warnings, green over-target sales, status-tinted rows — without writing a single styling loop. A full worked example using ReoGrid Web's three conditional-formatting rule types, with live re-evaluation as data changes.
-
Build a multi-branch sales summary with cross-sheet formulas
A hands-on multi-sheet tutorial for ReoGrid Web 1.3: build three branch sheets, then a Summary sheet that consolidates them entirely with cross-sheet formulas like ='Tokyo'!E6 and =SUM(Osaka!B2:B5). Edit any branch number and the summary recalculates across sheets.
-
ReoGrid Web v1.3 — multi-sheet workbooks and cross-sheet formulas
ReoGrid Web v1.3 turns the grid into a workbook of N worksheets — a core-provided sheet tab bar, per-sheet undo, whole-workbook xlsx/JSON I/O, and cross-sheet formula references like =Sheet1!A1. No breaking API changes.
-
Checkboxes, Dropdowns, and Progress Bars in Cells — Building a Live Attendance Sheet with Cell Types
Bring the interactive parts of an Excel business sheet — checkboxes, pick lists, progress bars — to the web without rebuilding them as HTML forms. A full worked example: a weekly attendance sheet using ReoGrid Web's 8 built-in cell types.
-
One million rows in a browser spreadsheet — without loading one million rows
Three weeks ago we wrote that a million rows was out of scope for ReoGrid Web. We changed our mind. Here's the delay-load data source: a scrollbar that represents 1,000,000 rows while the grid holds only the few hundred you can actually see.
-
When Excel is your layout tool: move merged-cell forms to the web without rebuilding them
A lot of business 'spreadsheets' are really forms — merged cells, borders, fixed column widths, embedded formulas. Two practical ways to bring them to the web with ReoGrid Web: load the existing .xlsx as-is, or rebuild it in code. With working examples.
-
Using ReoGrid in Angular — an Excel-like spreadsheet, no wrapper needed
ReoGrid Web ships React and Vue wrappers, but the core is framework-agnostic. Here's how to drop a canvas-based, Excel-like spreadsheet into an Angular app in about 30 lines — with editing, formulas, and xlsx import.
-
From ReoGrid .NET to ReoGrid Web — bringing your spreadsheet to the browser
If you've used ReoGrid in WinForms or WPF, the Web edition will feel familiar: same Excel-like model, same xlsx fidelity, now in React, Vue, and vanilla JS. Here's what carries over, what changes, and how to bridge the two.
-
ReoGrid Web vs Luckysheet vs x-spreadsheet — choosing a JavaScript spreadsheet
A practical comparison of three canvas/spreadsheet-style JS libraries — Luckysheet, x-spreadsheet, and ReoGrid Web — covering rendering, xlsx fidelity, maintenance, licensing, and which one fits your project.
-
Building a Vue invoice with editable formulas in ~60 lines
A real Vue 3 invoice component: editable quantities and unit prices, automatic line subtotals via formulas, SUM, tax, total — all in a single canvas-backed spreadsheet. The math updates live, and a computed ref mirrors the grand total into your Vue UI. Export to xlsx in one call (Pro).
-
Excel-like business forms on the web — you don't need Excel to build them
Most developers don't realise the browser can load, display, and edit real Excel files without a server — and that the same spreadsheet component can build invoice-quality forms from scratch, or blend both. Here's how ReoGrid Web makes it possible.
-
ReoGrid Web vs AG Grid vs Handsontable — picking the right grid
An honest comparison of the three main JavaScript grid libraries from the ReoGrid team's perspective: where each one fits, what their tradeoffs are, and how to decide which one your project actually needs.
-
Building a React invoice with editable formulas in ~60 lines
A real React invoice component: editable quantities and unit prices, automatic line subtotals via formulas, SUM, tax, total — all in a single canvas-backed spreadsheet. The math updates in real time. Users can export to xlsx (Pro).
-
Rendering 10,000 rows in the browser — how ReoGrid Web stays at 60fps
A canvas-based spreadsheet doesn't have a DOM bottleneck, but it can still die a thousand cuts in the 2D context. Here's how ReoGrid Web renders a dense 10,000-row sheet without per-row React reconciliation, virtualization gymnastics, or jank.
-
Introducing ReoGrid Web v1.2 — an Excel-grade spreadsheet for React and Vue
ReoGrid Web v1.2 ships 109 built-in formulas, Excel-style color-coded reference editing, an auto-fill handle, and ~70% fewer canvas calls per scroll frame — in a single ~100 KB (min+gzip) package with first-class React and Vue wrappers.