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