• 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: 451px;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body class="zg-body">
    20.   <zing-grid caption="Top LiverPool Forwards" layout="row" sort>
    21.     <zg-data data='[
    22.         {
    23.           "firstName": "Mohamed",
    24.           "lastName": "Salah",
    25.           "number": 11,
    26.           "position": "Forward",
    27.           "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/salah.jpeg"
    28.         },
    29.         {
    30.           "firstName": "Sadio",
    31.           "lastName": "Mane",
    32.           "number": 10,
    33.           "position": "Forward",
    34.           "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/mane.jpeg"
    35.         },
    36.         {
    37.           "firstName": "Roberto",
    38.           "lastName": "Firmino",
    39.           "number": 9,
    40.           "position": "Forward",
    41.           "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/firmino.jpeg"
    42.         },
    43.         {
    44.           "firstName": "Daniel",
    45.           "lastName": "Sturridge",
    46.           "number": 15,
    47.           "position": "Forward",
    48.           "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/sturridge.jpeg"
    49.         }
    50.       ]'></zg-data>
    51.     <zg-colgroup>
    52.       <zg-column index="playerImg" header=" " width="100" height="100" sort="disabled" type="image" type-image-mask="circle" type-image-alt="Player Img N/A"></zg-column>
    53.       <zg-column index="firstName, lastName" header="Name">
    54.         <template>
    55.           [[index.firstName]] [[index.lastName]]
    56.         </template>
    57.       </zg-column>
    58.       <zg-column index="number"></zg-column>
    59.       <zg-column index="position" sort="disabled"></zg-column>
    60.     </zg-colgroup>
    61.   </zing-grid>
    62.   <script>
    63.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    64.   </script>
    65. </body>
    66.  
    67. </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 LiverPool Forwards" layout="row" sort>
    12.     <zg-data data='[
    13.         {
    14.           "firstName": "Mohamed",
    15.           "lastName": "Salah",
    16.           "number": 11,
    17.           "position": "Forward",
    18.           "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/salah.jpeg"
    19.         },
    20.         {
    21.           "firstName": "Sadio",
    22.           "lastName": "Mane",
    23.           "number": 10,
    24.           "position": "Forward",
    25.           "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/mane.jpeg"
    26.         },
    27.         {
    28.           "firstName": "Roberto",
    29.           "lastName": "Firmino",
    30.           "number": 9,
    31.           "position": "Forward",
    32.           "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/firmino.jpeg"
    33.         },
    34.         {
    35.           "firstName": "Daniel",
    36.           "lastName": "Sturridge",
    37.           "number": 15,
    38.           "position": "Forward",
    39.           "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/sturridge.jpeg"
    40.         }
    41.       ]'></zg-data>
    42.     <zg-colgroup>
    43.       <zg-column index="playerImg" header=" " width="100" height="100" sort="disabled" type="image" type-image-mask="circle" type-image-alt="Player Img N/A"></zg-column>
    44.       <zg-column index="firstName, lastName" header="Name">
    45.         <template>
    46.           [[index.firstName]] [[index.lastName]]
    47.         </template>
    48.       </zg-column>
    49.       <zg-column index="number"></zg-column>
    50.       <zg-column index="position" sort="disabled"></zg-column>
    51.     </zg-colgroup>
    52.   </zing-grid>
    53. </body>
    54.  
    55. </html>
    1. .zg-body {
    2.   background: #e6e6e6;
    3. }
    1.