experiment_id: web-retrieval-v1
fixture_id: /demos/web-component-grid-aggregation-column-row-count
mode: provenance
representation: html
origin_response_id: 52466cf34bce9022c4aad373058be34e
version: 2026-10-21
version_created_at_utc: 2026-10-21T20:42:35.535Z
version_nonce: 1b2087be462f3d09069991d3d943986b
generated_at_utc: 2026-11-05T09:38:01.451Z
response_nonce: d64a2eab5efe6132a28cd9a631555dfc

Aggregation - Row Count

74 of 125
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