<!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
}
}
]);