• 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.         "id": "bitcoin",
    32.         "name": "Bitcoin",
    33.         "symbol": "BTC",
    34.         "rank": "1",
    35.         "price_usd": "6510.57322669",
    36.         "price_btc": "1.0",
    37.         "24h_volume_usd": "4058714374.46",
    38.         "market_cap_usd": "112425633191",
    39.         "available_supply": "17268162.0",
    40.         "total_supply": "17268162.0",
    41.         "max_supply": "21000000.0",
    42.         "percent_change_1h": "-0.4",
    43.         "percent_change_24h": "0.11",
    44.         "percent_change_7d": "0.49",
    45.         "last_updated": "1536971121"
    46.       },
    47.       {
    48.         "id": "ethereum",
    49.         "name": "Ethereum",
    50.         "symbol": "ETH",
    51.         "rank": "2",
    52.         "price_usd": "210.385950117",
    53.         "price_btc": "0.03245263",
    54.         "24h_volume_usd": "2219293714.75",
    55.         "market_cap_usd": "21451438471.0",
    56.         "available_supply": "101962315.0",
    57.         "total_supply": "101962315.0",
    58.         "max_supply": null,
    59.         "percent_change_1h": "-1.84",
    60.         "percent_change_24h": "-0.59",
    61.         "percent_change_7d": "-3.71",
    62.         "last_updated": "1536971072"
    63.       },
    64.       {
    65.         "id": "ripple",
    66.         "name": "XRP",
    67.         "symbol": "XRP",
    68.         "rank": "3",
    69.         "price_usd": "0.2772190275",
    70.         "price_btc": "0.00004272",
    71.         "24h_volume_usd": "268261690.279",
    72.         "market_cap_usd": "11035831425.0",
    73.         "available_supply": "39809069106.0",
    74.         "total_supply": "99991841593.0",
    75.         "max_supply": "100000000000",
    76.         "percent_change_1h": "-0.72",
    77.         "percent_change_24h": "-1.29",
    78.         "percent_change_7d": "-5.6",
    79.         "last_updated": "1536971104"
    80.       },
    81.       {
    82.         "id": "bitcoin-cash",
    83.         "name": "Bitcoin Cash",
    84.         "symbol": "BCH",
    85.         "rank": "4",
    86.         "price_usd": "449.549660414",
    87.         "price_btc": "0.06934432",
    88.         "24h_volume_usd": "313814593.893",
    89.         "market_cap_usd": "7799068477.0",
    90.         "available_supply": "17348625.0",
    91.         "total_supply": "17348625.0",
    92.         "max_supply": "21000000.0",
    93.         "percent_change_1h": "-0.94",
    94.         "percent_change_24h": "-3.39",
    95.         "percent_change_7d": "-10.48",
    96.         "last_updated": "1536971070"
    97.       },
    98.       {
    99.         "id": "eos",
    100.         "name": "EOS",
    101.         "symbol": "EOS",
    102.         "rank": "5",
    103.         "price_usd": "5.2702520505",
    104.         "price_btc": "0.00081295",
    105.         "24h_volume_usd": "600466470.371",
    106.         "market_cap_usd": "4776140189.0",
    107.         "available_supply": "906245118.0",
    108.         "total_supply": "1006245120.0",
    109.         "max_supply": null,
    110.         "percent_change_1h": "-1.01",
    111.         "percent_change_24h": "-2.72",
    112.         "percent_change_7d": "3.52",
    113.         "last_updated": "1536971072"
    114.       }]'>
    115.     <zg-colgroup>
    116.       <zg-column index="name"></zg-column>
    117.       <zg-column index="price_usd" header="Price (USD)" type="currency" foot-cell="count"></zg-column>
    118.       <zg-column index="percent_change_24h" header="Percent Change (24h)" type="number" foot-cell="count"></zg-column>
    119.     </zg-colgroup>
    120.   </zing-grid>
    121.   <script>
    122.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    123.   </script>
    124. </body>
    125.  
    126. </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.         "id": "bitcoin",
    13.         "name": "Bitcoin",
    14.         "symbol": "BTC",
    15.         "rank": "1",
    16.         "price_usd": "6510.57322669",
    17.         "price_btc": "1.0",
    18.         "24h_volume_usd": "4058714374.46",
    19.         "market_cap_usd": "112425633191",
    20.         "available_supply": "17268162.0",
    21.         "total_supply": "17268162.0",
    22.         "max_supply": "21000000.0",
    23.         "percent_change_1h": "-0.4",
    24.         "percent_change_24h": "0.11",
    25.         "percent_change_7d": "0.49",
    26.         "last_updated": "1536971121"
    27.       },
    28.       {
    29.         "id": "ethereum",
    30.         "name": "Ethereum",
    31.         "symbol": "ETH",
    32.         "rank": "2",
    33.         "price_usd": "210.385950117",
    34.         "price_btc": "0.03245263",
    35.         "24h_volume_usd": "2219293714.75",
    36.         "market_cap_usd": "21451438471.0",
    37.         "available_supply": "101962315.0",
    38.         "total_supply": "101962315.0",
    39.         "max_supply": null,
    40.         "percent_change_1h": "-1.84",
    41.         "percent_change_24h": "-0.59",
    42.         "percent_change_7d": "-3.71",
    43.         "last_updated": "1536971072"
    44.       },
    45.       {
    46.         "id": "ripple",
    47.         "name": "XRP",
    48.         "symbol": "XRP",
    49.         "rank": "3",
    50.         "price_usd": "0.2772190275",
    51.         "price_btc": "0.00004272",
    52.         "24h_volume_usd": "268261690.279",
    53.         "market_cap_usd": "11035831425.0",
    54.         "available_supply": "39809069106.0",
    55.         "total_supply": "99991841593.0",
    56.         "max_supply": "100000000000",
    57.         "percent_change_1h": "-0.72",
    58.         "percent_change_24h": "-1.29",
    59.         "percent_change_7d": "-5.6",
    60.         "last_updated": "1536971104"
    61.       },
    62.       {
    63.         "id": "bitcoin-cash",
    64.         "name": "Bitcoin Cash",
    65.         "symbol": "BCH",
    66.         "rank": "4",
    67.         "price_usd": "449.549660414",
    68.         "price_btc": "0.06934432",
    69.         "24h_volume_usd": "313814593.893",
    70.         "market_cap_usd": "7799068477.0",
    71.         "available_supply": "17348625.0",
    72.         "total_supply": "17348625.0",
    73.         "max_supply": "21000000.0",
    74.         "percent_change_1h": "-0.94",
    75.         "percent_change_24h": "-3.39",
    76.         "percent_change_7d": "-10.48",
    77.         "last_updated": "1536971070"
    78.       },
    79.       {
    80.         "id": "eos",
    81.         "name": "EOS",
    82.         "symbol": "EOS",
    83.         "rank": "5",
    84.         "price_usd": "5.2702520505",
    85.         "price_btc": "0.00081295",
    86.         "24h_volume_usd": "600466470.371",
    87.         "market_cap_usd": "4776140189.0",
    88.         "available_supply": "906245118.0",
    89.         "total_supply": "1006245120.0",
    90.         "max_supply": null,
    91.         "percent_change_1h": "-1.01",
    92.         "percent_change_24h": "-2.72",
    93.         "percent_change_7d": "3.52",
    94.         "last_updated": "1536971072"
    95.       }]'>
    96.     <zg-colgroup>
    97.       <zg-column index="name"></zg-column>
    98.       <zg-column index="price_usd" header="Price (USD)" type="currency" foot-cell="count"></zg-column>
    99.       <zg-column index="percent_change_24h" header="Percent Change (24h)" type="number" foot-cell="count"></zg-column>
    100.     </zg-colgroup>
    101.   </zing-grid>
    102. </body>
    103.  
    104. </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.