• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Simple Grid</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     .zg-body {
    10.       background-color: #e6e6e6;
    11.     }
    12.  
    13.     zg-foot zg-cell:nth-of-type(2),
    14.     zg-foot zg-cell:nth-of-type(3) {
    15.       background: #fffced;
    16.       border-left: 1px solid #fff0a3;
    17.     }
    18.  
    19.     zg-foot zg-cell:nth-of-type(3) {
    20.       border-right: 1px solid #fff0a3;
    21.     }
    22.  
    23.     zing-grid[loading] {
    24.       height: 414px;
    25.     }
    26.   </style>
    27. </head>
    28.  
    29. <body class="zg-body">
    30.   <h3>Aggregate Row Grid</h3>
    31.   <p>Here is a complete grid with the average of each column calculated in the grid's footer:</p>
    32.  
    33.   <zing-grid caption="Top Cryptocurrencies" viewport-stop data='[
    34.   {
    35.     "id": "bitcoin",
    36.     "name": "Bitcoin",
    37.     "symbol": "BTC",
    38.     "rank": "1",
    39.     "price_usd": "6510.57322669",
    40.     "price_btc": "1.0",
    41.     "24h_volume_usd": "4058714374.46",
    42.     "market_cap_usd": "112425633191",
    43.     "available_supply": "17268162.0",
    44.     "total_supply": "17268162.0",
    45.     "max_supply": "21000000.0",
    46.     "percent_change_1h": "-0.4",
    47.     "percent_change_24h": "0.11",
    48.     "percent_change_7d": "0.49",
    49.     "last_updated": "1536971121"
    50.   },
    51.   {
    52.     "id": "ethereum",
    53.     "name": "Ethereum",
    54.     "symbol": "ETH",
    55.     "rank": "2",
    56.     "price_usd": "210.385950117",
    57.     "price_btc": "0.03245263",
    58.     "24h_volume_usd": "2219293714.75",
    59.     "market_cap_usd": "21451438471.0",
    60.     "available_supply": "101962315.0",
    61.     "total_supply": "101962315.0",
    62.     "max_supply": null,
    63.     "percent_change_1h": "-1.84",
    64.     "percent_change_24h": "-0.59",
    65.     "percent_change_7d": "-3.71",
    66.     "last_updated": "1536971072"
    67.   },
    68.   {
    69.     "id": "ripple",
    70.     "name": "XRP",
    71.     "symbol": "XRP",
    72.     "rank": "3",
    73.     "price_usd": "0.2772190275",
    74.     "price_btc": "0.00004272",
    75.     "24h_volume_usd": "268261690.279",
    76.     "market_cap_usd": "11035831425.0",
    77.     "available_supply": "39809069106.0",
    78.     "total_supply": "99991841593.0",
    79.     "max_supply": "100000000000",
    80.     "percent_change_1h": "-0.72",
    81.     "percent_change_24h": "-1.29",
    82.     "percent_change_7d": "-5.6",
    83.     "last_updated": "1536971104"
    84.   },
    85.   {
    86.     "id": "bitcoin-cash",
    87.     "name": "Bitcoin Cash",
    88.     "symbol": "BCH",
    89.     "rank": "4",
    90.     "price_usd": "449.549660414",
    91.     "price_btc": "0.06934432",
    92.     "24h_volume_usd": "313814593.893",
    93.     "market_cap_usd": "7799068477.0",
    94.     "available_supply": "17348625.0",
    95.     "total_supply": "17348625.0",
    96.     "max_supply": "21000000.0",
    97.     "percent_change_1h": "-0.94",
    98.     "percent_change_24h": "-3.39",
    99.     "percent_change_7d": "-10.48",
    100.     "last_updated": "1536971070"
    101.   },
    102.   {
    103.     "id": "eos",
    104.     "name": "EOS",
    105.     "symbol": "EOS",
    106.     "rank": "5",
    107.     "price_usd": "5.2702520505",
    108.     "price_btc": "0.00081295",
    109.     "24h_volume_usd": "600466470.371",
    110.     "market_cap_usd": "4776140189.0",
    111.     "available_supply": "906245118.0",
    112.     "total_supply": "1006245120.0",
    113.     "max_supply": null,
    114.     "percent_change_1h": "-1.01",
    115.     "percent_change_24h": "-2.72",
    116.     "percent_change_7d": "3.52",
    117.     "last_updated": "1536971072"
    118.   }
    119.   ]'>
    120.     <zg-colgroup>
    121.       <zg-column index="name"></zg-column>
    122.       <zg-column index="price_usd" header="Price (USD)" type="currency" foot-cell="avg"></zg-column>
    123.       <zg-column index="percent_change_24h" header="Percent Change (24h)" type="number" foot-cell="avg"></zg-column>
    124.     </zg-colgroup>
    125.   </zing-grid>
    126.   <script>
    127.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    128.   </script>
    129. </body>
    130.  
    131. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Simple Grid</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body class="zg-body">
    11.   <h3>Aggregate Row Grid</h3>
    12.   <p>Here is a complete grid with the average of each column calculated in the grid's footer:</p>
    13.  
    14.   <zing-grid caption="Top Cryptocurrencies" viewport-stop data='[
    15.   {
    16.     "id": "bitcoin",
    17.     "name": "Bitcoin",
    18.     "symbol": "BTC",
    19.     "rank": "1",
    20.     "price_usd": "6510.57322669",
    21.     "price_btc": "1.0",
    22.     "24h_volume_usd": "4058714374.46",
    23.     "market_cap_usd": "112425633191",
    24.     "available_supply": "17268162.0",
    25.     "total_supply": "17268162.0",
    26.     "max_supply": "21000000.0",
    27.     "percent_change_1h": "-0.4",
    28.     "percent_change_24h": "0.11",
    29.     "percent_change_7d": "0.49",
    30.     "last_updated": "1536971121"
    31.   },
    32.   {
    33.     "id": "ethereum",
    34.     "name": "Ethereum",
    35.     "symbol": "ETH",
    36.     "rank": "2",
    37.     "price_usd": "210.385950117",
    38.     "price_btc": "0.03245263",
    39.     "24h_volume_usd": "2219293714.75",
    40.     "market_cap_usd": "21451438471.0",
    41.     "available_supply": "101962315.0",
    42.     "total_supply": "101962315.0",
    43.     "max_supply": null,
    44.     "percent_change_1h": "-1.84",
    45.     "percent_change_24h": "-0.59",
    46.     "percent_change_7d": "-3.71",
    47.     "last_updated": "1536971072"
    48.   },
    49.   {
    50.     "id": "ripple",
    51.     "name": "XRP",
    52.     "symbol": "XRP",
    53.     "rank": "3",
    54.     "price_usd": "0.2772190275",
    55.     "price_btc": "0.00004272",
    56.     "24h_volume_usd": "268261690.279",
    57.     "market_cap_usd": "11035831425.0",
    58.     "available_supply": "39809069106.0",
    59.     "total_supply": "99991841593.0",
    60.     "max_supply": "100000000000",
    61.     "percent_change_1h": "-0.72",
    62.     "percent_change_24h": "-1.29",
    63.     "percent_change_7d": "-5.6",
    64.     "last_updated": "1536971104"
    65.   },
    66.   {
    67.     "id": "bitcoin-cash",
    68.     "name": "Bitcoin Cash",
    69.     "symbol": "BCH",
    70.     "rank": "4",
    71.     "price_usd": "449.549660414",
    72.     "price_btc": "0.06934432",
    73.     "24h_volume_usd": "313814593.893",
    74.     "market_cap_usd": "7799068477.0",
    75.     "available_supply": "17348625.0",
    76.     "total_supply": "17348625.0",
    77.     "max_supply": "21000000.0",
    78.     "percent_change_1h": "-0.94",
    79.     "percent_change_24h": "-3.39",
    80.     "percent_change_7d": "-10.48",
    81.     "last_updated": "1536971070"
    82.   },
    83.   {
    84.     "id": "eos",
    85.     "name": "EOS",
    86.     "symbol": "EOS",
    87.     "rank": "5",
    88.     "price_usd": "5.2702520505",
    89.     "price_btc": "0.00081295",
    90.     "24h_volume_usd": "600466470.371",
    91.     "market_cap_usd": "4776140189.0",
    92.     "available_supply": "906245118.0",
    93.     "total_supply": "1006245120.0",
    94.     "max_supply": null,
    95.     "percent_change_1h": "-1.01",
    96.     "percent_change_24h": "-2.72",
    97.     "percent_change_7d": "3.52",
    98.     "last_updated": "1536971072"
    99.   }
    100.   ]'>
    101.     <zg-colgroup>
    102.       <zg-column index="name"></zg-column>
    103.       <zg-column index="price_usd" header="Price (USD)" type="currency" foot-cell="avg"></zg-column>
    104.       <zg-column index="percent_change_24h" header="Percent Change (24h)" type="number" foot-cell="avg"></zg-column>
    105.     </zg-colgroup>
    106.   </zing-grid>
    107. </body>
    108.  
    109. </html>
    1. .zg-body {
    2.   background-color: #e6e6e6;
    3. }
    4.  
    5. zg-foot zg-cell:nth-of-type(2),
    6. zg-foot zg-cell:nth-of-type(3) {
    7.   background: #fffced;
    8.   border-left: 1px solid #fff0a3;
    9. }
    10.  
    11. zg-foot zg-cell:nth-of-type(3) {
    12.   border-right: 1px solid #fff0a3;
    13. }
    1.