• 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.     zing-grid {
    10.       /* default Liverpool CSS variable colors */
    11.       /* 
    12.  	--zg-caption-background: #e31b23; 
    13.  	--zg-row-body-background_hover: #F6EB61;
    14.  */
    15.     }
    16.  
    17.     body {
    18.       background: #e6e6e6;
    19.     }
    20.  
    21.     zing-grid[loading] {
    22.       height: 421px;
    23.     }
    24.   </style>
    25. </head>
    26.  
    27. <body>
    28.   <zing-grid caption="Top LiverPool Forwards" sort viewport-types='
    29.         {
    30.           "mobile": 600,
    31.           "bob": 875,
    32.           "desktop": 1200,
    33.           "desktop-large": 1600,
    34.           "test": 2000
    35.         }
    36.       '>
    37.     <zg-data data='[
    38.         {
    39.           "firstName": "Mohamed",
    40.           "lastName": "Salah",
    41.           "number": 11,
    42.           "position": "Forward",
    43.           "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/salah.jpeg"
    44.         },
    45.         {
    46.           "firstName": "Sadio",
    47.           "lastName": "Mane",
    48.           "number": 10,
    49.           "position": "Forward",
    50.           "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/mane.jpeg"
    51.         },
    52.         {
    53.           "firstName": "Roberto",
    54.           "lastName": "Firmino",
    55.           "number": 9,
    56.           "position": "Forward",
    57.           "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/firmino.jpeg"
    58.         },
    59.         {
    60.           "firstName": "Daniel",
    61.           "lastName": "Sturridge",
    62.           "number": 15,
    63.           "position": "Forward",
    64.           "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/sturridge.jpeg"
    65.         }
    66.       ]'></zg-data>
    67.     <zg-colgroup>
    68.       <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>
    69.       <zg-column index="firstName, lastName" header="Name">
    70.         <template>
    71.           [[index.firstName]] [[index.lastName]]
    72.         </template>
    73.       </zg-column>
    74.       <zg-column index="number"></zg-column>
    75.       <zg-column index="position" sort="disabled"></zg-column>
    76.     </zg-colgroup>
    77.   </zing-grid>
    78.   <script>
    79.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    80.   </script>
    81. </body>
    82.  
    83. </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" sort viewport-types='
    12.         {
    13.           "mobile": 600,
    14.           "bob": 875,
    15.           "desktop": 1200,
    16.           "desktop-large": 1600,
    17.           "test": 2000
    18.         }
    19.       '>
    20.     <zg-data data='[
    21.         {
    22.           "firstName": "Mohamed",
    23.           "lastName": "Salah",
    24.           "number": 11,
    25.           "position": "Forward",
    26.           "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/salah.jpeg"
    27.         },
    28.         {
    29.           "firstName": "Sadio",
    30.           "lastName": "Mane",
    31.           "number": 10,
    32.           "position": "Forward",
    33.           "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/mane.jpeg"
    34.         },
    35.         {
    36.           "firstName": "Roberto",
    37.           "lastName": "Firmino",
    38.           "number": 9,
    39.           "position": "Forward",
    40.           "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/firmino.jpeg"
    41.         },
    42.         {
    43.           "firstName": "Daniel",
    44.           "lastName": "Sturridge",
    45.           "number": 15,
    46.           "position": "Forward",
    47.           "playerImg": "https://storage.googleapis.com/zinggrid-pwa.appspot.com/sturridge.jpeg"
    48.         }
    49.       ]'></zg-data>
    50.     <zg-colgroup>
    51.       <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>
    52.       <zg-column index="firstName, lastName" header="Name">
    53.         <template>
    54.           [[index.firstName]] [[index.lastName]]
    55.         </template>
    56.       </zg-column>
    57.       <zg-column index="number"></zg-column>
    58.       <zg-column index="position" sort="disabled"></zg-column>
    59.     </zg-colgroup>
    60.   </zing-grid>
    61. </body>
    62.  
    63. </html>
    1. zing-grid {
    2.   /* default Liverpool CSS variable colors */
    3.   /* 
    4.  	--zg-caption-background: #e31b23; 
    5.  	--zg-row-body-background_hover: #F6EB61;
    6.  */
    7. }
    8.  
    9. body {
    10.   background: #e6e6e6;
    11. }
    1.