Groupement et calculs

Le groupement facilite la lecture par catégories. Les calculs de pied de tableau répondent à des questions sur le résultat filtré : stock total, prix moyen ou nombre de valeurs renseignées.

Exemple de configuration

Partez du démarrage React ou du démarrage Vue. Le fichier suivant complète leur catalogue de produits. Passez cette configuration via getTableConfig en React ou config en Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const groupingConfig = defineTableConfig({
  ...productConfig,
  columns: {
    ...productConfig.columns,
    definitions: productConfig.columns.definitions.map((column) =>
      column.id === "stock" ? { ...column, defaultCalculation: "sum" } : column
    ),
  },
  table: {
    ...productConfig.table,
    enableGrouping: true,
    enableCalculations: true,
  },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const groupingConfig = defineTableConfig({
  ...productConfig,
  columns: {
    ...productConfig.columns,
    definitions: productConfig.columns.definitions.map((column) =>
      column.id === "stock" ? { ...column, defaultCalculation: "sum" } : column
    ),
  },
  table: {
    ...productConfig.table,
    enableGrouping: true,
    enableCalculations: true,
  },
});

Valeurs initiales des colonnes

defaultCalculation choisit le calcul initial. enableCalculation: false exclut une colonne des calculs. enableGrouping: false l’exclut des choix de groupement. Les vues enregistrées et les choix courants peuvent remplacer les valeurs initiales.

Groupement et pagination serveur

Les groupes organisent les lignes chargées sur la page courante. Avec une pagination serveur, un groupe peut continuer sur une autre page ; son nombre de lignes visibles n’est pas le total global de la catégorie. Utilisez les agrégations serveur pour les totaux sur tout le résultat filtré.

Calculer sur tout le résultat filtré

Fournissez aggregate lorsque le serveur peut calculer efficacement les agrégations demandées. Il reçoit recherche, filtres, règles avancées et la table calculations. Renvoyez results[columnId] avec une valeur exploitable (raw), un label formaté et le nombre de lignes correspondantes. Sans action d’agrégation, le tableau peut charger d’autres pages. Ne présentez jamais un sous-total de page comme le total global.

Vérifier un total de stock

La recette stock commence à 18 unités. Passer le bureau de 12 à 15 doit donner 21 unités. Filtrer sur Draft doit donner zéro. Le groupement change la présentation, pas les lignes appartenant à la requête.

Pour les mutations, reprenez le rafraîchissement explicite du cache dans la recette stock. Le registre React vérifié utilise des clés distinctes pour les lignes et les calculs.

Calculer les totaux de stock

Déclarez Somme sur Stock et activez les calculs de pied de tableau. Le parcours stock montre comment actualiser les totaux après une écriture validée.

Copiez cette configuration complète à côté de product-config.ts. Utilisez () => exampleConfig pour getTableConfig en React, ou :config="exampleConfig" en Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  columns: {
    ...productConfig.columns,
    definitions: productConfig.columns.definitions.map((column) =>
      column.id === "stock" ? { ...column, defaultCalculation: "sum" } : column
    ),
  },
  table: { ...productConfig.table, enableCalculations: true },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  columns: {
    ...productConfig.columns,
    definitions: productConfig.columns.definitions.map((column) =>
      column.id === "stock" ? { ...column, defaultCalculation: "sum" } : column
    ),
  },
  table: { ...productConfig.table, enableCalculations: true },
});

Limiter le groupement à un champ pertinent

Autorisez le groupement par Statut et excluez les mesures numériques du sélecteur. Le mode tableau accepte jusqu’à deux champs lorsque le schéma le permet.

Copiez cette configuration complète à côté de product-config.ts. Utilisez () => exampleConfig pour getTableConfig en React, ou :config="exampleConfig" en Vue.

import { defineTableConfig } from "@/components/ui/yayaw-table/config/helpers";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  columns: {
    ...productConfig.columns,
    definitions: productConfig.columns.definitions.map((column) => ({
      ...column,
      enableGrouping: column.id === "status",
    })),
  },
  table: { ...productConfig.table, enableGrouping: true },
});

import { defineTableConfig } from "@/components/ui/yayaw-table-vue/config";
import { productConfig } from "./product-config";

export const exampleConfig = defineTableConfig({
  ...productConfig,
  columns: {
    ...productConfig.columns,
    definitions: productConfig.columns.definitions.map((column) => ({
      ...column,
      enableGrouping: column.id === "status",
    })),
  },
  table: { ...productConfig.table, enableGrouping: true },
});