Total Summaries
To display total summaries, populate the summary.totalItems array with configuration objects. Each object should specify a column that supplies data for summary calculation and a summaryType—an aggregate function that should be applied to this data.
This demo illustrates the following total summaries:
-
Total number of orders
This summary uses the "count" summaryType. -
Date of the first order
This summary uses the "min" summaryType and the customizeText function that formats the displayed summary value. -
Total revenue
This summary uses the "sum" summaryType and the valueFormat property to format the summary value as currency.
Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you!
We appreciate your feedback.
We appreciate your feedback.
$(function(){
$("#gridContainer").dxDataGrid({
dataSource: orders,
keyExpr: "ID",
showBorders: true,
selection: {
mode: "single"
},
columns: [{
dataField: "OrderNumber",
width: 130,
caption: "Invoice Number"
}, {
dataField: "OrderDate",
dataType: "date",
width: 160
},
"Employee", {
caption: "City",
dataField: "CustomerStoreCity"
}, {
caption: "State",
dataField: "CustomerStoreState"
}, {
dataField: "SaleAmount",
alignment: "right",
format: "currency"
}
],
summary: {
totalItems: [{
column: "OrderNumber",
summaryType: "count"
}, {
column: "OrderDate",
summaryType: "min",
customizeText: function(data) {
return "First: " + DevExpress.localization.formatDate(data.value, "MMM dd, yyyy");
}
}, {
column: "SaleAmount",
summaryType: "sum",
valueFormat: "currency"
}]
}
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DevExtreme Demo</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/event.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/supplemental.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/unresolved.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.4/css/dx.common.css" />
<link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.4/css/dx.light.css" />
<script src="https://cdn3.devexpress.com/jslib/21.1.4/js/dx.all.js"></script>
<script src="data.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="index.js"></script>
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="gridContainer"></div>
</div>
</body>
</html>
#gridContainer {
height: 440px;
}
var orders = [{
"ID" : 1,
"OrderNumber" : 35703,
"OrderDate" : "2014-04-10",
"SaleAmount" : 11800,
"Terms" : "15 Days",
"TotalAmount" : 12175,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "Los Angeles",
"Employee" : "Harv Mudd"
}, {
"ID" : 4,
"OrderNumber" : 35711,
"OrderDate" : "2014-01-12",
"SaleAmount" : 16050,
"Terms" : "15 Days",
"TotalAmount" : 16550,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "San Jose",
"Employee" : "Jim Packard"
}, {
"ID" : 5,
"OrderNumber" : 35714,
"OrderDate" : "2014-01-22",
"SaleAmount" : 14750,
"Terms" : "15 Days",
"TotalAmount" : 15250,
"CustomerStoreState" : "Nevada",
"CustomerStoreCity" : "Las Vegas",
"Employee" : "Harv Mudd"
}, {
"ID" : 7,
"OrderNumber" : 35983,
"OrderDate" : "2014-02-07",
"SaleAmount" : 3725,
"Terms" : "15 Days",
"TotalAmount" : 3850,
"CustomerStoreState" : "Colorado",
"CustomerStoreCity" : "Denver",
"Employee" : "Todd Hoffman"
}, {
"ID" : 9,
"OrderNumber" : 36987,
"OrderDate" : "2014-03-11",
"SaleAmount" : 14200,
"Terms" : "15 Days",
"TotalAmount" : 14800,
"CustomerStoreState" : "Utah",
"CustomerStoreCity" : "Salt Lake City",
"Employee" : "Clark Morgan"
}, {
"ID" : 11,
"OrderNumber" : 38466,
"OrderDate" : "2014-03-01",
"SaleAmount" : 7800,
"Terms" : "15 Days",
"TotalAmount" : 8200,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "Los Angeles",
"Employee" : "Harv Mudd"
}, {
"ID" : 15,
"OrderNumber" : 39874,
"OrderDate" : "2014-02-04",
"SaleAmount" : 9050,
"Terms" : "30 Days",
"TotalAmount" : 19100,
"CustomerStoreState" : "Nevada",
"CustomerStoreCity" : "Las Vegas",
"Employee" : "Harv Mudd"
}, {
"ID" : 18,
"OrderNumber" : 42847,
"OrderDate" : "2014-02-15",
"SaleAmount" : 20400,
"Terms" : "30 Days",
"TotalAmount" : 20800,
"CustomerStoreState" : "Wyoming",
"CustomerStoreCity" : "Casper",
"Employee" : "Todd Hoffman"
}, {
"ID" : 19,
"OrderNumber" : 43982,
"OrderDate" : "2014-05-29",
"SaleAmount" : 6050,
"Terms" : "30 Days",
"TotalAmount" : 6250,
"CustomerStoreState" : "Utah",
"CustomerStoreCity" : "Salt Lake City",
"Employee" : "Clark Morgan"
}, {
"ID" : 29,
"OrderNumber" : 56272,
"OrderDate" : "2014-02-06",
"SaleAmount" : 15850,
"Terms" : "30 Days",
"TotalAmount" : 16350,
"CustomerStoreState" : "Utah",
"CustomerStoreCity" : "Salt Lake City",
"Employee" : "Clark Morgan"
}, {
"ID" : 30,
"OrderNumber" : 57429,
"OrderDate" : "2013-12-31",
"SaleAmount" : 11050,
"Terms" : "30 Days",
"TotalAmount" : 11400,
"CustomerStoreState" : "Arizona",
"CustomerStoreCity" : "Phoenix",
"Employee" : "Clark Morgan"
}, {
"ID" : 32,
"OrderNumber" : 58292,
"OrderDate" : "2014-05-13",
"SaleAmount" : 13500,
"Terms" : "15 Days",
"TotalAmount" : 13800,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "Los Angeles",
"Employee" : "Harv Mudd"
}, {
"ID" : 36,
"OrderNumber" : 62427,
"OrderDate" : "2014-01-27",
"SaleAmount" : 23500,
"Terms" : "15 Days",
"TotalAmount" : 24000,
"CustomerStoreState" : "Nevada",
"CustomerStoreCity" : "Las Vegas",
"Employee" : "Harv Mudd"
}, {
"ID" : 39,
"OrderNumber" : 65977,
"OrderDate" : "2014-02-05",
"SaleAmount" : 2550,
"Terms" : "15 Days",
"TotalAmount" : 2625,
"CustomerStoreState" : "Wyoming",
"CustomerStoreCity" : "Casper",
"Employee" : "Todd Hoffman"
}, {
"ID" : 40,
"OrderNumber" : 66947,
"OrderDate" : "2014-03-23",
"SaleAmount" : 3500,
"Terms" : "15 Days",
"TotalAmount" : 3600,
"CustomerStoreState" : "Utah",
"CustomerStoreCity" : "Salt Lake City",
"Employee" : "Clark Morgan"
}, {
"ID" : 42,
"OrderNumber" : 68428,
"OrderDate" : "2014-04-10",
"SaleAmount" : 10500,
"Terms" : "15 Days",
"TotalAmount" : 10900,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "Los Angeles",
"Employee" : "Harv Mudd"
}, {
"ID" : 43,
"OrderNumber" : 69477,
"OrderDate" : "2014-03-09",
"SaleAmount" : 14200,
"Terms" : "15 Days",
"TotalAmount" : 14500,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "Anaheim",
"Employee" : "Harv Mudd"
}, {
"ID" : 46,
"OrderNumber" : 72947,
"OrderDate" : "2014-01-14",
"SaleAmount" : 13350,
"Terms" : "30 Days",
"TotalAmount" : 13650,
"CustomerStoreState" : "Nevada",
"CustomerStoreCity" : "Las Vegas",
"Employee" : "Harv Mudd"
}, {
"ID" : 47,
"OrderNumber" : 73088,
"OrderDate" : "2014-03-25",
"SaleAmount" : 8600,
"Terms" : "30 Days",
"TotalAmount" : 8850,
"CustomerStoreState" : "Nevada",
"CustomerStoreCity" : "Reno",
"Employee" : "Clark Morgan"
}, {
"ID" : 50,
"OrderNumber" : 76927,
"OrderDate" : "2014-04-27",
"SaleAmount" : 9800,
"Terms" : "30 Days",
"TotalAmount" : 10050,
"CustomerStoreState" : "Utah",
"CustomerStoreCity" : "Salt Lake City",
"Employee" : "Clark Morgan"
}, {
"ID" : 51,
"OrderNumber" : 77297,
"OrderDate" : "2014-04-30",
"SaleAmount" : 10850,
"Terms" : "30 Days",
"TotalAmount" : 11100,
"CustomerStoreState" : "Arizona",
"CustomerStoreCity" : "Phoenix",
"Employee" : "Clark Morgan"
}, {
"ID" : 56,
"OrderNumber" : 84744,
"OrderDate" : "2014-02-10",
"SaleAmount" : 4650,
"Terms" : "30 Days",
"TotalAmount" : 4750,
"CustomerStoreState" : "Nevada",
"CustomerStoreCity" : "Las Vegas",
"Employee" : "Harv Mudd"
}, {
"ID" : 57,
"OrderNumber" : 85028,
"OrderDate" : "2014-05-17",
"SaleAmount" : 2575,
"Terms" : "30 Days",
"TotalAmount" : 2625,
"CustomerStoreState" : "Nevada",
"CustomerStoreCity" : "Reno",
"Employee" : "Clark Morgan"
}, {
"ID" : 59,
"OrderNumber" : 87297,
"OrderDate" : "2014-04-21",
"SaleAmount" : 14200,
"Terms" : "30 Days",
"TotalAmount" : 0,
"CustomerStoreState" : "Wyoming",
"CustomerStoreCity" : "Casper",
"Employee" : "Todd Hoffman"
}, {
"ID" : 60,
"OrderNumber" : 88027,
"OrderDate" : "2014-02-14",
"SaleAmount" : 13650,
"Terms" : "30 Days",
"TotalAmount" : 14050,
"CustomerStoreState" : "Utah",
"CustomerStoreCity" : "Salt Lake City",
"Employee" : "Clark Morgan"
}, {
"ID" : 65,
"OrderNumber" : 94726,
"OrderDate" : "2014-05-22",
"SaleAmount" : 20500,
"Terms" : "15 Days",
"TotalAmount" : 20800,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "San Jose",
"Employee" : "Jim Packard"
}, {
"ID" : 66,
"OrderNumber" : 95266,
"OrderDate" : "2014-03-10",
"SaleAmount" : 9050,
"Terms" : "15 Days",
"TotalAmount" : 9250,
"CustomerStoreState" : "Nevada",
"CustomerStoreCity" : "Las Vegas",
"Employee" : "Harv Mudd"
}, {
"ID" : 69,
"OrderNumber" : 98477,
"OrderDate" : "2014-01-01",
"SaleAmount" : 23500,
"Terms" : "15 Days",
"TotalAmount" : 23800,
"CustomerStoreState" : "Wyoming",
"CustomerStoreCity" : "Casper",
"Employee" : "Todd Hoffman"
}, {
"ID" : 70,
"OrderNumber" : 99247,
"OrderDate" : "2014-02-08",
"SaleAmount" : 2100,
"Terms" : "15 Days",
"TotalAmount" : 2150,
"CustomerStoreState" : "Utah",
"CustomerStoreCity" : "Salt Lake City",
"Employee" : "Clark Morgan"
}, {
"ID" : 78,
"OrderNumber" : 174884,
"OrderDate" : "2014-04-10",
"SaleAmount" : 7200,
"Terms" : "30 Days",
"TotalAmount" : 7350,
"CustomerStoreState" : "Colorado",
"CustomerStoreCity" : "Denver",
"Employee" : "Todd Hoffman"
}, {
"ID" : 81,
"OrderNumber" : 188877,
"OrderDate" : "2014-02-11",
"SaleAmount" : 8750,
"Terms" : "30 Days",
"TotalAmount" : 8900,
"CustomerStoreState" : "Arizona",
"CustomerStoreCity" : "Phoenix",
"Employee" : "Clark Morgan"
}, {
"ID" : 82,
"OrderNumber" : 191883,
"OrderDate" : "2014-02-05",
"SaleAmount" : 9900,
"Terms" : "30 Days",
"TotalAmount" : 10150,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "Los Angeles",
"Employee" : "Harv Mudd"
}, {
"ID" : 83,
"OrderNumber" : 192474,
"OrderDate" : "2014-01-21",
"SaleAmount" : 12800,
"Terms" : "30 Days",
"TotalAmount" : 13100,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "Anaheim",
"Employee" : "Harv Mudd"
}, {
"ID" : 84,
"OrderNumber" : 193847,
"OrderDate" : "2014-03-21",
"SaleAmount" : 14100,
"Terms" : "30 Days",
"TotalAmount" : 14350,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "San Diego",
"Employee" : "Harv Mudd"
}, {
"ID" : 85,
"OrderNumber" : 194877,
"OrderDate" : "2014-03-06",
"SaleAmount" : 4750,
"Terms" : "30 Days",
"TotalAmount" : 4950,
"CustomerStoreState" : "California",
"CustomerStoreCity" : "San Jose",
"Employee" : "Jim Packard"
}, {
"ID" : 86,
"OrderNumber" : 195746,
"OrderDate" : "2014-05-26",
"SaleAmount" : 9050,
"Terms" : "30 Days",
"TotalAmount" : 9250,
"CustomerStoreState" : "Nevada",
"CustomerStoreCity" : "Las Vegas",
"Employee" : "Harv Mudd"
}, {
"ID" : 87,
"OrderNumber" : 197474,
"OrderDate" : "2014-03-02",
"SaleAmount" : 6400,
"Terms" : "30 Days",
"TotalAmount" : 6600,
"CustomerStoreState" : "Nevada",
"CustomerStoreCity" : "Reno",
"Employee" : "Clark Morgan"
}, {
"ID" : 88,
"OrderNumber" : 198746,
"OrderDate" : "2014-05-09",
"SaleAmount" : 15700,
"Terms" : "30 Days",
"TotalAmount" : 16050,
"CustomerStoreState" : "Colorado",
"CustomerStoreCity" : "Denver",
"Employee" : "Todd Hoffman"
}, {
"ID" : 91,
"OrderNumber" : 214222,
"OrderDate" : "2014-02-08T00:00:00",
"SaleAmount" : 11050,
"Terms" : "30 Days",
"TotalAmount" : 11250,
"CustomerStoreState" : "Arizona",
"CustomerStoreCity" : "Phoenix",
"Employee" : "Clark Morgan"
}];