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