• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Simple Grid</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     .zg-body {
    10.       background-color: #e6e6e6;
    11.     }
    12.  
    13.     zg-foot zg-cell:nth-of-type(2),
    14.     zg-foot zg-cell:nth-of-type(3) {
    15.       background: #fffced;
    16.       border-left: 1px solid #fff0a3;
    17.     }
    18.  
    19.     zg-foot zg-cell:nth-of-type(3) {
    20.       border-right: 1px solid #fff0a3;
    21.     }
    22.  
    23.     zing-grid[loading] {
    24.       height: 414px;
    25.     }
    26.   </style>
    27. </head>
    28.  
    29. <body class="zg-body">
    30.   <zing-grid caption="Top Cryptocurrencies" viewport-stop data='[
    31.   {
    32.     "id": "bitcoin",
    33.     "name": "Bitcoin",
    34.     "symbol": "BTC",
    35.     "rank": "1",
    36.     "price_usd": "6510.57322669",
    37.     "price_btc": "1.0",
    38.     "24h_volume_usd": "4058714374.46",
    39.     "market_cap_usd": "112425633191",
    40.     "available_supply": "17268162.0",
    41.     "total_supply": "17268162.0",
    42.     "max_supply": "21000000.0",
    43.     "percent_change_1h": "-0.4",
    44.     "percent_change_24h": "0.11",
    45.     "percent_change_7d": "0.49",
    46.     "last_updated": "1536971121"
    47.   },
    48.   {
    49.     "id": "ethereum",
    50.     "name": "Ethereum",
    51.     "symbol": "ETH",
    52.     "rank": "2",
    53.     "price_usd": "210.385950117",
    54.     "price_btc": "0.03245263",
    55.     "24h_volume_usd": "2219293714.75",
    56.     "market_cap_usd": "21451438471.0",
    57.     "available_supply": "101962315.0",
    58.     "total_supply": "101962315.0",
    59.     "max_supply": null,
    60.     "percent_change_1h": "-1.84",
    61.     "percent_change_24h": "-0.59",
    62.     "percent_change_7d": "-3.71",
    63.     "last_updated": "1536971072"
    64.   },
    65.   {
    66.     "id": "ripple",
    67.     "name": "XRP",
    68.     "symbol": "XRP",
    69.     "rank": "3",
    70.     "price_usd": "0.2772190275",
    71.     "price_btc": "0.00004272",
    72.     "24h_volume_usd": "268261690.279",
    73.     "market_cap_usd": "11035831425.0",
    74.     "available_supply": "39809069106.0",
    75.     "total_supply": "99991841593.0",
    76.     "max_supply": "100000000000",
    77.     "percent_change_1h": "-0.72",
    78.     "percent_change_24h": "-1.29",
    79.     "percent_change_7d": "-5.6",
    80.     "last_updated": "1536971104"
    81.   },
    82.   {
    83.     "id": "bitcoin-cash",
    84.     "name": "Bitcoin Cash",
    85.     "symbol": "BCH",
    86.     "rank": "4",
    87.     "price_usd": "449.549660414",
    88.     "price_btc": "0.06934432",
    89.     "24h_volume_usd": "313814593.893",
    90.     "market_cap_usd": "7799068477.0",
    91.     "available_supply": "17348625.0",
    92.     "total_supply": "17348625.0",
    93.     "max_supply": "21000000.0",
    94.     "percent_change_1h": "-0.94",
    95.     "percent_change_24h": "-3.39",
    96.     "percent_change_7d": "-10.48",
    97.     "last_updated": "1536971070"
    98.   },
    99.   {
    100.     "id": "eos",
    101.     "name": "EOS",
    102.     "symbol": "EOS",
    103.     "rank": "5",
    104.     "price_usd": "5.2702520505",
    105.     "price_btc": "0.00081295",
    106.     "24h_volume_usd": "600466470.371",
    107.     "market_cap_usd": "4776140189.0",
    108.     "available_supply": "906245118.0",
    109.     "total_supply": "1006245120.0",
    110.     "max_supply": null,
    111.     "percent_change_1h": "-1.01",
    112.     "percent_change_24h": "-2.72",
    113.     "percent_change_7d": "3.52",
    114.     "last_updated": "1536971072"
    115.   }
    116.   ]'>
    117.     <zg-colgroup>
    118.       <zg-column index="name"></zg-column>
    119.       <zg-column index="price_usd" header="Price (USD)" type="currency" foot-cell="sum"></zg-column>
    120.       <zg-column index="percent_change_24h" header="Percent Change (24h)" type="number" foot-cell="Average change: [[avg]]"></zg-column>
    121.     </zg-colgroup>
    122.   </zing-grid>
    123.   <script>
    124.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    125.   </script>
    126. </body>
    127.  
    128. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Simple Grid</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body class="zg-body">
    11.   <zing-grid caption="Top Cryptocurrencies" viewport-stop data='[
    12.   {
    13.     "id": "bitcoin",
    14.     "name": "Bitcoin",
    15.     "symbol": "BTC",
    16.     "rank": "1",
    17.     "price_usd": "6510.57322669",
    18.     "price_btc": "1.0",
    19.     "24h_volume_usd": "4058714374.46",
    20.     "market_cap_usd": "112425633191",
    21.     "available_supply": "17268162.0",
    22.     "total_supply": "17268162.0",
    23.     "max_supply": "21000000.0",
    24.     "percent_change_1h": "-0.4",
    25.     "percent_change_24h": "0.11",
    26.     "percent_change_7d": "0.49",
    27.     "last_updated": "1536971121"
    28.   },
    29.   {
    30.     "id": "ethereum",
    31.     "name": "Ethereum",
    32.     "symbol": "ETH",
    33.     "rank": "2",
    34.     "price_usd": "210.385950117",
    35.     "price_btc": "0.03245263",
    36.     "24h_volume_usd": "2219293714.75",
    37.     "market_cap_usd": "21451438471.0",
    38.     "available_supply": "101962315.0",
    39.     "total_supply": "101962315.0",
    40.     "max_supply": null,
    41.     "percent_change_1h": "-1.84",
    42.     "percent_change_24h": "-0.59",
    43.     "percent_change_7d": "-3.71",
    44.     "last_updated": "1536971072"
    45.   },
    46.   {
    47.     "id": "ripple",
    48.     "name": "XRP",
    49.     "symbol": "XRP",
    50.     "rank": "3",
    51.     "price_usd": "0.2772190275",
    52.     "price_btc": "0.00004272",
    53.     "24h_volume_usd": "268261690.279",
    54.     "market_cap_usd": "11035831425.0",
    55.     "available_supply": "39809069106.0",
    56.     "total_supply": "99991841593.0",
    57.     "max_supply": "100000000000",
    58.     "percent_change_1h": "-0.72",
    59.     "percent_change_24h": "-1.29",
    60.     "percent_change_7d": "-5.6",
    61.     "last_updated": "1536971104"
    62.   },
    63.   {
    64.     "id": "bitcoin-cash",
    65.     "name": "Bitcoin Cash",
    66.     "symbol": "BCH",
    67.     "rank": "4",
    68.     "price_usd": "449.549660414",
    69.     "price_btc": "0.06934432",
    70.     "24h_volume_usd": "313814593.893",
    71.     "market_cap_usd": "7799068477.0",
    72.     "available_supply": "17348625.0",
    73.     "total_supply": "17348625.0",
    74.     "max_supply": "21000000.0",
    75.     "percent_change_1h": "-0.94",
    76.     "percent_change_24h": "-3.39",
    77.     "percent_change_7d": "-10.48",
    78.     "last_updated": "1536971070"
    79.   },
    80.   {
    81.     "id": "eos",
    82.     "name": "EOS",
    83.     "symbol": "EOS",
    84.     "rank": "5",
    85.     "price_usd": "5.2702520505",
    86.     "price_btc": "0.00081295",
    87.     "24h_volume_usd": "600466470.371",
    88.     "market_cap_usd": "4776140189.0",
    89.     "available_supply": "906245118.0",
    90.     "total_supply": "1006245120.0",
    91.     "max_supply": null,
    92.     "percent_change_1h": "-1.01",
    93.     "percent_change_24h": "-2.72",
    94.     "percent_change_7d": "3.52",
    95.     "last_updated": "1536971072"
    96.   }
    97.   ]'>
    98.     <zg-colgroup>
    99.       <zg-column index="name"></zg-column>
    100.       <zg-column index="price_usd" header="Price (USD)" type="currency" foot-cell="sum"></zg-column>
    101.       <zg-column index="percent_change_24h" header="Percent Change (24h)" type="number" foot-cell="Average change: [[avg]]"></zg-column>
    102.     </zg-colgroup>
    103.   </zing-grid>
    104. </body>
    105.  
    106. </html>
    1. .zg-body {
    2.   background-color: #e6e6e6;
    3. }
    4.  
    5. zg-foot zg-cell:nth-of-type(2),
    6. zg-foot zg-cell:nth-of-type(3) {
    7.   background: #fffced;
    8.   border-left: 1px solid #fff0a3;
    9. }
    10.  
    11. zg-foot zg-cell:nth-of-type(3) {
    12.   border-right: 1px solid #fff0a3;
    13. }
    1.