demo D160
Coming from dhtmlx Grid
The dhtmlx Grid API, unchanged, on a Lattice grid underneath
new Grid(el, { columns, data })
The configuration
<div id="grid" style="height: 540px"></div>
<script type="module">
import { Grid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/modules/dhtmlx-compat.esm.js';
// The same constructor and the same .data / .selection / .history / .export /
// .events namespaces as dhtmlx's own dhx.Grid.
const grid = new Grid(document.getElementById('grid'), {
columns: [
{ id: 'invoice', header: [{ text: 'Invoice' }], width: 130 },
{ id: 'supplier', header: [{ text: 'Supplier' }], width: 210, sortable: true },
{ id: 'amount', header: [{ text: 'Amount' }], type: 'number', width: 140, sortable: true },
],
data: rows, // your data
});
</script>Running dhtmlx Grid code on Lattice Grid
The compatibility module exports a Grid class shaped like dhtmlx’s own dhx.Grid: the same constructor call, and the same .data, .selection, .history, .export and .events namespaces sitting on a real Lattice grid underneath. Swapping the import is, for that surface, the whole migration. The calling code that adds, updates and removes rows, reads the selection, undoes an edit or writes a sheet does not change.
What is covered is the part most applications actually touch: column definitions (header, width, sortable, resizable, hidden, editorType and the rest), the .data operations from add and update through parse, load, sort, filter and serialize, then .selection, .history, .export.csv and .export.xlsx, and the dhtmlx event names down to afterEditEnd and afterColumnDrop. It is a compatibility surface rather than a re-implementation, so a call it does not map is not a dead end: the real grid is one property away, on .lattice, and anything the wrapper does not cover is reached there directly.
How do you migrate from dhtmlx Grid to Lattice Grid?
Change the import from dhtmlx’s Grid to @toclocoinc/lattice-grid/modules/dhtmlx-compat, keep the constructor and the namespace calls as they are, and the grid renders on Lattice Grid instead. Columns, data operations, selection, history, export and the event names are mapped across, so the surface most application code depends on keeps working without a rewrite, and the parts outside that surface are reached through the underlying grid rather than blocking the move.