Your search did not match any results.
Data Grid

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.

Backend API
Copy to CodePen
Apply
Reset
var DemoApp = angular.module('DemoApp', ['dx']); DemoApp.controller('DemoController', function DemoController($scope) { $scope.dataGridOptions = { 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.6/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/21.1.6/css/dx.light.css" /> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js"></script> <script>window.angular || document.write(decodeURIComponent('%3Cscript src="js/angular.min.js"%3E%3C/script%3E'))</script> <script src="https://cdn3.devexpress.com/jslib/21.1.6/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" ng-app="DemoApp" ng-controller="DemoController"> <div id="gridContainer" dx-data-grid="dataGridOptions"></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" }];