demo D87
Inline editing
Double-click, type, Tab, Enter, Escape, and clicking away
edit: { enabled: true }
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',
edit: true,
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 },
],
rows, // circuit records
});
</script>Editing a cell in place, without a modal or a form
Inline editing turns a cell into an input the moment a user asks for it, rather than opening a dialog elsewhere on the page. A developer reaches for it wherever the record being edited and the record being read are the same table: an order line, a settings grid, a roster where a manager corrects one field and moves on. Lattice Grid turns this on with edit: { enabled: true } at the column level, so a grid can mix editable and read-only columns without a wrapper component around either. Double-click or a keystroke opens the editor over the cell; Tab and Enter commit the value and move focus on, Escape discards it and restores what was there, and clicking away commits like Enter. Because the editor mounts only for the one active cell, a wide grid with hundreds of editable columns pays no rendering cost for the columns nobody is touching. Focus follows the same roving-tabindex model the rest of the grid uses, so a keyboard user reaches an editable cell, opens it, and commits or cancels without a mouse, and a screen reader announces the cell as editable before the value changes. This is the base case a JavaScript data grid needs before validation or row-level transactions make sense.
How do I edit a cell in place in a JavaScript data grid?
Set edit: { enabled: true } on the column, then double-click a cell or start typing on it to open the editor. Tab or Enter commits the new value and advances focus; Escape discards it and restores the previous value; clicking elsewhere commits like Enter. The editor mounts only for the active cell, so enabling editing on many columns has no cost on the columns not currently being edited.