demo D93
Read-only and per-cell rules
Columns that never edit, and cells that depend on the record
edit.enabled: (row) => …
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: [
// No edit block at all, so the column is never editable. That is the
// default rather than something to switch off.
{ 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: 'budget', title: 'Budget', type: 'number', layout: { width: 140 },
format: { style: 'currency', currency: 'GBP' }, total: 'sum',
edit: { enabled: ({ data }) => data?.stage !== 'done' },
},
{
field: 'circuits', title: 'Circuits', type: 'number', layout: { width: 110 },
edit: { enabled: ({ data }) => data?.stage !== 'done' && data?.signedOff !== true },
},
],
rows, // work orders
});
</script>Locking a column, or a single cell, without a second grid
Some columns should never open an editor, and some cells should only be locked depending on the row they sit in: a total column that is always computed, or a status column that stops being editable once an order is shipped. Lattice Grid handles both with one option, edit.enabled: (row) => …, set either as a plain boolean for a column-wide rule or as a function for a per-cell one. When the function returns false for a row, that cell never opens an editor on double-click or keystroke and is skipped by Tab-to-edit navigation, so a mixed grid of editable and locked cells needs no second read-only grid layered on top and no disabled overlay drawn over individual cells. The function receives the row already resolved for that cell, so a rule such as “locked once status is closed” costs one property check per cell rather than a pass over the dataset. Because the read-only state is expressed at the data layer rather than the render layer, a screen reader encounters the cell with the correct read-only role from the first render, not after an editor briefly mounts and is torn down. This is the mechanism a JavaScript data grid needs to mix computed, permission-gated, and freely editable cells in one table without maintaining a second component for the parts that cannot change.
How do I make specific cells read-only in a data grid?
Set edit.enabled on the column to a function of the row, returning false for any row where that cell should not be editable, or a plain false to lock the whole column. Locked cells skip the editor on double-click and keystroke, are excluded from Tab-to-edit focus order, and are read to assistive technology as non-editable from the first render, with no separate overlay or second grid required.