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