Data Table - Summary Row Function
When creating a data table, Summary Row Function can be used to add summary at the bottom of the table. This summary can be computed on the client side or on the server side.
Using Summary Row Function, you can summarize any number of columns. A table can also include more than one summary row. To calculate the summary in-built javascript functions like sum, minimum, maximum, percent
can be used. Application developers may also use their own javascript function that calculates the summary.
You can set summary row using the below exposed function on a column in Beforedatarender event callback:
setSummaryRowData
setSummaryRowData
WaveMaker provides aggregate functions which can be referenced and used in the setSummaryRowData method for using inbuilt aggregate functions for DataTable columns. This method accepts a single or an array of:
- Plain values and Built in aggregation functions
- Custom Functions with aggregation logic
- Objects for custom styling
Plain Values and Built in aggregation functions
Single Summary Row
Call setSummaryRowData on the column where you want to set the summary row data
Page.GroceriesTable1Beforedatarender = function(widget, data, columns) {
columns.item.setSummaryRowData('Net Total');
columns.netAmount.setSummaryRowData('670');
};
Multiple Summary Rows
Call setSummaryRowData on the column where you want to set the summary rows data and pass an array of values.
Page.GroceriesTable1Beforedatarender = function(widget, data, columns) {
columns.item.setSummaryRowData([
'Net Total',
'Discount'
]);
columns.netAmount.setSummaryRowData([
'670',
'2%'
]);
};
Summary Row with Aggregate Function and Variables
Create an aggregate function instance and call the inbuilt aggregate functions on the column setSummaryRowData.
Page.GroceriesTable1Beforedatarender = function(widget, data, columns) {
const DISCOUNT = Page.Variables.Discount.dataSet.dataValue;
const netAmountAggregate = columns.netAmount.aggregate;
columns.item.setSummaryRowData([
'Net Total',
'Discount'
]);
columns.netAmount.setSummaryRowData([
netAmountAggregate.sum(),
DISCOUNT + '%'
]);
};
Built In Aggregate functions
Column contains the below built in aggregate functions which can be used in summary rows.
Function | Parameters |
---|---|
sum | NA |
average | NA |
count | NA |
minimum | NA |
maximum | NA |
percent | Total value to calculate percentage |
The above aggregate functions can be accessed using the aggregate
object on the columns as shown below.
Page.<TableName>Beforedatarender = function(widget, data, columns) {
const columnAggregate = columns.<columnName>.aggregate;
columns.<columnName>.setSummaryRowData(columnAggregate.sum());
};
Custom Functions with aggregation logic
Summary Row Custom Function
Call custom function and return data in setSummaryRowData on the column where you want to set the summary row data.
Page.GroceriesTable1Beforedatarender = function(widget, data, columns) {
const DISCOUNT = Page.Variables.Discount.dataSet.dataValue;
const netAmountAggregate = columns.netAmount.aggregate;
columns.item.setSummaryRowData([
'Net Total',
'Discount',
'Total'
]);
columns.netAmount.setSummaryRowData([
netAmountAggregate.sum(),
DISCOUNT + '%',
calculateTotal()
]);
function calculateTotal() {
let total = netAmountAggregate.sum();
return total - ((total / 100) * DISCOUNT);
}
};
Styling the Summary row
Return an object with keys value and class to display data and add styles associated to that class in setSummaryRowData on the column where you want to set the summary row data.
Page.GroceriesTable1Beforedatarender = function(widget, data, columns) {
const DISCOUNT = Page.Variables.Discount.dataSet.dataValue;
const netAmountAggregate = columns.netAmount.aggregate;
columns.item.setSummaryRowData([
'Net Total',
'Discount',
{
value: 'Total Budget',
class: 'bold-class'
}
]);
columns.netAmount.setSummaryRowData([
netAmountAggregate.sum(),
DISCOUNT + '%',
{
value: calculateTotal(),
class: 'bold-class'
}
]);
function calculateTotal() {
let total = netAmountAggregate.sum();
return total - ((total / 100) * DISCOUNT);
}
};
Summary Row Custom Asynchronous Function
Javascript function that calculates the summary can invoke an API to return result of calculation executed on the server side. This API could be application's business logic. For example, when calculating Discount being applied, business logic may assign the discount value based on the loggedin user or amount money spent etc. In such a case, the javascript function will return a Promise
after calling the API.
Here is an example of custom javascript function that invokes an API and returns promise to the setSummaryRowData
Page.GroceriesTable1Beforedatarender = function(widget, data, columns) {
const DISCOUNT = Page.Variables.Discount.dataSet.dataValue;
const netAmountAggregate = columns.netAmount.aggregate;
columns.item.setSummaryRowData([
'Net Total',
'Discount',
'Total'
]);
columns.netAmount.setSummaryRowData([
netAmountAggregate.sum(),
DISCOUNT + '%',
calculateTotal()
]);
function calculateTotal() {
return new Promise(function(resolve, reject) {
Page.Variables.Total.invoke().then((data) => {
resolve(JSON.parse(data.body).budget);
});
});
}
};
Handling column visibility
note
The Summary row columns visibility may be dependent on the actual columns visibility. If a column is set to not show in mobile/desktop devices the respective summary row columns may also be need to be hidden. Using authorisation setting in WaveMaker, a column could be hidden for specific roles of users.
To handle such scenarios, it is handy to check on the column's existence in runtime. If a column is hidden, in runtime it will not be available under the 'columns' interface. Consider the below code:
Page.DepartmentTable1Beforedatarender = function(widget, data, columns) {
const budgetAggregate = columns.budget.aggregate;
columns.budget.setSummaryRowData(budgetAggregate.sum());
if (columns.deptId) {
columns.deptId.setSummaryRowData("Total Budget");
} else {
columns.name.setSummaryRowData("Total Budget");
}
};
Here, if the column deptId
is present in the table, the label "Total Budget" is rendered under the respective column. Otherwise it is rendered under the name
column.
This could suit a requirement where the column deptId
is present in the larger screens but not in mobile screens, while column name
is present in all the screens.
Here is how the summary row will appear in respective screens: