listEditor

Le champ qui choisit une valeur dans une liste, donné aux éditeurs par editors({ list: listEditor }).

Import	import { listEditor } from '@dzgrid/dom/editors-list';
Signature	listEditor(x: EdEnv, value: unknown, opts: readonly EnumOption[], label: (v: unknown) => string, name: string, done: (move: boolean) => void): Ed
Textes	pas de paquet à elle
Déclarée dans	packages/dom/src/editors-list/index.ts

Ce qu’elle fait

listEditor n’est pas une fonction de la grille à elle seule : donnez-la à editors() par editors({ list: listEditor }). Elle a son entrée à elle, @dzgrid/dom/editors-list, pour qu’une grille sans colonne liste ne la charge pas. Elle modifie une colonne enum, ou toute colonne avec edit.options (une liste, ou une fonction de la ligne), jusqu’à 500 choix ; les libellés viennent de la colonne quand les choix n’en donnent pas.

La cellule montre un champ et une liste s’ouvre dessous (au-dessus s’il n’y a pas la place), la valeur actuelle active. Haut / Bas, Début / Fin et Page préc. / Page suiv. (de 10) se déplacent dans la liste. Des lettres tapées en moins d’une demi-seconde vont au premier choix qui commence par elles, sans tenir compte de la casse ni des accents ; la même lettre encore va au suivant. Entrée ou Espace choisit et garde la valeur, Tab choisit et passe à la suite, Échap abandonne, un clic sur un choix le prend. Une valeur absente des choix s’affiche en tête de liste, marquée, et ne peut être gardée que si c’était celle de la cellule.

Sans elle, une colonne liste ouvre un simple champ de texte lu selon le format de la colonne, et la grille signale un avertissement missing-feature par colonne.

Exemple

import { createGrid } from '@dzgrid/dom';
import { edit } from '@dzgrid/dom/edit';
import { editors } from '@dzgrid/dom/editors-base';
import { listEditor } from '@dzgrid/dom/editors-list';
import { FR } from '@dzgrid/dom/locales/fr';
import { FR_EDIT } from '@dzgrid/dom/locales/fr-edit';
import { FR_EDITORS } from '@dzgrid/dom/locales/fr-editors';
import '@dzgrid/theme/edit.css';

type Gnome = { id: string; name: string; hat: string; garden: string };

createGrid<Gnome>(document.getElementById('gnomes')!, {
  rows: [{ id: 'g1', name: 'Barnabé', hat: 'red', garden: 'Massif de roses' }],
  columns: [
    { id: 'name', header: 'Nom' },
    { id: 'hat', header: 'Bonnet', type: 'enum', editable: true, enumOptions: [{ value: 'red', label: 'Rouge' }, { value: 'green', label: 'Vert' }] },
    { id: 'garden', header: 'Jardin', editable: true, edit: { options: [{ value: 'Massif de roses' }, { value: 'Mare' }, { value: 'Potager' }] } },
  ],
  getRowId: (g) => g.id,
  messages: { ...FR, text: { ...FR.text, ...FR_EDIT.text, ...FR_EDITORS.text } },
  features: [edit<Gnome>(), editors({ list: listEditor })],
});

Démo

Ouvrez une cellule Bonnet avec Entrée, puis tapez « v » ou utilisez les flèches.

Voir aussi

• La fonction editors, qui la reçoit.
• Les options de colonne edit et enumOptions.
• Édition : les listes dans le guide.