• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
    8.   <style>
    9.     body {
    10.       background: #e6e6e6;
    11.     }
    12.  
    13.     zing-grid {
    14.       --theme-background-zebra: #ef9a9a;
    15.     }
    16.  
    17.     zing-grid[loading] {
    18.       height: 346px;
    19.     }
    20.   </style>
    21. </head>
    22.  
    23. <body>
    24.  
    25.   <zing-grid caption="EPL Top Scorers" zebra>
    26.     <zg-data data='[
    27.         {
    28.           "playerName": "Eden Hazard",
    29.           "playerClub": "Chelsea",
    30.           "goalsScored": 5          
    31.         },
    32.         {
    33.           "playerName": "Aleksandar Mitrovic",
    34.           "playerClub": "Fulham",
    35.           "goalsScored": 5   
    36.         },
    37.         {
    38.           "playerName": "Sergio Agüero",
    39.           "playerClub": "Manchester City",
    40.           "goalsScored": 4   
    41.         },
    42.         {
    43.           "playerName": "Romelu Lukaku",
    44.           "playerClub": "Manchester United",
    45.           "goalsScored": 4   
    46.         },
    47.         {
    48.           "playerName": "Sadio Mané",
    49.           "playerClub": "Liverpool",
    50.           "goalsScored": 4   
    51.         }
    52.       ]'></zg-data>
    53.   </zing-grid>
    54.  
    55.   <script>
    56.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    57.   </script>
    58. </body>
    59.  
    60. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</title>
    7.   <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.  
    12.   <zing-grid caption="EPL Top Scorers" zebra>
    13.     <zg-data data='[
    14.         {
    15.           "playerName": "Eden Hazard",
    16.           "playerClub": "Chelsea",
    17.           "goalsScored": 5          
    18.         },
    19.         {
    20.           "playerName": "Aleksandar Mitrovic",
    21.           "playerClub": "Fulham",
    22.           "goalsScored": 5   
    23.         },
    24.         {
    25.           "playerName": "Sergio Agüero",
    26.           "playerClub": "Manchester City",
    27.           "goalsScored": 4   
    28.         },
    29.         {
    30.           "playerName": "Romelu Lukaku",
    31.           "playerClub": "Manchester United",
    32.           "goalsScored": 4   
    33.         },
    34.         {
    35.           "playerName": "Sadio Mané",
    36.           "playerClub": "Liverpool",
    37.           "goalsScored": 4   
    38.         }
    39.       ]'></zg-data>
    40.   </zing-grid>
    41.  
    42. </body>
    43.  
    44. </html>
    1. body {
    2.   background: #e6e6e6;
    3. }
    4.  
    5. zing-grid {
    6.   --theme-background-zebra: #ef9a9a;
    7. }
    1.