A data grid whose cells are formulas
A table of line items where the totals are computed by a real spreadsheet engine rather than by your reducer — and where a user can type a formula into a cell and have it mean what they expect.
- Subtotal
- 78
- VAT
- 15.6
- Total
- 93.6
D7
D8
D9
Verified at build timeThese figures are produced by running the grid above through the engine during the build. If the engine ever disagrees with them, this page does not ship.
The component above is not on npm yet. It is pre-1.0 and its API is still moving, so rather than publish something unstable we would rather hear what you are building.
The same thing, in code
Nothing here is playground-only.
The grid above and the snippet below run the same engine. Whatever you can do in the sheet, you can do from your own program.
<TrueCalc
data={lineItems}
label="Order line items"
columns={[
{ accessorKey: 'item', header: 'Item' },
{ accessorKey: 'qty', header: 'Qty' },
{ accessorKey: 'unit', header: 'Unit' },
// Computed by the engine, once per row.
{ accessorKey: 'total', header: 'Line total', formula: 'B2*C2' },
]}
export="csv"
/>Take it further
The engine is MIT and on npm today. The React component is not published yet — it is pre-1.0 and we would rather talk to you than hand you an unstable API.