Editable inventory
This is the JavaScript used by the first playground preset. Edit and run it in the interactive playground, including its HTML and CSS.
import {observable, ObservableList, FlatTreeDataGridSource, TextColumn, CheckBoxColumn}
from '@wieslawsoltes/treedatagridweb/core';
import '@wieslawsoltes/treedatagridweb/web';
const rowCount = 100;
const items = new ObservableList(Array.from({length:rowCount},(_,i)=>observable({
Name:['Workspace','Document','Collection','Canvas'][i%4]+' '+(i+1),
Kind:['Layout','Editor','Data','Graphics'][i%4],
Size:12+i%87, Active:i%3!==0
})));
const source = new FlatTreeDataGridSource(items);
source.Columns.Add(new TextColumn('Component',x=>x.Name,(x,v)=>x.Name=v,'2*'));
source.Columns.Add(new TextColumn('Category',x=>x.Kind,(x,v)=>x.Kind=v,'*'));
source.Columns.Add(new TextColumn('Modules',x=>x.Size,(x,v)=>x.Size=Number(v),90));
source.Columns.Add(new CheckBoxColumn('Enabled',x=>x.Active,(x,v)=>x.Active=v,85));
source.RowSelection.SingleSelect=false;
const grid=document.querySelector('#grid');
grid.Model=source; grid.CanUserResizeColumns=true;
grid.setAttribute('theme',document.documentElement.dataset.theme);
const count=()=>document.querySelector('#count').textContent=items.Count.toLocaleString()+' source rows';
document.querySelector('#add').onclick=()=>{items.Add(observable({Name:'New component',Kind:'Custom',Size:1,Active:true}));count();};
document.querySelector('#update').onclick=()=>{items.Get(0).Name='Updated live';console.log('Observable model updated');};
count();
window.addEventListener('pagehide',()=>{grid.Dispose();source.Dispose();});
console.log('Actual virtualized TreeDataGrid attached.');Show the HTML host
<div class="toolbar"><button id="add">Add row</button><button id="update">Update first row</button><output id="count"></output></div><tree-data-grid id="grid" class="stage" style="display:block" aria-label="Component inventory"></tree-data-grid><p class="hint">Click a column header to sort. Double-click a value to edit. Resize columns at their edges.</p>How it works
One model, many views
DOM-independent sources own rows, columns and selection. Attach a model to the web control and let the viewport do the rendering.
Import models from /core and register
Own the lifetime
Dispose the grid and the source when their owning view is removed. Share one source intentionally when multiple views should share state.
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/treedatagridweb@0.1.0.