Project budget
This is the JavaScript used by the first playground preset. Edit and run it in the interactive playground, including its HTML and CSS.
import {Workbook} from '@wieslawsoltes/gridweb';
import '@wieslawsoltes/gridweb/controls';
const book=new Workbook(),sheet=book.ActiveWorksheet;
sheet.GetRange('A1:D6').Values=[
['Workstream','Hours','Rate','Subtotal'],
['Design system',24,90,null],['Component work',40,110,null],
['Documentation',16,75,null],['Quality review',12,95,null],
['TOTAL',null,null,null]
];
for(let row=2;row<=5;row++)sheet.GetCell('D'+row).Formula='=B'+row+'*C'+row;
sheet.GetCell('D6').Formula='=SUM(D2:D5)';
const grid=document.querySelector('#grid');grid.Workbook=book;
grid.setAttribute('theme',document.documentElement.dataset.theme);
let hours=24;
document.querySelector('#increase').onclick=()=>{hours+=4;sheet.GetCell('B2').Value=hours;console.log('Design hours',hours,'Total',sheet.GetCell('D6').Value);};
document.querySelector('#reset').onclick=()=>{hours=24;sheet.GetCell('B2').Value=hours;};
document.querySelector('#inspect').onclick=()=>console.log('Calculated project total',sheet.GetCell('D6').Value);
console.log('Workbook mounted; formulas calculate from the input cells.');Show the HTML host
<div class="toolbar"><button id="increase">Increase design hours</button><button id="reset">Reset inputs</button><button id="inspect">Inspect total</button></div><grid-web id="grid" style="display:block;height:370px"></grid-web><p class="hint">Double-click cells to edit. Column D and the total use the real formula engine.</p>How it works
The workbook is the application state
Create cells and formulas in a headless model. Attach the workbook to a grid and let every edit use the same calculation engine.
Import Workbook from the root and /controls to register
Own the lifetime
Keep one intentional workbook owner and release view subscriptions when removing a grid. Optional collaboration requires your own authenticated server.
The playground replaces its entire isolated frame on each run. In your application, use the framework’s unmount or disposal hook instead. Do not dispose a shared model while another view still owns it.
Read the lifecycle guide →Know the contract
Source repositories can contain work newer than the published package. The showcase uses @wieslawsoltes/gridweb@0.8.0.