Aggregation - Row Count

73 of 124
Display the number of rows within a column in the footer with <zg-column index="exampleIndexName" foot-cell="count"></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>
    .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">
  <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="count"></zg-column>
      <zg-column index="percent_change_24h" header="Percent Change (24h)" type="number" foot-cell="count"></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">
    <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="count"></zg-column>
        <zg-column index="percent_change_24h" header="Percent Change (24h)" type="number" foot-cell="count"></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; 
}
// 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!

Edit in Studio

Demo Gallery