Articles
Building Excel-like spreadsheets in React and Vue — performance, formulas, xlsx round-tripping, and ReoGrid Web release notes.
-
· unvell teamStop 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.
#data-validation #spreadsheet #forms #data-entry #javascript #ui -
· unvell teamReoGrid 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.
#release #v1.4 #pdf #pivot #printing #spreadsheet -
· unvell teamBatch-process spreadsheet data with AI: xlsx → JSON → LLM
A practical pipeline for running an LLM over a whole spreadsheet: convert xlsx to JSON in the browser, send rows to Claude for classification or cleanup, and write the results back into the grid — with the Batch API for scale.
#ai #llm #xlsx #json #automation #claude - · unvell team
From Excel to your app: extract structured data from xlsx as JSON
A practical pattern for turning user-uploaded Excel files into clean JSON your app can use — header detection, type coercion, multiple sheets, and posting straight to an API or database.
#excel #xlsx #json #data #integration -
· unvell teamConvert XLSX to JSON in the browser — no server, no upload
Turn an .xlsx file into JSON entirely client-side: lossless ReoGrid JSON for round-tripping, or plain data rows for your app. Practical code, files never leave the browser.
#excel #xlsx #json #javascript #import -
· unvell teamTraffic-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.
#conditional-formatting #spreadsheet #dashboard #cell-styles #javascript #ui -
· unvell teamBuild 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.
#tutorial #multi-sheet #formula #workbook #spreadsheet -
· unvell teamReoGrid 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.
#release #v1.3 #multi-sheet #workbook #spreadsheet -
· unvell teamCheckboxes, 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.
#cell-types #checkbox #dropdown #spreadsheet #attendance #ui -
· unvell teamOne 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.
#performance #big-data #lazy-loading #spreadsheet #javascript -
· unvell teamWhen 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.
#excel #xlsx #forms #invoice #spreadsheet #merged-cells -
· unvell teamUsing 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.
#angular #spreadsheet #data-grid #excel #typescript - · unvell team
Reading and writing Excel files in JavaScript — import, export, and JSON
How to load .xlsx files into the browser, export a grid back to Excel, and convert between xlsx and JSON — all client-side, with styles and formats preserved. Practical code with ReoGrid Web.
#excel #xlsx #import #export #json #javascript -
· unvell teamFrom 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.
#dotnet #winforms #wpf #migration #spreadsheet #web - · unvell team
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.
#comparison #luckysheet #x-spreadsheet #spreadsheet #open-source #canvas -
· unvell teamBuild an online XLSX viewer in React — files never leave the browser
Most 'XLSX viewer online' tools upload your spreadsheet to a server you don't control. Here is a complete React component that opens .xlsx files entirely in the browser — read-only, with styles, merges, and formulas preserved. No upload, no backend, no account.
#xlsx #excel #react #viewer #file-api -
· unvell teamBuilding 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).
#vue #tutorial #formula #invoice #spreadsheet -
· unvell teamExcel-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.
#tutorial #invoice #spreadsheet #excel -
· unvell teamReoGrid 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.
#comparison #ag-grid #handsontable #spreadsheet #data-grid #react #vue -
· unvell teamBuilding 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).
#react #tutorial #formula #invoice #spreadsheet - · unvell team
Importing real Excel files in the browser — no upload, no server
Drag an .xlsx file onto a web page, render it in a spreadsheet UI with cell styles, merges, borders, freeze panes, and formulas preserved. No backend, no SheetJS, no progress modals — and it loads a 440k-cell file in 3.7 seconds.
#xlsx #excel #react #vue #file-api #performance - · unvell team
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.
#performance #canvas #react #vue #spreadsheet -
· unvell teamIntroducing 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.
#release #v1.2 #react #vue #spreadsheet