editable

Ouvre les cellules de la colonne à la modification.

Type	EditableRule<T>
Par défaut	false
Modifiable en direct (update())	Oui — en redonnant les colonnes (update({ columns }))
Déclaré dans	packages/core/src/columns/defs.ts

Ce qu’il fait

true, ou une fonction (row, context, info) qui répond pour une ligne ; context est le context de la grille, info.pinned le côté d’une ligne épinglée (undefined sur une ligne du corps). Seul true veut dire oui. Une ligne de détail, de remplissage ou en chargement n’est jamais modifiée. Une autre valeur est signalée par un avertissement invalid-column, et la colonne reste en lecture seule.

Il faut la fonction edit() de @dzgrid/dom/edit et editors(), qui dessinent les champs : F2, Entrée, un double clic ou la frappe d’un caractère en ouvre un. Une cellule qui ne peut pas être modifiée répond « lecture seule ».

Exemple

import { createGrid, type GridMessages } from '@dzgrid/dom';
import { edit } from '@dzgrid/dom/edit';
import { editors } from '@dzgrid/dom/editors';
import { FR_EDIT } from '@dzgrid/dom/locales/fr-edit';
import { FR_EDITORS } from '@dzgrid/dom/locales/fr-editors';
import { FR } from '@dzgrid/dom/locales/fr';

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

const messages: GridMessages = { ...FR, text: { ...FR.text, ...FR_EDIT.text, ...FR_EDITORS.text } };

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

Démo

Double-cliquez un Nom ou un Bonnet ; Taille est en lecture seule.

Voir aussi

• edit, validate.
• Édition.