[{"data":1,"prerenderedAt":473},["ShallowReactive",2],{"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposant-group-by":3,"section:\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposant-group-by":472},{"id":4,"title":5,"body":6,"description":454,"extension":455,"meta":456,"navigation":457,"path":468,"seo":469,"stem":470,"__hash__":471},"docs\u002F2.next\u002F3.dodock\u002F10.developpeurs\u002Fcomposant-group-by.md","Regrouper une liste avec le composant GroupBy",{"type":7,"value":8,"toc":446},"minimark",[9,13,25,30,62,96,157,161,164,172,292,301,305,393,397,423,427,442],[10,11,5],"h1",{"id":12},"regrouper-une-liste-avec-le-composant-groupby",[14,15,16,20,21,24],"p",{},[17,18,19],"code",{},"GroupBy"," ajoute à une liste Vue un regroupement par champ, avec des colonnes d'agrégation (compte, somme, moyenne, minimum, maximum). Il reprend le regroupement de la vue Rapport du desk. Il est destiné aux applications Vue qui utilisent le paquet ",[17,22,23],{},"@framework\u002Fui"," (Studio, Builder, HRMS…).",[26,27,29],"h2",{"id":28},"lien-avec-frappe-ui","Lien avec frappe-ui",[14,31,32,34,35,37,38,45,46,49,50,53,54,56,57,61],{},[17,33,19],{}," fait partie du paquet ",[17,36,23],{}," de Dodock. Ce paquet complète ",[39,40,44],"a",{"href":41,"rel":42},"https:\u002F\u002Fui.frappe.io",[43],"nofollow","frappe-ui"," avec des composants qui dépendent du serveur Dodock : métadonnées des types de documents, permissions, requêtes. Il n'est pas publié sur npm : l'application le consomme comme paquet local, et ",[17,47,48],{},"vue",", ",[17,51,52],{},"vue-router"," et ",[17,55,44],{}," sont des dépendances partagées avec l'application hôte (voir ",[39,58,60],{"href":59},"\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fframework-ui","Package @framework\u002Fui",").",[14,63,64,66,67,49,70,49,73,49,76,49,79,82,83,86,87,91,92,95],{},[17,65,19],{}," est construit avec les composants de base de frappe-ui (",[17,68,69],{},"Popover",[17,71,72],{},"Combobox",[17,74,75],{},"Select",[17,77,78],{},"Switch",[17,80,81],{},"Button",") et charge ses données avec ",[17,84,85],{},"createResource",". Pour ces composants de base, consultez la documentation de frappe-ui sur ",[39,88,90],{"href":41,"rel":89},[43],"ui.frappe.io",". Les types TypeScript et les commentaires du dossier ",[17,93,94],{},"ui\u002Fsrc\u002Fcomponents\u002FGroupBy\u002F"," sont la référence de l'API.",[97,98,103],"pre",{"className":99,"code":100,"language":101,"meta":102,"style":102},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { GroupBy, GroupByTable, serializeGroupBy, useGroupByData } from \"@framework\u002Fui\u002FGroupBy\";\n","js","",[17,104,105],{"__ignoreMap":102},[106,107,110,114,118,122,125,128,130,133,135,138,141,144,147,151,154],"span",{"class":108,"line":109},"line",1,[106,111,113],{"class":112},"s7zQu","import",[106,115,117],{"class":116},"sMK4o"," {",[106,119,121],{"class":120},"sTEyZ"," GroupBy",[106,123,124],{"class":116},",",[106,126,127],{"class":120}," GroupByTable",[106,129,124],{"class":116},[106,131,132],{"class":120}," serializeGroupBy",[106,134,124],{"class":116},[106,136,137],{"class":120}," useGroupByData",[106,139,140],{"class":116}," }",[106,142,143],{"class":112}," from",[106,145,146],{"class":116}," \"",[106,148,150],{"class":149},"sfazB","@framework\u002Fui\u002FGroupBy",[106,152,153],{"class":116},"\"",[106,155,156],{"class":116},";\n",[26,158,160],{"id":159},"fonctionnement","Fonctionnement",[14,162,163],{},"Le regroupement passe par quatre éléments. Les deux composants d'affichage n'exécutent aucune requête : l'application choisit comment charger les données.",[165,166,167,168,171],"mermaid",{},"\nflowchart LR\n  A[GroupBy",[169,170],"br",{},"v-model] -->|GroupBySettings| B[serializeGroupBy]\n  B -->|fields, group_by, order_by| C[frappe.client.get_list]\n  C -->|une ligne par groupe| D[GroupByTable]\n  D -->|tri, largeurs| A\n",[173,174,175,204,235,280],"ol",{},[176,177,178,183,184,187,188,191,192,195,196,199,200,203],"li",{},[179,180,181],"strong",{},[17,182,19],{}," est le bouton et le panneau qui modifient le regroupement. Son ",[17,185,186],{},"v-model"," est un objet ",[17,189,190],{},"GroupBySettings"," (champs de regroupement, agrégats, largeurs, tri, affichage des totaux), ou ",[17,193,194],{},"null"," si la liste n'est pas regroupée. Les modifications restent dans un brouillon jusqu'au clic sur « Appliquer ». Les champs proposés viennent des métadonnées du ",[17,197,198],{},"doctype",". La prop ",[17,201,202],{},"exclude"," retire des champs des sélecteurs.",[176,205,206,211,212,215,216,219,220,223,224,53,227,230,231,234],{},[179,207,208],{},[17,209,210],{},"serializeGroupBy(settings)"," transforme ce modèle en arguments de ",[17,213,214],{},"frappe.client.get_list"," : ",[17,217,218],{},"fields"," (avec un alias ",[17,221,222],{},"_aggregate_{i}"," par agrégat), ",[17,225,226],{},"group_by",[17,228,229],{},"order_by",". ",[17,232,233],{},"serializeGroupByTotals(settings)"," donne les mêmes agrégats sans regroupement, pour la ligne de totaux.",[176,236,237,242,243,49,246,49,249,49,252,49,255,49,258,49,261,264,265,53,268,271,272,275,276,279],{},[179,238,239],{},[17,240,241],{},"useGroupByData(doctype, groupBy, filters)"," est optionnel. Il exécute ces requêtes et renvoie des refs (",[17,244,245],{},"rows",[17,247,248],{},"totals",[17,250,251],{},"loading",[17,253,254],{},"rowCount",[17,256,257],{},"totalCount",[17,259,260],{},"hasNextPage",[17,262,263],{},"pageLength","…) et les fonctions ",[17,266,267],{},"loadMore()",[17,269,270],{},"reload()",". Chaque paramètre accepte une valeur, une ref ou une fonction. Une modification du type de document, du regroupement, des filtres ou de la longueur de page relance la requête depuis la première page. Le nombre de groupes est compté sur 1 000 clés au plus : au-delà, ",[17,273,274],{},"totalCapped"," vaut ",[17,277,278],{},"true",".",[176,281,282,287,288,291],{},[179,283,284],{},[17,285,286],{},"GroupByTable"," affiche une ligne par groupe. Un clic sur un en-tête trie les groupes, la poignée entre deux colonnes change leur largeur. Le tableau renvoie le regroupement mis à jour par ",[17,289,290],{},"update:groupBy"," : le tri et les largeurs font partie du modèle.",[14,293,294,295,298,299,279],{},"Une application qui a déjà sa couche de données appelle ",[17,296,297],{},"serializeGroupBy"," elle-même et passe les lignes à ",[17,300,286],{},[26,302,304],{"id":303},"champs-et-agrégats","Champs et agrégats",[306,307,308,351,384],"ul",{},[176,309,310,311,49,313,49,316,49,319,49,322,49,325,49,328,49,331,49,334,337,338,49,341,49,344,53,347,350],{},"Les champs regroupables sont ceux de la vue Rapport du desk : ",[17,312,75],{},[17,314,315],{},"Link",[17,317,318],{},"Dynamic Link",[17,320,321],{},"Data",[17,323,324],{},"Autocomplete",[17,326,327],{},"Check",[17,329,330],{},"Int",[17,332,333],{},"Date",[17,335,336],{},"Rating",", et les champs standard ",[17,339,340],{},"owner",[17,342,343],{},"modified_by",[17,345,346],{},"_user_tags",[17,348,349],{},"docstatus",". Les champs virtuels sont exclus.",[176,352,353,356,357,360,361,49,364,53,367,370,371,230,373,53,375,377,378,53,381,279],{},[17,354,355],{},"count"," ne demande aucun champ. ",[17,358,359],{},"sum"," porte sur les champs numériques. ",[17,362,363],{},"avg",[17,365,366],{},"min",[17,368,369],{},"max"," acceptent aussi les champs ",[17,372,336],{},[17,374,366],{},[17,376,369],{}," acceptent aussi les dates et heures, y compris ",[17,379,380],{},"creation",[17,382,383],{},"modified",[176,385,386,387,389,390,392],{},"Une note (",[17,388,336],{},") est stockée comme une fraction de son échelle. ",[17,391,286],{}," l'affiche sur son échelle : une moyenne de 0,8 s'affiche « 4 \u002F 5 ».",[26,394,396],{"id":395},"enregistrer-le-regroupement-dans-la-vue","Enregistrer le regroupement dans la vue",[14,398,399,400,403,404,407,408,411,412,415,416,419,420,422],{},"Le composable ",[17,401,402],{},"useListView"," du module ",[17,405,406],{},"@framework\u002Fui\u002FListView"," expose une ref ",[17,409,410],{},"groupBy"," et l'inclut dans le ",[17,413,414],{},"snapshot"," de la vue, avec les filtres, le tri et les colonnes. La bibliothèque n'enregistre rien elle-même : l'application enregistre ce snapshot, puis le rend à ",[17,417,418],{},"restore()"," au chargement. Un snapshot sans clé ",[17,421,410],{}," laisse la liste non regroupée.",[26,424,426],{"id":425},"limites","Limites",[306,428,429,432,439],{},[176,430,431],{},"Pas de regroupement par champ d'une table enfant.",[176,433,434,435,438],{},"Pas de paramètre d'URL ",[17,436,437],{},"_group_by"," pour partager une liste regroupée.",[176,440,441],{},"Les lignes de groupe ne s'ouvrent pas : un groupe n'a pas de document à afficher.",[443,444,445],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":102,"searchDepth":109,"depth":447,"links":448},2,[449,450,451,452,453],{"id":28,"depth":447,"text":29},{"id":159,"depth":447,"text":160},{"id":303,"depth":447,"text":304},{"id":395,"depth":447,"text":396},{"id":425,"depth":447,"text":426},"Comprendre le fonctionnement du regroupement GroupBy du paquet @framework\u002Fui (contrôle, requête groupée, tableau, enregistrement dans la vue) et son lien avec frappe-ui.","md",{"reviewed":457,"last_verified":458,"sources":459},true,"2026-11-04",[460,461,462,463,464,465,466,467],"dodock@develop:ui\u002Fpackage.json","dodock@develop:ui\u002FREADME.md","dodock@develop:ui\u002Fsrc\u002Fcomponents\u002FGroupBy\u002Findex.ts","dodock@develop:ui\u002Fsrc\u002Fcomponents\u002FGroupBy\u002Ftypes.ts","dodock@develop:ui\u002Fsrc\u002Fcomponents\u002FGroupBy\u002FgroupBy.ts","dodock@develop:ui\u002Fsrc\u002Fcomponents\u002FGroupBy\u002FGroupBy.vue","dodock@develop:ui\u002Fsrc\u002Fcomponents\u002FGroupBy\u002FuseGroupByData.ts","dodock@develop:ui\u002Fsrc\u002Fcomponents\u002FListView\u002FuseListView.ts","\u002Fnext\u002Fdodock\u002Fdeveloppeurs\u002Fcomposant-group-by",{"title":5,"description":454},"2.next\u002F3.dodock\u002F10.developpeurs\u002Fcomposant-group-by","lR2LFsS00LqI_jMg0dheOmPRodCOF7_07PUeY9TB4ac",{},1793871735906]