Runnable React samples for ReoGrid Web, the fast, Excel-like JavaScript spreadsheet component for web apps. Each sample is a single self-contained component you can read, copy, and adapt.
Looking for the docs, live demos, and tutorials? → web.reogrid.net
git clone https://github.com/unvell/web-spreadsheet-reogrid-samples.git
cd web-spreadsheet-reogrid-samples
npm install
npm run devOpen the printed URL and browse the sample gallery.
These samples use @reogrid/pro. Without a key the
grid runs in evaluation mode (a watermark, full functionality). To remove it:
cp .env.example .env.local
# then paste your key into .env.local:
# VITE_REOGRID_LICENSE_KEY=your-key-here.env.local is git-ignored, so your key never gets committed. Get a key (free trial available) from
the ReoGrid pricing page. Prefer the free tier? Swap
@reogrid/pro for @reogrid/lite (100 rows × 26
columns, no license needed).
| Sample | What it shows | Tutorial |
|---|---|---|
| Invoice with editable formulas | Editable cells, SUM/arithmetic formulas, number formats, merged cells, styling |
Read → |
| Cell types | Checkbox, dropdown, progress bar, and star-rating cells, aggregated with COUNTIF/SUM |
Read → |
| Excel import & export | Open and save .xlsx entirely in the browser — no upload |
Read → |
| 10,000 rows at 60fps | Batched suspendRender writes, frozen header, smooth canvas scrolling |
Read → |
More samples are added over time. Vue / vanilla-JS versions are planned.
src/samples/*.tsx— one file per sample, each a default-exported React component.src/samples/registry.ts— sample metadata (title, summary, tags, tutorial link).src/license.ts— reads your key fromVITE_REOGRID_LICENSE_KEY.src/App.tsx— the gallery and router (no build magic, plain Vite + React + TypeScript).
To add a sample: drop a src/samples/my-sample.tsx exporting a component, then add an entry to
registry.ts.
Vite · React 18 · TypeScript · @reogrid/pro 1.3.x
- Docs, demos & tutorials — https://web.reogrid.net
@reogrid/proon npm — https://www.npmjs.com/package/@reogrid/pro@reogrid/lite(free) on npm — https://www.npmjs.com/package/@reogrid/lite- ReoGrid for .NET — https://reogrid.net
The sample code in this repository is MIT-licensed — see LICENSE. ReoGrid itself
(@reogrid/pro) is a commercial product of unvell inc. under its own license.