demo D94
Bulk edits in htmx
Writing a value across a range, and what one undo then means
edit.setCells()
This grid writes one value, or one computed result, across every cell in a selected range in a single operation that a single undo reverses. It turns a repetitive correction into one action, so fixing a field across many rows is quick and reversible.
This is the htmx version. A server-rendered table is upgraded in place, so the page is readable before any script runs and gains the full grid when the module loads, which suits a progressively enhanced app.
The configuration
<link rel="stylesheet" href="https://cdn.latticegrid.dev/lattice-grid@1.107.0/lattice-grid.min.css">
<!-- A real, server-rendered table: readable with JavaScript off. data-field on
each header names the column that cell becomes, and data-id on each row is
the key the grid carries it under. -->
<table id="bulk-edits-table" data-lattice-grid>
<thead>
<tr>
<th data-field="id">Order</th>
<th data-field="reference">Reference</th>
<th data-field="stage">Stage</th>
<th data-field="circuits">Circuits</th>
<th data-field="impact">Impact</th>
<th data-field="effort">Effort</th>
<th data-field="budget">Budget</th>
</tr>
</thead>
<tbody>
<tr data-id="WO-00001"><td>WO-00001</td><td>REQ-9090</td><td>done</td><td>27</td><td>3</td><td>5</td><td>8580</td></tr>
<tr data-id="WO-00002"><td>WO-00002</td><td>INC-7104</td><td>done</td><td>20</td><td>4</td><td>70</td><td>23160</td></tr>
<tr data-id="WO-00003"><td>WO-00003</td><td>REQ-7362</td><td>blocked</td><td>30</td><td>3</td><td>55</td><td>17685</td></tr>
<!-- the rest of the rows, rendered by your server -->
</tbody>
</table>
<script type="module">
import { hydrateTable } from 'https://cdn.latticegrid.dev/lattice-grid@1.107.0/modules/htmx.esm.min.js';
// The markup carries the rows; a server-rendered table's column types are
// declared in the config hydrateTable takes. The grid replaces the table
// where it stood.
const grid = hydrateTable(document.getElementById('bulk-edits-table'), {
selection: { mode: 'multiple', ranges: true, fillHandle: true },
edit: true,
toolPanel: { side: 'left', panels: ['columns'], actions: ['undo', 'redo'], exportName: 'work-orders' },
columns: [
{ field: 'id', title: 'Order', layout: { width: 120, pin: 'start' } },
{ field: 'reference', title: 'Reference', layout: { width: 130 } },
{ field: 'stage', title: 'Stage', filter: { type: 'set' }, edit: true },
{ field: 'circuits', title: 'Circuits', type: 'number', layout: { width: 110 }, edit: true },
{ field: 'impact', title: 'Impact', type: 'number', layout: { width: 100 }, edit: true },
{ field: 'effort', title: 'Effort', type: 'number', layout: { width: 100 }, edit: true },
{ field: 'budget', title: 'Budget', type: 'number', layout: { width: 140 },
format: { style: 'currency', currency: 'GBP' }, total: 'sum', edit: true },
],
});
// Select a block and fill it in one gesture; the whole batch lands as a single
// history entry, so one undo puts every cell back. The same edits are open to
// your own controls: bulkSet writes one value across the selected block, and
// fill copies or extends its leading edge across the range.
grid.edit.bulkSet('done'); // one value across the selected block
grid.edit.fill({ series: true }); // extend the leading edge down the range
</script>Writing one value across a selected range
A bulk edit applies a single value, or a single computed result, to every cell in a selected range in one operation, rather than requiring a user to edit each cell in turn. A developer reaches for this wherever a workflow involves correcting a shared field across many rows at once: setting a status column to “approved” for a filtered set of orders, clearing a batch of stale comments, or overwriting a price across a selected block. Lattice Grid exposes this through edit.setCells(), which takes the target range and the value to apply, validates each affected cell against its column’s rules before committing, and writes the result as one transaction. That matters for undo: a bulk edit across a thousand cells reverses with a single Ctrl+Z, because the history stack records the operation as one entry rather than one per cell touched. For a JavaScript data grid handling large ranges, the write itself is batched rather than issued cell by cell, so applying a value across several thousand rows does not trigger a re-render per cell; the grid recomputes the affected region once and repaints it in a single pass. Screen reader users editing via keyboard get a single change announcement for the operation, matching the single undo step rather than a flood of per-cell updates.
How do I set the same value across a range of cells in a data grid?
Select the range and call edit.setCells() with the value to apply. Lattice Grid validates each cell against its column’s rules, applies the write as one batched update, and records the whole range change as a single entry in the undo history, so the operation reverses in one step regardless of how many cells it touched.