sameRow

Pour une application qui recharge toutes ses lignes — une relève, la réponse d’un serveur — alors que la plupart n’ont pas changé.

Type	(a: T, b: T) => boolean
Par défaut	non défini
Modifiable en direct (update())	Non — lu une fois, à la création de la grille
Angular	l’entrée [sameRow]
<dz-grid>	la propriété settings : el.settings = { sameRow: … }
Déclaré dans	packages/dom/src/settings.ts

Ce qu’il fait

Un rechargement complet apporte de nouveaux objets, même pour des lignes aux mêmes valeurs. Sans sameRow, chaque ligne dont l’objet diffère compte comme modifiée ; avec plus de la moitié des lignes modifiées, la grille y voit un nouveau jeu de données : rien ne brille.

sameRow(ancien, nouveau) est demandé pour chaque ligne gardée par son identifiant avec un nouvel objet. Égales : la ligne est inchangée et garde son ancien objet, et ce que la grille en retient reste (le texte de la recherche, la réponse de la règle de sélection, rowClass). Seules les lignes qui ont vraiment changé comptent comme modifiées, et leurs cellules changées brillent. sameValues de @dzgrid/core/compare compare en profondeur des données simples ; votre propre fonction peut comparer un champ de version à la place.

Un sameRow qui lève une erreur compte cette ligne comme modifiée, avec un avertissement invalid-setting par chargement. Il est lu une fois : update() en refuse un nouveau.

Exemple

TypeScript

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

type Sensor = { id: string; room: string; celsius: number };

const grid = createGrid<Sensor>(document.getElementById('capteurs')!, {
  rows: [{ id: 's1', room: 'Serre', celsius: 24.5 }],
  columns: [{ id: 'room', header: 'Pièce' }, { id: 'celsius', header: '°C', type: 'number' }],
  getRowId: (s) => s.id,
  messages: FR,
  sameRow: sameValues,
});

setInterval(async () => {
  const rows = (await (await fetch('/api/sensors')).json()) as Sensor[];
  grid.update({ rows });   // seules les pièces dont la température a bougé sont modifiées
}, 10_000);

Angular

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

type Sensor = { id: string; room: string; celsius: number };

@Component({
  selector: 'app-capteurs',
  imports: [DzGrid],
  template: `<dz-grid [rows]="rows" [columns]="columns" [getRowId]="rowId" [messages]="messages" [sameRow]="same" />`,
})
export class Sensors {
  readonly rows: Sensor[] = [{ id: 's1', room: 'Serre', celsius: 24.5 }];
  readonly columns: DzgColumnOrGroup<Sensor>[] = [{ id: 'room', header: 'Pièce' }, { id: 'celsius', header: '°C', type: 'number' }];
  readonly rowId = (s: Sensor) => s.id;
  readonly messages = FR;
  readonly same = sameValues;
}

Web Component

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

type Sensor = { id: string; room: string; celsius: number };

const grid = document.querySelector<DzGridElement<Sensor>>('dz-grid')!;
grid.columns = [{ id: 'room', header: 'Pièce' }, { id: 'celsius', header: '°C', type: 'number' }];
grid.getRowId = (s) => s.id;
grid.messages = FR;
grid.settings = { sameRow: sameValues };
grid.rows = [{ id: 's1', room: 'Serre', celsius: 24.5 }];

Voir aussi

• rows — redonner les lignes.
• getRowId — comment une ligne est gardée par son identifiant.