<!DOCTYPE html> <html class="zg-html"> <head> <meta charset="utf-8"> <title>Aggregate Column</title> <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script> <style> zing-grid zg-footer p { margin-inline-start: 1rem; } zing-grid[loading] { height: 186px; } </style> </head> <body> <zing-grid caption="VoltVoyage eBike Employees"> <zg-column index="firstName"></zg-column> <zg-column index="lastName"></zg-column> <zg-column-group> <zg-column index="hoursWorked.05/27/2024" foot-cell="avg">*[[record.hoursWorked.05/27/2024]]</zg-column> <zg-column index="hoursWorked.05/28/2024" foot-cell="avg"></zg-column> <zg-column index="hoursWorked.05/29/2024" foot-cell="avg"></zg-column> <zg-column index="hoursWorked.05/30/2024" foot-cell="avg"></zg-column> <zg-column index="hoursWorked.05/31/2024" foot-cell="avg"></zg-column> </zg-column-group> <zg-column type="aggregate" type-aggregate-value="avg" renderer="aggregateAvgRenderer"></zg-column> <zg-column type="aggregate" type-aggregate-value="sum" renderer="aggregateSumRenderer"></zg-column> <zg-footer> <p>* Holiday hours</p> </zg-footer> </zing-grid> <script> ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); /** * Renderer function used by the "Average" aggregate zg-column. * Turns the aggregated value into a mathematical string for averages. * @param {Object} recordData - The key:val pair of the entire row * @param {Array} aggregateData - An array of just the rows values * @param {String} aggregateValue - The row's computed average * @returns {string} HTML string to be rendered in the cell */ function aggregateAvgRenderer(recordData, aggregateData, aggregateValue) { return `X̄=${aggregateValue}`; } /** * Renderer function used by the "Sum" aggregate zg-column. * Turns the aggregated value into a mathematical string for sums. * @param {Object} recordData - The key:val pair of the entire row * @param {Array} aggregateData - An array of just the rows values * @param {String} aggregateValue - The row's computed sum * @returns {string} HTML string to be rendered in the cell */ function aggregateSumRenderer(recordData, aggregateData, aggregateValue) { return `Σ=${aggregateValue}`; } // Grab the zing-grid and insert the data (this demo has a lot of data) let zgRef = document.querySelector('zing-grid'); zgRef.setData([{ "firstName": "Alice", "lastName": "Smith", "hoursWorked": { "05/27/2024": 5.82, "05/28/2024": 7.12, "05/29/2024": 8.01, "05/30/2024": 7.65, "05/31/2024": 7.25 } }, { "firstName": "Yong", "lastName": "Lee", "hoursWorked": { "05/27/2024": 6.58, "05/28/2024": 7.11, "05/29/2024": 7.96, "05/30/2024": 8.03, "05/31/2024": 7.44 } }, { "firstName": "Michael", "lastName": "Brown", "hoursWorked": { "05/27/2024": 5.46, "05/28/2024": 8.12, "05/29/2024": 7.98, "05/30/2024": 8.25, "05/31/2024": 7.65 } }, { "firstName": "Chris", "lastName": "Jones", "hoursWorked": { "05/27/2024": 6.15, "05/28/2024": 7.84, "05/29/2024": 7.91, "05/30/2024": 7.75, "05/31/2024": 7.88 } }, { "firstName": "Bella", "lastName": "Rodriguez", "hoursWorked": { "05/27/2024": 5.55, "05/28/2024": 7.99, "05/29/2024": 8.01, "05/30/2024": 8.18, "05/31/2024": 7.81 } }, { "firstName": "John", "lastName": "Doe", "hoursWorked": { "05/27/2024": 6.02, "05/28/2024": 7.78, "05/29/2024": 7.94, "05/30/2024": 8.09, "05/31/2024": 7.47 } }, { "firstName": "Mark", "lastName": "Martinez", "hoursWorked": { "05/27/2024": 5.71, "05/28/2024": 8.14, "05/29/2024": 7.99, "05/30/2024": 7.85, "05/31/2024": 8.20 } }, { "firstName": "Tina", "lastName": "Thompson", "hoursWorked": { "05/27/2024": 5.87, "05/28/2024": 8.08, "05/29/2024": 7.92, "05/30/2024": 8.05, "05/31/2024": 7.79 } }, { "firstName": "Kim", "lastName": "Nguyen", "hoursWorked": { "05/27/2024": 5.94, "05/28/2024": 7.83, "05/29/2024": 8.13, "05/30/2024": 8.06, "05/31/2024": 7.69 } }, { "firstName": "Laura", "lastName": "White", "hoursWorked": { "05/27/2024": 5.88, "05/28/2024": 7.79, "05/29/2024": 8.01, "05/30/2024": 8.11, "05/31/2024": 7.75 } } ]); </script> </body> </html>
<!DOCTYPE html> <html class="zg-html"> <head> <meta charset="utf-8"> <title>Aggregate Column</title> <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script> </head> <body> <zing-grid caption="VoltVoyage eBike Employees"> <zg-column index="firstName"></zg-column> <zg-column index="lastName"></zg-column> <zg-column-group> <zg-column index="hoursWorked.05/27/2024" foot-cell="avg">*[[record.hoursWorked.05/27/2024]]</zg-column> <zg-column index="hoursWorked.05/28/2024" foot-cell="avg"></zg-column> <zg-column index="hoursWorked.05/29/2024" foot-cell="avg"></zg-column> <zg-column index="hoursWorked.05/30/2024" foot-cell="avg"></zg-column> <zg-column index="hoursWorked.05/31/2024" foot-cell="avg"></zg-column> </zg-column-group> <zg-column type="aggregate" type-aggregate-value="avg" renderer="aggregateAvgRenderer"></zg-column> <zg-column type="aggregate" type-aggregate-value="sum" renderer="aggregateSumRenderer"></zg-column> <zg-footer> <p>* Holiday hours</p> </zg-footer> </zing-grid> </body> </html>
zing-grid zg-footer p { margin-inline-start: 1rem; }
/** * Renderer function used by the "Average" aggregate zg-column. * Turns the aggregated value into a mathematical string for averages. * @param {Object} recordData - The key:val pair of the entire row * @param {Array} aggregateData - An array of just the rows values * @param {String} aggregateValue - The row's computed average * @returns {string} HTML string to be rendered in the cell */ function aggregateAvgRenderer(recordData, aggregateData, aggregateValue) { return `X̄=${aggregateValue}`; } /** * Renderer function used by the "Sum" aggregate zg-column. * Turns the aggregated value into a mathematical string for sums. * @param {Object} recordData - The key:val pair of the entire row * @param {Array} aggregateData - An array of just the rows values * @param {String} aggregateValue - The row's computed sum * @returns {string} HTML string to be rendered in the cell */ function aggregateSumRenderer(recordData, aggregateData, aggregateValue) { return `Σ=${aggregateValue}`; } // Grab the zing-grid and insert the data (this demo has a lot of data) let zgRef = document.querySelector('zing-grid'); zgRef.setData([{ "firstName": "Alice", "lastName": "Smith", "hoursWorked": { "05/27/2024": 5.82, "05/28/2024": 7.12, "05/29/2024": 8.01, "05/30/2024": 7.65, "05/31/2024": 7.25 } }, { "firstName": "Yong", "lastName": "Lee", "hoursWorked": { "05/27/2024": 6.58, "05/28/2024": 7.11, "05/29/2024": 7.96, "05/30/2024": 8.03, "05/31/2024": 7.44 } }, { "firstName": "Michael", "lastName": "Brown", "hoursWorked": { "05/27/2024": 5.46, "05/28/2024": 8.12, "05/29/2024": 7.98, "05/30/2024": 8.25, "05/31/2024": 7.65 } }, { "firstName": "Chris", "lastName": "Jones", "hoursWorked": { "05/27/2024": 6.15, "05/28/2024": 7.84, "05/29/2024": 7.91, "05/30/2024": 7.75, "05/31/2024": 7.88 } }, { "firstName": "Bella", "lastName": "Rodriguez", "hoursWorked": { "05/27/2024": 5.55, "05/28/2024": 7.99, "05/29/2024": 8.01, "05/30/2024": 8.18, "05/31/2024": 7.81 } }, { "firstName": "John", "lastName": "Doe", "hoursWorked": { "05/27/2024": 6.02, "05/28/2024": 7.78, "05/29/2024": 7.94, "05/30/2024": 8.09, "05/31/2024": 7.47 } }, { "firstName": "Mark", "lastName": "Martinez", "hoursWorked": { "05/27/2024": 5.71, "05/28/2024": 8.14, "05/29/2024": 7.99, "05/30/2024": 7.85, "05/31/2024": 8.20 } }, { "firstName": "Tina", "lastName": "Thompson", "hoursWorked": { "05/27/2024": 5.87, "05/28/2024": 8.08, "05/29/2024": 7.92, "05/30/2024": 8.05, "05/31/2024": 7.79 } }, { "firstName": "Kim", "lastName": "Nguyen", "hoursWorked": { "05/27/2024": 5.94, "05/28/2024": 7.83, "05/29/2024": 8.13, "05/30/2024": 8.06, "05/31/2024": 7.69 } }, { "firstName": "Laura", "lastName": "White", "hoursWorked": { "05/27/2024": 5.88, "05/28/2024": 7.79, "05/29/2024": 8.01, "05/30/2024": 8.11, "05/31/2024": 7.75 } } ]);