• 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: #e6e6e6;
    11.     }
    12.  
    13.     zing-grid[loading] {
    14.       height: 413px;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body class="zg-body">
    20.   <zing-grid caption="EPL Top Scorers" layout="row" layout-controls="disabled" viewport-stop>
    21.     <zg-data data='[
    22.         {
    23.         	"playerInfo": {
    24.             "name": "Eden Hazard",
    25.             "club": "Chelsea",
    26.           	"goals": 5      
    27.         	}              
    28.         },
    29.         {
    30.           "playerInfo": {
    31.           	"name": "Aleksandar Mitrovic",
    32.           	"club": "Fulham",
    33.           	"goals": 5 
    34.           }
    35.         },
    36.         {
    37.         	"playerInfo": {              
    38.           	"name": "Sergio Agüero",
    39.           	"club": "Manchester City",
    40.           	"goals": 4   
    41. 					}
    42.         },
    43.         {
    44.         	"playerInfo": {  
    45.           	"name": "Romelu Lukaku",
    46.           	"club": "Manchester United",
    47.           	"goals": 4
    48.           }
    49.         },
    50.         {
    51.         	"playerInfo": {  
    52.           	"name": "Sadio Mané",
    53.           	"club": "Liverpool",
    54.           	"goals": 4   
    55.           }
    56.         }
    57.       ]'></zg-data>
    58.     <zg-colgroup>
    59.       <zg-column index="playerInfo.goals" header="Player Info.Custom Shared Header"></zg-column>
    60.       <zg-column index="playerInfo.name" header="Player Info.Custom Shared Header"></zg-column>
    61.       <zg-column index="playerInfo.name" header="Name"></zg-column>
    62.       <zg-column index="playerInfo.club"></zg-column>
    63.     </zg-colgroup>
    64.   </zing-grid>
    65.   <script>
    66.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    67.   </script>
    68. </body>
    69.  
    70. </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="EPL Top Scorers" layout="row" layout-controls="disabled" viewport-stop>
    12.     <zg-data data='[
    13.         {
    14.         	"playerInfo": {
    15.             "name": "Eden Hazard",
    16.             "club": "Chelsea",
    17.           	"goals": 5      
    18.         	}              
    19.         },
    20.         {
    21.           "playerInfo": {
    22.           	"name": "Aleksandar Mitrovic",
    23.           	"club": "Fulham",
    24.           	"goals": 5 
    25.           }
    26.         },
    27.         {
    28.         	"playerInfo": {              
    29.           	"name": "Sergio Agüero",
    30.           	"club": "Manchester City",
    31.           	"goals": 4   
    32. 					}
    33.         },
    34.         {
    35.         	"playerInfo": {  
    36.           	"name": "Romelu Lukaku",
    37.           	"club": "Manchester United",
    38.           	"goals": 4
    39.           }
    40.         },
    41.         {
    42.         	"playerInfo": {  
    43.           	"name": "Sadio Mané",
    44.           	"club": "Liverpool",
    45.           	"goals": 4   
    46.           }
    47.         }
    48.       ]'></zg-data>
    49.     <zg-colgroup>
    50.       <zg-column index="playerInfo.goals" header="Player Info.Custom Shared Header"></zg-column>
    51.       <zg-column index="playerInfo.name" header="Player Info.Custom Shared Header"></zg-column>
    52.       <zg-column index="playerInfo.name" header="Name"></zg-column>
    53.       <zg-column index="playerInfo.club"></zg-column>
    54.     </zg-colgroup>
    55.   </zing-grid>
    56. </body>
    57.  
    58. </html>
    1. .zg-body {
    2.   background: #e6e6e6;
    3. }
    1.