selection

Les lignes que choisit l’utilisateur — pour supprimer, envoyer, comparer. Aucune fonction n’est nécessaire.

Type	{ readonly mode: 'none' | 'single' | 'multi'; readonly checkbox?: boolean; readonly click?: boolean; readonly keepOnFilter?: boolean; readonly canSelect?: (row: DataNode<T>, selection: SelectionState, context: unknown) => boolean | string }
Par défaut	{ mode: 'none' }
Modifiable en direct (update())	Oui
Angular	l’entrée [selection]
<dz-grid>	la propriété settings : el.settings = { selection: … }
Déclaré dans	packages/dom/src/settings.ts

Ce qu’il fait

• mode : 'none', 'single' (une ligne à la fois) ou 'multi'.
• checkbox: true : une colonne de cases ; en 'multi', une case dans son titre sélectionne toutes les lignes (sur des pages dans le navigateur, la page affichée).
• click: true : un clic sélectionne la ligne (Ctrl/Cmd+clic l’ajoute ou la retire, Maj+clic une suite dans l’ordre de l’écran). Sans lui, un clic ne fait que déplacer le focus, et les lignes se sélectionnent par Espace ou par leur case. Avec les blocs de cellules (range()), Maj+clic appartient au bloc : les lignes se cochent alors par leur case.
• keepOnFilter : true par défaut, une ligne sélectionnée le reste quand un filtre ou la recherche la cache ; false vide la sélection quand ils changent. Un tri ou une page jamais.
• canSelect(row, selection, context) : votre règle pour qu’une ligne rejoigne la sélection. true permet, false refuse, un texte refuse et est dit à l’utilisateur. Elle n’est jamais consultée pour décocher. Il faut rules() de @dzgrid/dom/rules (textes -rules) : sans elle, aucune ligne ne peut être sélectionnée, et une erreur missing-feature dit pourquoi.

Espace bascule la ligne qui a le focus et Ctrl+A (Cmd+A) sélectionne tout. La sélection contient des clés de ligne, pas des identifiants : l’événement selectionChanged la donne avec son nombre, et idOfDataKey(key) rend un identifiant. Après « tout sélectionner » sur les pages d’un serveur, elle se lit « toutes les lignes que retient la requête, sauf celles-ci ».

Exemple

TypeScript

import { createGrid } from '@dzgrid/dom';
import { idOfDataKey } from '@dzgrid/core';
import { FR } from '@dzgrid/dom/locales/fr';

type Seed = { id: string; plant: string; packets: number };

createGrid<Seed>(document.getElementById('graines')!, {
  rows: [{ id: 's1', plant: 'Courge de lune', packets: 12 }, { id: 's2', plant: 'Haricot de verre', packets: 0 }],
  columns: [{ id: 'plant', header: 'Plante' }, { id: 'packets', header: 'Sachets', type: 'number' }],
  getRowId: (s) => s.id,
  messages: FR,
  selection: { mode: 'multi', checkbox: true, click: true },
  onEvent: (e) => {
    if (e.type === 'selectionChanged' && e.selection.mode === 'include') console.log([...e.selection.keys].map(idOfDataKey));
  },
});

Angular

import { Component } from '@angular/core';
import { DzGrid, type DzgColumnOrGroup } from '@dzgrid/angular';
import { FR } from '@dzgrid/dom/locales/fr';

type Seed = { id: string; plant: string; packets: number };

@Component({
  selector: 'app-graines',
  imports: [DzGrid],
  template: `<dz-grid [rows]="rows" [columns]="columns" [getRowId]="rowId" [messages]="messages"
    [selection]="{ mode: 'multi', checkbox: true, click: true }" (selectionChanged)="count = $event.count" />
    <p>{{ count ?? 'Des lignes' }} sélectionnée(s)</p>`,
})
export class Seeds {
  count: number | null = 0;
  readonly rows: Seed[] = [{ id: 's1', plant: 'Courge de lune', packets: 12 }, { id: 's2', plant: 'Haricot de verre', packets: 0 }];
  readonly columns: DzgColumnOrGroup<Seed>[] = [{ id: 'plant', header: 'Plante' }, { id: 'packets', header: 'Sachets', type: 'number' }];
  readonly rowId = (s: Seed) => s.id;
  readonly messages = FR;
}

Web Component

import '@dzgrid/element/define';
import type { DzGridElement } from '@dzgrid/element';
import { FR } from '@dzgrid/dom/locales/fr';

type Seed = { id: string; plant: string; packets: number };

const grid = document.querySelector<DzGridElement<Seed>>('dz-grid')!;
grid.columns = [{ id: 'plant', header: 'Plante' }, { id: 'packets', header: 'Sachets', type: 'number' }];
grid.getRowId = (s) => s.id;
grid.messages = FR;
grid.settings = { selection: { mode: 'multi', checkbox: true, click: true } };
grid.rows = [{ id: 's1', plant: 'Courge de lune', packets: 12 }, { id: 's2', plant: 'Haricot de verre', packets: 0 }];

Démo

Cliquez une ligne, Ctrl/Cmd+clic sur une autre, Maj+clic sur une troisième ; la case du titre sélectionne tout.

Voir aussi

• context — ce que reçoit aussi canSelect.
• Sélection et plages.