• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid: Simple Grid</title>
      <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></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: 386px;
        }
      </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></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" defer></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; 
    }