Building an online spreadsheet editor that handles tens of thousands of rows and complex formulas is a nontrivial engineering challenge. Off-the-shelf solutions lack flexibility — embedding them into a CRM, adding custom functions, or adapting to specific business needs is nearly impossible. We build a system from scratch tailored to your scenario, with virtualization, a formula engine, and real-time collaboration. Our team has over 8 years of experience and has delivered 20+ successful projects. License cost savings compared to AG Grid Enterprise can reach 40%, with an average payback period of 6–9 months. Custom solutions typically range from $15,000 for a basic editor to $50,000+ for full-featured collaboration tools, and can save clients $20,000–$80,000 annually on licensing fees. We can estimate your project in 1 day.
Big-Table Virtualization Explained
A table with 100,000 rows cannot render all DOM elements — the browser would freeze. The solution is virtualization: rendering only visible rows with a buffer. We use the headless library TanStack Virtual for full control over rendering, or AG Grid with built-in virtualization and formulas. In high-load projects we combine AG Grid with our own formula engine, achieving stable 60 FPS even on mobile devices.
Example of row virtualization with TanStack Virtual:
const rowVirtualizer = useVirtualizer({ count: rows.length, getScrollElement: () => parentRef.current, estimateSize: () => 24, overscan: 10, }); For a comparison of popular libraries:
| Library | Virtualization | Formulas | Collaboration | License |
|---|---|---|---|---|
| TanStack Virtual | Yes (headless) | No | No | MIT |
| AG Grid | Yes | Built-in | Enterprise | Commercial |
| Handsontable | Yes | HyperFormula | Via external tools | MIT / Commercial |
Formula Engine: From Parsing to Recalculation
Formulas like =SUM(A1:B10) * C5 + IF(D1>0, E1, 0) require a parser and a dependency graph. We use HyperFormula — an open-source TypeScript engine with 400+ Excel-compatible functions. It runs both in the browser and on the server, allowing heavy formulas to be computed asynchronously. HyperFormula's dependency tracking is lazy: when one cell changes, only the minimal set of dependents is recalculated.
Why CRDT Is Better Than OT for Collaborative Editing
Operational Transformation (OT) requires a central server and sequential processing — causing latency and offline difficulties. CRDT (Conflict-free Replicated Data Types) lets each client work autonomously and then merge changes without conflicts. In spreadsheets, we use Yjs with shared types: Y.Map for cells. More about CRDT can be found on Wikipedia.
const ydoc = new Y.Doc(); const cells = ydoc.getMap('cells'); const provider = new WebsocketProvider('ws://server', 'spreadsheet-123', ydoc); When two users edit the same cell simultaneously, Last Write Wins (LWW) based on logical clocks ensures no data loss.
Adding a Custom Formula to the Editor
- Create a TypeScript function, e.g.,
const CUSTOM_FN = (a: number, b: number) => a * b; - Register it in HyperFormula via
HyperFormula.registerFunctionPlugin(MyPlugin); - In the UI, add a button that calls
hf.setCellFormula(row, col, '=CUSTOM_FN(A1, B2)'); - On recalculation, the engine automatically invokes your function. The whole process takes about 2 hours.
Change History and Undo/Redo
We implement undo/redo using a command stack. Each change (text insertion, formula edit, formatting) is recorded as a reversible command. For collaboration, we distinguish own actions from others' by storing userId in metadata. With 50+ concurrent users, response time stays below 50 ms.
XLSX Import/Export: Under the Hood
- SheetJS (xlsx) — reads and writes XLSX, XLS, CSV. Internally it parses the XML archive, extracts cells, formatting, and formulas (stored as strings).
- ExcelJS — creates XLSX with advanced formatting: merged cells, conditional formatting, images.
On import, formulas from XLSX are preserved as text and passed to HyperFormula for calculation on first display.
Work Process: Stages and Timelines
| Stage | Duration | Deliverable |
|---|---|---|
| Analysis and prototype | 2–4 weeks | Technical spec, mockup, stack selection |
| Architecture design | 1–2 weeks | ERD, API specification, component map |
| Core development (virtualization, formulas) | 4–8 weeks | Working table engine |
| UI and integration | 4–8 weeks | UI, import/export, collaboration |
| Testing and deployment | 2–4 weeks | Regression, load testing, CI/CD |
What's Included
We provide:
- Source code of the editor in TypeScript (React/Angular/Vue as you prefer)
- API documentation for integration
- Deployment guide (Docker, Nginx)
- Team training (up to 5 hours)
- Support during the rollout phase (2 weeks)
Key performance metrics: support for 100,000 rows, 700+ formulas, 60 FPS rendering, and 99.9% uptime guarantee. Typical timeline for a specialized table with basic functionality is 2–3 months. A full-featured editor with collaboration, XLSX import, and 200+ formulas takes 6–10 months. We give an accurate estimate after analyzing your case.
Common Mistakes in Online Spreadsheet Development
- Underestimating virtualization: trying to render all rows leads to poor performance.
- Using OT without backup: client disconnection causes lost edits — CRDT solves this.
- Ignoring the format layer: XLSX import loses formatting, reducing usability.
Contact us for a consultation and get a project estimate in 1 day. Request custom online spreadsheet editor development — we'll build a solution from scratch. With our certified developers and guaranteed performance, you can trust your project to succeed.