multiSort

Si Maj ajoute une colonne au tri, ou si une grille trie par une colonne à la fois.

Type	boolean
Par défaut	true
Modifiable en direct (update())	Non — lu une fois, à la création de la grille
Angular	l’entrée [multiSort]
<dz-grid>	l’attribut multi-sort
Déclaré dans	packages/dom/src/settings.ts

Ce qu’il fait

Par défaut, un clic sur un titre trie par cette seule colonne, et Maj+clic (Maj+Entrée au clavier) l’ajoute après les autres : par ville, puis par nom. false garde un seul tri : Maj+clic, Maj+Entrée et le toggleSort(true) d’une partie d’en-tête agissent comme un clic simple, qui remplace le tri.

Il limite l’utilisateur, pas votre code : un tri sur plusieurs colonnes que l’application pose elle-même (sort.set, un état enregistré) est gardé. Il est lu une fois : update() refuse un changement.

Exemple

TypeScript

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

type Shop = { id: string; town: string; name: string };

createGrid<Shop>(document.getElementById('boutiques')!, {
  rows: [{ id: 's1', town: 'Champalouette', name: 'La Bouilloire de cuivre' }],
  columns: [{ id: 'town', header: 'Ville' }, { id: 'name', header: 'Boutique' }],
  getRowId: (s) => s.id,
  messages: FR,
  multiSort: false,
});

Angular

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

type Shop = { id: string; town: string; name: string };

@Component({
  selector: 'app-boutiques',
  imports: [DzGrid],
  template: `<dz-grid [rows]="rows" [columns]="columns" [getRowId]="rowId" [messages]="messages" [multiSort]="false" />`,
})
export class Shops {
  readonly rows: Shop[] = [{ id: 's1', town: 'Champalouette', name: 'La Bouilloire de cuivre' }];
  readonly columns: DzgColumnOrGroup<Shop>[] = [{ id: 'town', header: 'Ville' }, { id: 'name', header: 'Boutique' }];
  readonly rowId = (s: Shop) => s.id;
  readonly messages = FR;
}

Web Component

<dz-grid multi-sort="false"></dz-grid>

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

type Shop = { id: string; town: string; name: string };

const grid = document.querySelector<DzGridElement<Shop>>('dz-grid')!;
grid.columns = [{ id: 'town', header: 'Ville' }, { id: 'name', header: 'Boutique' }];
grid.getRowId = (s) => s.id;
grid.messages = FR;
grid.rows = [{ id: 's1', town: 'Champalouette', name: 'La Bouilloire de cuivre' }];

Démo

Cliquez Ville, puis Maj+clic sur Boutique : le tri est remplacé, jamais complété.

Voir aussi

• Trier, filtrer, rechercher.