editable

Opens the column’s cells to editing.

Type	EditableRule<T>
Default	false
Live update (update())	Yes — give the columns again (update({ columns }))
Declared in	packages/core/src/columns/defs.ts

What it does

true, or a function (row, context, info) that answers for one row; context is the grid’s context, info.pinned the side of a pinned row (undefined on a body row). Only true means yes. A detail, filler or loading row is never edited. Another value is told with an invalid-column warning, and the column stays read-only.

It needs the edit() feature from @dzgrid/dom/edit and editors(), which draw the fields: F2, Enter, a double click or typing a character opens one. A cell that cannot be edited answers « read-only ».

Example

import { createGrid, type GridMessages } from '@dzgrid/dom';
import { edit } from '@dzgrid/dom/edit';
import { editors } from '@dzgrid/dom/editors';
import { EN_EDIT } from '@dzgrid/dom/locales/en-edit';
import { EN_EDITORS } from '@dzgrid/dom/locales/en-editors';
import { EN } from '@dzgrid/dom/locales/en';

type Gnome = { id: string; name: string; hat: string; height: number };

const messages: GridMessages = { ...EN, text: { ...EN.text, ...EN_EDIT.text, ...EN_EDITORS.text } };

createGrid<Gnome>(document.getElementById('gnomes')!, {
  rows: [{ id: 'g1', name: 'Barnaby', hat: 'red', height: 31 }],
  columns: [
    { id: 'name', header: 'Name', editable: true },
    { id: 'hat', header: 'Hat', editable: (g) => g.height < 40 },
    { id: 'height', header: 'Height (cm)', type: 'number' },
  ],
  getRowId: (r) => r.id,
  messages,
  features: [edit<Gnome>(), editors()],
});

Live demo

Double-click a Name or a Hat; Height is read-only.

See also

• edit, validate.
• Editing.