Quick Start

Install

pnpm add @revolist/revogrid @revolist/revogrid-pro

1. Calculate line totals

This complete Vanilla TypeScript example maps A to qty, B to unitPrice, and C to total. Register the custom element, attach the grid, configure Formula, and assign source last.

<div id="grid" style="height: 320px"></div>

import { defineCustomElements } from '@revolist/revogrid/loader';
import { FormulaPlugin } from '@revolist/revogrid-pro';
import '@revolist/revogrid/dist/revo-grid/revo-grid.css';
import '@revolist/revogrid-pro/styles.css';

defineCustomElements();
const grid = document.createElement('revo-grid');
grid.columns = [
  { prop: 'qty', name: 'Quantity' },          // A
  { prop: 'unitPrice', name: 'Unit price' },  // B
  { prop: 'total', name: 'Total' },           // C
];
grid.plugins = [FormulaPlugin];
document.querySelector('#grid')?.append(grid);

grid.source = [
  { qty: 3, unitPrice: 10, total: '=A1*B1' },
  { qty: 2, unitPrice: 12, total: '=A2*B2' },
];

Expected result: C1 displays 30 and C2 displays 24. Reading grid.source still returns the raw strings =A1*B1 and =A2*B2.

2. Aggregate calculated cells

Add a third ordinary row whose C cell sums the first two calculated totals:

grid.source = [
  { qty: 3, unitPrice: 10, total: '=A1*B1' },
  { qty: 2, unitPrice: 12, total: '=A2*B2' },
  { qty: '', unitPrice: 'Grand total', total: '=SUM(C1:C2)' },
];

Expected result: C3 displays 54. Formula resolves C1 and C2 before calculating their range total.

Note

This example uses an ordinary source row so its A1 address is unambiguous. Pinned-top, main, and pinned-bottom rows share one authored coordinate space; learn that ordering in A1 References and Autofill.

3. Fill a formula

Enable range selection to show the fill handle. Seed C1, then drag its handle down to C2.

grid.range = true;
grid.source = [
  { qty: 3, unitPrice: 10, total: '=A1*B1' },
  { qty: 2, unitPrice: 12, total: null },
];

Expected result: the fill writes raw =A2*B2 into C2, which displays 24. Relative references move with the destination; $ anchors remain fixed.

FormulaPlugin installs or reuses its required Autofill, dependency-highlight, and named-range runtimes. You may register those plugins explicitly when you need their public APIs or custom configuration, but basic formulas do not require duplicate registrations.

What happens when data changes?

Editing a referenced mounted cell causes dependent formula cells to recalculate. The source continues to own the expression, so persistence code sees =A1*B1, not 30. Use Backend Calculation and Persistence when you also need stored calculated values.

Symptom	Cause
The cell displays text such as A1*B1	The source string is missing its leading =.
#ERROR	Syntax is invalid, a function/name is unknown, or the dependency is circular.
#REF! after fill	A translated relative reference moved before column A or row 1.

Framework examples

The complete demo has equivalent Vanilla TypeScript, React, Vue 3, and Angular sources.

Next steps

Previous: Overview · Next: A1 References and Autofill · Deeper reference: Formula API