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.27.0/lattice-grid.min.css">
<script type="module">
import { defineLatticeGrid } from 'https://cdn.jsdelivr.net/npm/@toclocoinc/lattice-grid@1.27.0/modules/webcomponent.esm.js';
defineLatticeGrid();
</script>
<lattice-grid row-key="id" style="display: block; height: 540px"></lattice-grid>
<script type="module">
const el = document.querySelector('lattice-grid');
el.config = {
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 },
},
],
};
el.rows = 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.