Lattice Grid Buy a licence

demo D103

The transaction API

Batching adds, updates and removes into one applied change

rows.apply({ add, update, remove })

Building…
Loading a live grid…

The configuration

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.css">
<script src="https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.13.0/lattice-grid.min.js"></script>

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

<script>
  const grid = LatticeGrid.createGrid(document.getElementById('grid'), {
    rowKey: 'id',
    selection: 'multiple',
    toolPanel: {
      side: 'left',
      panels: ['columns', 'filters', 'views', 'quick'],
      actions: ['undo', 'redo', 'export', 'restore', 'maximise'],
      exportName: 'lattice-demo',
    },
    statusBar: { panels: ['rowCount', 'progress', 'updates', 'selectedCount'] },
    highlightOnChange: { duration: 800 },
    columns: [
      { field: 'symbol', title: 'Symbol', layout: { width: 130, pin: 'start' } },
      { field: 'name', title: 'Instrument', layout: { flex: 1, min: 170, max: 280 } },
      { field: 'desk', title: 'Desk', filter: { type: 'set' } },
      { field: 'region', title: 'Region', filter: { type: 'set' } },
      { field: 'price', title: 'Price', type: 'number', layout: { width: 120 },
        format: { decimals: 4 }, filter: { type: 'number' } },
      { field: 'change', title: 'Change', type: 'number', layout: { width: 110 },
        format: { style: 'percent', decimals: 2 } },
      { field: 'volume', title: 'Volume', type: 'number', layout: { width: 120 },
        format: { notation: 'compact' }, filter: { type: 'number' } },
      { field: 'status', title: 'Status', filter: { type: 'set' }, layout: { width: 110 },
        cell: { decoration: 'pill', variant: { map: { open: 'success', halted: 'danger', settled: 'neutral' } } } },
    ],
    rows,  // 2,000 instruments
  });

  // Adds, updates and removes in one call: one applied change, one undo step.
  // The batch applies and names what it refused (a remove for an id that is
  // not there, say) rather than throwing and taking the good rows down with it.
  const result = grid.rows.apply({
    add: [{ id: 'NEW-00001', symbol: 'NEW.1', status: 'open' }],
    update: [{ id: 'INS-0000042', price: 123.45 }],
    remove: ['INS-0000007'],
  });
  console.log(result.added.length, result.updated.length, result.removed.length, result.rejected);
</script>

Batching adds, updates and removes into one change

The transaction API lets a developer submit a mixed batch of adds, updates and removes as a single call rather than issuing each change separately and paying a layout cost for every one. A developer reaches for it whenever a data source produces several kinds of change at once: a reconciliation job that inserts new positions, updates existing ones and deletes closed trades in the same pass, or a UI action that edits one row while removing three others. Lattice Grid exposes this through rows.apply({ add, update, remove }), which accepts arrays for each operation and applies them together before the grid recalculates layout, so a batch of a thousand mixed changes triggers one reflow rather than a thousand. This matters for a JavaScript data grid handling frequent change: without batching, each mutation would force its own diff of visible rows, sort order and any active aggregation, with cost scaling by call count rather than rows affected. Because updates and removes are matched to existing rows rather than replacing the dataset outright, sort position, scroll offset and cell selection are preserved for rows the batch does not touch. The same call works whether the batch originates from a local mutation or a message decoded off a socket, keeping the source and the grid decoupled from each other.

How do I add, update and delete rows in one call?

Call rows.apply({ add, update, remove }) with arrays for whichever operations apply, and Lattice Grid applies all three in a single batch. This avoids the layout cost of separate calls per operation and keeps sort order, scroll position and selection stable for any row the batch leaves untouched.

Related demos