demo D90
Row editing in htmx
Editing a whole row as one transaction
edit: { mode: 'row' }
This grid opens a whole row for editing at once and commits every cell in it as a single transaction. It suits records where fields depend on each other, so partial changes never land and the row is saved or discarded as a unit.
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="row-editing-table" data-lattice-grid>
<thead>
<tr>
<th data-field="circuit">Circuit</th>
<th data-field="region">Region</th>
<th data-field="status">Status</th>
<th data-field="bandwidth">Bandwidth</th>
<th data-field="charge">Monthly charge</th>
</tr>
</thead>
<tbody>
<tr data-id="0"><td>DFB-EDI-100000</td><td>Edinburgh</td><td>live</td><td>100</td><td>94.88</td></tr>
<tr data-id="1"><td>MPL-BIR-100001</td><td>Birmingham</td><td>provisioning</td><td>10000</td><td>4324.6</td></tr>
<tr data-id="2"><td>DFB-LON-100002</td><td>London</td><td>live</td><td>2000</td><td>1031.02</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('row-editing-table'), {
selection: 'multiple',
// Row mode opens every editable cell in a row together, so a whole record is
// edited at once and committed in one go rather than a cell at a time.
edit: { enabled: true, mode: 'row' },
columns: [
{ field: 'circuit', title: 'Circuit', layout: { width: 180 } },
{ field: 'region', title: 'Region', edit: true },
{ field: 'status', title: 'Status', filter: { type: 'set' }, edit: true },
{ field: 'bandwidth', title: 'Bandwidth', type: 'number', filter: { type: 'number' }, edit: true },
{ field: 'charge', title: 'Monthly charge', type: 'number',
format: { style: 'currency', currency: 'GBP' }, filter: { type: 'number' }, edit: true },
],
});
</script>Committing a whole row as one transaction
Row editing changes the unit of commit from the cell to the record. Instead of every keystroke or Tab press writing a value the instant it is confirmed, the row opens once, every editable cell in it goes live together, and nothing reaches the underlying data until the row is committed or cancelled. A developer reaches for this wherever a record only makes sense as a whole: an address with a postcode format that depends on the country beside it, an order line where quantity and price both feed a total, any form where committing field three while field one is still invalid would leave the row briefly wrong. Lattice Grid turns this on with edit: { mode: 'row' }, switching every editable column from an independent cell commit to a single row-level transaction, validated and committed or rolled back together. Because validation runs across the whole draft row rather than one cell in isolation, a rule spanning two columns sees both pending values, not just the one that changed last. Escape on any cell in an open row discards every pending change in that row, not just the field the cursor happened to be on. This is the transactional counterpart to inline editing in a JavaScript data grid built for tabular data entry rather than read-only display.
How do I edit an entire row at once instead of one cell at a time?
Set edit: { mode: 'row' } on the grid. Opening any editable cell in a row puts the whole row into edit mode, so every editable column in it accepts input, and none of the pending values write to the record until the row is committed. Escape reverts the entire row rather than the single cell in focus, and validation rules see the full set of pending values together.