Nodered-ui-tabulator Calculations For Grouped Data

Dashboard
1

As you can see below, I have two levels of grouping data

image
image1109×424 10.9 KB

The calculation is right for the second level but not for the first level.

Any idea

Thanks in advance

2

Please send a reduced flow highlighting the issue, so I can investigate

3

Thanks for your anwer !
So can you confirm that sum should appear in top-level group too ?

Properties from ui_tabulator

{
	"height": 580,
	"layout": "fitColumns",
	"selectable": true,
	"groupBy": ["espace","categorie"],
	"groupStartOpen": true,
    "addRowPos": "top",
	"columnCalcs":"group",
	"groupClosedShowCalcs":true,
	"columns": [
		{
			"field": "id",
			"editable":false,
			"visible": false
		},
		{
			"title": "Espace",
			"field": "espace",
			"hozAlign": "left",
			"editable": false,
			"visible": false
		},
		{
			"title": "Catégorie",
			"field": "categorie",
			"width": "0%",
			"hozAlign": "left",
			"editor": "input",
			"editable": false,
			"visible": false
		},
		{
			"title": "Index",
			"field": "cctp",
			"formatter": "input",
			"width": "5%",
			"hozAlign": "left",
			"editable": true,
			"editor": "input"
		},
		{
			"title": "Titre",
			"field": "titre",
			"formatter": "input",
			"width": "20%",
			"hozAlign": "left",
			"editable": false,
			"editor": "input"
		},
		{
			"title": "Description",
			"field": "description",
			"formatter": "textarea",
			"width": "20%",
			"hozAlign": "left",
			"editable": true,
			"editor": "textarea"
		},
		{
			"title": "PU",
			"field": "prixUnitaire",
			"width": "10%",
			"hozAlign": "center",
			"editor":"input",
			"editable": true
		},
		{
			"title": "Q",
			"field": "quantite",
			"editable": true,
			"width": "5%",
			"hozAlign": "center",
			"editor": "input"
		},
		{
			"title": "PT",
			"field": "prixTotal",
			"width": "10%",
			"editable": false,
			"hozAlign": "center",
			"topCalc":"@F:somme"
		},
		{
			"field": "modele",
			"visible": false
		},
		{
			"title": "Zone",
			"field": "zone",
			"formatter": "input",
			"width": "10%",
			"hozAlign": "left",
			"editable": false,
			"editor": "input"
		},
		{
			"title": "Niveau",
			"field": "niveau",
			"formatter": "input",
			"width": "5%",
			"hozAlign": "left",
			"editable": false,
			"editor": "input"
		},
		{
			"title": "Modèle",
			"field": "designation",
			"formatter": "input",
			"width": "15%",
			"hozAlign": "left",
			"editable": false,
			"editor": "input"
		}
	]
}

and fonction somme

function somme(values, params) {
    var calc = 0;

    values.forEach(function(element) {
        element = element.slice(0,-2);
        element = element.replace(/\u00A0/g, '');
        element = element.replace(/,/g, '.');
        calc += parseFloat(element);
    });
    
    calc = calc.toLocaleString("fr-FR", { style: "currency", currency: "EUR" });
    return calc;
}
4

This is all about Tabulator functionality.

As much as I can see (you are welcome to dig further into the tabulator documentation), Tabulator can show the column calculation in group level, table level or both, but not in the top group

image
image1043×313 29.5 KB

You may consider adding a function which shows the top group sum in its title.

A few more things:

  1. Why not use numeric values for prixTotal, and use the built-in calculator "sum"?
  2. In your table definition, you have several columns with formatters of type "input", which is invalid (it's only valid for the "editor" property), and throw errors. Remove them. (in general, it is a good idea during development to have the browser's console log open, to see error messages).