The total of each column can be displayed in HeaderSummary area right under the grid header like Grid Footer. The expression to be displayed in this area is specified through ColumnHeader.summary property.
In order to display this Summary area, visible should be specified as true through GridHeader.summary property first.
grid.header().setSummary({
visible: true,
styles: {
background: "#20ffa500"
}
});
The property of each column can be specified through ColumnHeader.summary property.
var columns = [{
header: {
text: "Quantity",
summary: {
expression: "sum",
styles: {
numberFormat: "#,##0"
}
},
footer: {
expression: "sum",
}
}
}, ...
];
grid.setColumns(columns);
The way to specify the sum formula is the same as the column footer. Please refer to Column Footer example.