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