<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingGrid: Simple Grid</title>
<script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
<style>
.zg-body {
background-color: #e6e6e6;
}
zg-foot zg-cell:nth-of-type(2),
zg-foot zg-cell:nth-of-type(3) {
background: #fffced;
border-left: 1px solid #fff0a3;
}
zg-foot zg-cell:nth-of-type(3) {
border-right: 1px solid #fff0a3;
}
zing-grid[loading] {
height: 414px;
}
</style>
</head>
<body class="zg-body">
<h3>Aggregate Row Grid</h3>
<p>Here is a complete grid with the average of each column calculated in the grid's footer:</p>
<zing-grid caption="Top Cryptocurrencies" viewport-stop data='[
{
"id": "bitcoin",
"name": "Bitcoin",
"symbol": "BTC",
"rank": "1",
"price_usd": "6510.57322669",
"price_btc": "1.0",
"24h_volume_usd": "4058714374.46",
"market_cap_usd": "112425633191",
"available_supply": "17268162.0",
"total_supply": "17268162.0",
"max_supply": "21000000.0",
"percent_change_1h": "-0.4",
"percent_change_24h": "0.11",
"percent_change_7d": "0.49",
"last_updated": "1536971121"
},
{
"id": "ethereum",
"name": "Ethereum",
"symbol": "ETH",
"rank": "2",
"price_usd": "210.385950117",
"price_btc": "0.03245263",
"24h_volume_usd": "2219293714.75",
"market_cap_usd": "21451438471.0",
"available_supply": "101962315.0",
"total_supply": "101962315.0",
"max_supply": null,
"percent_change_1h": "-1.84",
"percent_change_24h": "-0.59",
"percent_change_7d": "-3.71",
"last_updated": "1536971072"
},
{
"id": "ripple",
"name": "XRP",
"symbol": "XRP",
"rank": "3",
"price_usd": "0.2772190275",
"price_btc": "0.00004272",
"24h_volume_usd": "268261690.279",
"market_cap_usd": "11035831425.0",
"available_supply": "39809069106.0",
"total_supply": "99991841593.0",
"max_supply": "100000000000",
"percent_change_1h": "-0.72",
"percent_change_24h": "-1.29",
"percent_change_7d": "-5.6",
"last_updated": "1536971104"
},
{
"id": "bitcoin-cash",
"name": "Bitcoin Cash",
"symbol": "BCH",
"rank": "4",
"price_usd": "449.549660414",
"price_btc": "0.06934432",
"24h_volume_usd": "313814593.893",
"market_cap_usd": "7799068477.0",
"available_supply": "17348625.0",
"total_supply": "17348625.0",
"max_supply": "21000000.0",
"percent_change_1h": "-0.94",
"percent_change_24h": "-3.39",
"percent_change_7d": "-10.48",
"last_updated": "1536971070"
},
{
"id": "eos",
"name": "EOS",
"symbol": "EOS",
"rank": "5",
"price_usd": "5.2702520505",
"price_btc": "0.00081295",
"24h_volume_usd": "600466470.371",
"market_cap_usd": "4776140189.0",
"available_supply": "906245118.0",
"total_supply": "1006245120.0",
"max_supply": null,
"percent_change_1h": "-1.01",
"percent_change_24h": "-2.72",
"percent_change_7d": "3.52",
"last_updated": "1536971072"
}
]'>
<zg-colgroup>
<zg-column index="name"></zg-column>
<zg-column index="price_usd" header="Price (USD)" type="currency" foot-cell="avg"></zg-column>
<zg-column index="percent_change_24h" header="Percent Change (24h)" type="number" foot-cell="avg"></zg-column>
</zg-colgroup>
</zing-grid>
<script>
ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingGrid: Simple Grid</title>
<script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
</head>
<body class="zg-body">
<h3>Aggregate Row Grid</h3>
<p>Here is a complete grid with the average of each column calculated in the grid's footer:</p>
<zing-grid caption="Top Cryptocurrencies" viewport-stop data='[
{
"id": "bitcoin",
"name": "Bitcoin",
"symbol": "BTC",
"rank": "1",
"price_usd": "6510.57322669",
"price_btc": "1.0",
"24h_volume_usd": "4058714374.46",
"market_cap_usd": "112425633191",
"available_supply": "17268162.0",
"total_supply": "17268162.0",
"max_supply": "21000000.0",
"percent_change_1h": "-0.4",
"percent_change_24h": "0.11",
"percent_change_7d": "0.49",
"last_updated": "1536971121"
},
{
"id": "ethereum",
"name": "Ethereum",
"symbol": "ETH",
"rank": "2",
"price_usd": "210.385950117",
"price_btc": "0.03245263",
"24h_volume_usd": "2219293714.75",
"market_cap_usd": "21451438471.0",
"available_supply": "101962315.0",
"total_supply": "101962315.0",
"max_supply": null,
"percent_change_1h": "-1.84",
"percent_change_24h": "-0.59",
"percent_change_7d": "-3.71",
"last_updated": "1536971072"
},
{
"id": "ripple",
"name": "XRP",
"symbol": "XRP",
"rank": "3",
"price_usd": "0.2772190275",
"price_btc": "0.00004272",
"24h_volume_usd": "268261690.279",
"market_cap_usd": "11035831425.0",
"available_supply": "39809069106.0",
"total_supply": "99991841593.0",
"max_supply": "100000000000",
"percent_change_1h": "-0.72",
"percent_change_24h": "-1.29",
"percent_change_7d": "-5.6",
"last_updated": "1536971104"
},
{
"id": "bitcoin-cash",
"name": "Bitcoin Cash",
"symbol": "BCH",
"rank": "4",
"price_usd": "449.549660414",
"price_btc": "0.06934432",
"24h_volume_usd": "313814593.893",
"market_cap_usd": "7799068477.0",
"available_supply": "17348625.0",
"total_supply": "17348625.0",
"max_supply": "21000000.0",
"percent_change_1h": "-0.94",
"percent_change_24h": "-3.39",
"percent_change_7d": "-10.48",
"last_updated": "1536971070"
},
{
"id": "eos",
"name": "EOS",
"symbol": "EOS",
"rank": "5",
"price_usd": "5.2702520505",
"price_btc": "0.00081295",
"24h_volume_usd": "600466470.371",
"market_cap_usd": "4776140189.0",
"available_supply": "906245118.0",
"total_supply": "1006245120.0",
"max_supply": null,
"percent_change_1h": "-1.01",
"percent_change_24h": "-2.72",
"percent_change_7d": "3.52",
"last_updated": "1536971072"
}
]'>
<zg-colgroup>
<zg-column index="name"></zg-column>
<zg-column index="price_usd" header="Price (USD)" type="currency" foot-cell="avg"></zg-column>
<zg-column index="percent_change_24h" header="Percent Change (24h)" type="number" foot-cell="avg"></zg-column>
</zg-colgroup>
</zing-grid>
</body>
</html>
.zg-body {
background-color: #e6e6e6;
}
zg-foot zg-cell:nth-of-type(2),
zg-foot zg-cell:nth-of-type(3) {
background: #fffced;
border-left: 1px solid #fff0a3;
}
zg-foot zg-cell:nth-of-type(3) {
border-right: 1px solid #fff0a3;
}