Articles
Building Excel-like spreadsheets in React and Vue — performance, formulas, xlsx round-tripping, and ReoGrid Web release notes.
- · unvell team
ReoGrid Web v1.7 — zoom, hyperlinks that open, and a whole workbook in one PDF
ReoGrid Web v1.7 adds Excel-style zoom — 10% to 400% per sheet, Ctrl/Cmd+wheel or a trackpad pinch — and hyperlinks that are read from xlsx, open on click and are written back. A whole workbook now goes into one PDF, forms print whole, an exported xlsx opens in Excel looking like the grid, and iPad and iPhone can type and download properly. No breaking API changes.
#release #v1.7 #zoom #hyperlinks #pdf #spreadsheet -
· unvell teamA Spreadsheet Form You Fill In From the Keyboard — Form Mode in ReoGrid Web
Business apps often use a spreadsheet as a form: a fixed layout, a few input boxes, everything else protected. Form mode makes that shape behave like one — Enter and Tab walk the fields, one click starts typing, placeholders hint at the format, and dropdowns open from the keyboard. A full expense-claim example, a custom tab order, and reading the values back out.
#form-mode #forms #data-entry #keyboard #javascript #spreadsheet -
· unvell teamReoGrid Web v1.6 — images that survive a save, multi-range selection, 縦書き, and form mode
ReoGrid Web v1.6 makes floating images editable and, at last, persistent: insert, drag and resize them, and they round-trip through xlsx. Plus Ctrl-click multi-range selection, Japanese vertical writing and text rotation, a form mode that fills a protected sheet from the keyboard, Excel's fit-to-N-pages, and the end of hairline PDFs. No breaking API changes.
#release #v1.6 #images #forms #pdf #spreadsheet -
· unvell teamPasting from Excel into a web app — what actually crosses the clipboard
Ctrl+V from Excel is the import nobody designs for, and it is the one users reach for first. What a spreadsheet actually puts on the clipboard, which parts of it survive the trip into ReoGrid Web, the two values that arrive looking wrong, and the cleanup pass that fixes them.
#clipboard #excel #copy-paste #javascript #spreadsheet -
· unvell teamVLOOKUP, XLOOKUP and SUMIFS in a JavaScript spreadsheet
An order sheet that prices and totals itself: pull unit prices out of a product master with VLOOKUP and XLOOKUP, handle the codes that aren't there, then roll the lines up by category with SUMIF, SUMIFS and COUNTIFS — including the criteria syntax and the two lookup functions ReoGrid Web does not have.
#formula #vlookup #xlookup #sumifs #javascript #spreadsheet -
· unvell teamWareki Dates and ▲ Negatives — Excel Number Format Codes in a JavaScript Spreadsheet
Japanese government and finance forms don't accept 令和1年 — they want 令和元年. Here's how Excel's number format codes work in ReoGrid Web: era tokens g/gg/ggg and e/ee, the [$-ja-JP-x-gannen] locale tag, bracket colors in English and Japanese, conditional sections, and the ▲ negative convention accounting departments expect.
#number-format #japanese #wareki #date #localization #javascript -
· unvell teamGenerate PDF Invoices in the Browser — One Template, Any Data, No Server
A PDF invoice pipeline that never leaves the browser: design the form once with {{token}} cells, bind a plain data object so the detail band repeats per line item, then export a real vector PDF with saveAsPdf. Page breaks, headers, footers, per-row formulas, and a batch loop that turns one template into a hundred documents.
#report-binding #pdf #invoice #template #printing #javascript -
· unvell teamReoGrid Web v1.5 — find & replace, drag-to-move, page header/footer, and PDFs that render Chinese
ReoGrid Web v1.5 fills in the everyday gestures: Excel-style find & replace on Ctrl/Cmd+F, drag-to-move for ranges, rows and columns, page header/footer with Excel's own format codes, and PDF export that embeds the right CJK font when you name a locale. No breaking API changes.
#release #v1.5 #find-replace #pdf #printing #spreadsheet -
· unvell teamPivot Tables in a JavaScript Spreadsheet — Live Cross-Tab Summaries in a Few Lines
Turn a few hundred rows of raw records into a cross-tab summary that recomputes as the data changes. One createPivot call declares rows, columns, and aggregations; the handle's update / refresh / remove drive it from code. A full worked example with region × product sales, plus filters, grand totals, and the Lite-vs-Pro line.
#pivot-table #aggregation #data-analysis #data-table #spreadsheet #javascript -
· unvell teamSort & Filter a JavaScript Spreadsheet — Excel-Style AutoFilter, by Click and in Code
Add Excel-style column sorting and header-dropdown filters to a data table in the browser. One createAutoFilter call gives users the dropdowns; getColumnValues / setColumnFilter drive the same filters from code. A full worked example with a live visible-row counter, plus the sort-vs-filter and Lite-vs-Pro details.
#sort #filter #auto-filter #data-table #spreadsheet #javascript -
· 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 team
Batch-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 team
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.
#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