Aggregation - Min
Display the column's lowest value in the footer with
<zg-column index="exampleIndexName" foot-cell="min"></zg-column>.
Result
Full
HTML
CSS
JS
Edit
Download
Full Code
<!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> body { background: #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: 413px; } </style> </head> <body> <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="min"></zg-column> <zg-column index="percent_change_24h" header="Percent Change (24h)" type="number" foot-cell="min"></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> <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="min"></zg-column> <zg-column index="percent_change_24h" header="Percent Change (24h)" type="number" foot-cell="min"></zg-column> </zg-colgroup> </zing-grid> </body> </html>
body{background:#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; }
// No JS code
Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!