total

Avec la ligne de totaux : ce qu’elle affiche sous cette colonne.

Type	AggFuncName | AggFn<V>
Par défaut	non défini
Modifiable en direct (update())	Oui — en redonnant les colonnes (update({ columns }))
Déclaré dans	packages/core/src/columns/defs.ts

Ce qu’il fait

Les mêmes noms fournis qu’aggFunc — 'sum', 'avg', 'min', 'max', 'count', 'first', 'last' — ou votre fonction des valeurs de la colonne (avec level null). La fonction totalsRow() de @dzgrid/dom/totals-row, avec pinnedRows(), affiche la ligne en bas, toujours visible, sur les lignes qui passent les filtres ; les modifications comptent aussitôt. Les fichiers CSV et Excel et l’impression finissent par elle.

Un total qui ne va pas à sa colonne (une somme de textes) est signalé une fois comme problème. Avec des pages venues du serveur, la grille n’en tient qu’une : donnez les totaux que votre serveur envoie avec l’api.set(…) de la fonction.

Exemple

import { createGrid, type GridMessages } from '@dzgrid/dom';
import { pinnedRows } from '@dzgrid/dom/pinned-rows';
import { totalsRow } from '@dzgrid/dom/totals-row';
import { FR_PINNED } from '@dzgrid/dom/locales/fr-pinned';
import { FR_TOTALS } from '@dzgrid/dom/locales/fr-totals';
import '@dzgrid/theme/pinned-rows.css';
import { FR } from '@dzgrid/dom/locales/fr';

type Sale = { id: string; market: string; fruit: string; crates: number };

const messages: GridMessages = { ...FR, text: { ...FR.text, ...FR_PINNED.text, ...FR_TOTALS.text } };

createGrid<Sale>(document.getElementById('ventes')!, {
  rows: [{ id: 's1', market: 'Port', fruit: 'Prunes', crates: 12 }],
  columns: [
    { id: 'fruit', header: 'Fruit' },
    { id: 'crates', header: 'Cagettes', type: 'number', total: 'sum' },
  ],
  getRowId: (r) => r.id,
  messages,
  features: [pinnedRows<Sale>(), totalsRow()],
});

Démo

Voir aussi

• aggFunc.
• Colonnes.