• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Docs Getting Started</title>
    7.   <!--Script Reference[1]-->
    8.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    9.   <style>
    10.     zing-grid {
    11.       --zg-body-background: #fff;
    12.       --zg-row-body-background_odd: #e3ecf6;
    13.       --zg-icon-color: #003749;
    14.     }
    15.  
    16.     zg-cell {
    17.       color: black;
    18.     }
    19.  
    20.     zg-head {
    21.       --zg-icon-init-fill: #000000;
    22.     }
    23.  
    24.     zg-control-bar {
    25.       --zg-icon-color: #003749;
    26.     }
    27.  
    28.     zing-grid[loading] {
    29.       height: 698px;
    30.     }
    31.   </style>
    32. </head>
    33.  
    34. <body class="zg-body">
    35.   <!--Grid Component Placement[2]-->
    36.   <zing-grid caption="Our Favorite Characters" sort search pager editor-controls page-size="10" page-size-options="5,10" data='[
    37.         {
    38.           "name": "Philip J. Fry",
    39.           "show": "Futurama",
    40.           "origin": "Earth"
    41.         },
    42.         {
    43.           "name": "Rick Sanchez",
    44.           "show": "Rick and Morty",
    45.           "origin": "C-137"
    46.         },
    47.         {
    48.           "name": "Turanga Leela",
    49.           "show": "Futurama",
    50.           "origin": "Earth"
    51.         },
    52.         {
    53.           "name": "Mr. Meeseeks",
    54.           "show": "Rick and Morty",
    55.           "origin": "C-137"
    56.         },
    57.         {
    58.           "name": "Morty Smith",
    59.           "show": "Rick and Morty",
    60.           "origin": "C-137"
    61.         },
    62.         {
    63.           "name": "Bender Bending Rodriguez",
    64.           "show": "Futurama",
    65.           "origin": "Earth"
    66.         },
    67.         {
    68.           "name": "Amy Wong",
    69.           "show": "Futurama",
    70.           "origin": "Earth"
    71.         },
    72.         {
    73.           "name": "Bird Person",
    74.           "show": "Rick and Morty",
    75.           "origin": "C-137"
    76.         },
    77.         {
    78.           "name": "Doctor John Zoidberg",
    79.           "show": "Futurama",
    80.           "origin": "Decapod 10"
    81.         },
    82.         {
    83.           "name": "Summer Smith",
    84.           "show": "Rick and Morty",
    85.           "origin": "C-137"
    86.         },
    87.         {
    88.           "name": "Lord Nibbler",
    89.           "show": "Futurama",
    90.           "origin": "Earth"
    91.         }
    92.       ]'>
    93.   </zing-grid>
    94.   <script>
    95.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); // window:load event for Javascript to run after HTML
    96.     // because this Javascript is injected into the document head
    97.     window.addEventListener('load', () => {
    98.       // content after DOM load
    99.     });
    100.   </script>
    101. </body>
    102.  
    103. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Docs Getting Started</title>
    7.   <!--Script Reference[1]-->
    8.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    9. </head>
    10.  
    11. <body class="zg-body">
    12.   <!--Grid Component Placement[2]-->
    13.   <zing-grid caption="Our Favorite Characters" sort search pager editor-controls page-size="10" page-size-options="5,10" data='[
    14.         {
    15.           "name": "Philip J. Fry",
    16.           "show": "Futurama",
    17.           "origin": "Earth"
    18.         },
    19.         {
    20.           "name": "Rick Sanchez",
    21.           "show": "Rick and Morty",
    22.           "origin": "C-137"
    23.         },
    24.         {
    25.           "name": "Turanga Leela",
    26.           "show": "Futurama",
    27.           "origin": "Earth"
    28.         },
    29.         {
    30.           "name": "Mr. Meeseeks",
    31.           "show": "Rick and Morty",
    32.           "origin": "C-137"
    33.         },
    34.         {
    35.           "name": "Morty Smith",
    36.           "show": "Rick and Morty",
    37.           "origin": "C-137"
    38.         },
    39.         {
    40.           "name": "Bender Bending Rodriguez",
    41.           "show": "Futurama",
    42.           "origin": "Earth"
    43.         },
    44.         {
    45.           "name": "Amy Wong",
    46.           "show": "Futurama",
    47.           "origin": "Earth"
    48.         },
    49.         {
    50.           "name": "Bird Person",
    51.           "show": "Rick and Morty",
    52.           "origin": "C-137"
    53.         },
    54.         {
    55.           "name": "Doctor John Zoidberg",
    56.           "show": "Futurama",
    57.           "origin": "Decapod 10"
    58.         },
    59.         {
    60.           "name": "Summer Smith",
    61.           "show": "Rick and Morty",
    62.           "origin": "C-137"
    63.         },
    64.         {
    65.           "name": "Lord Nibbler",
    66.           "show": "Futurama",
    67.           "origin": "Earth"
    68.         }
    69.       ]'>
    70.   </zing-grid>
    71. </body>
    72.  
    73. </html>
    1. zing-grid {
    2.   --zg-body-background: #fff;
    3.   --zg-row-body-background_odd: #e3ecf6;
    4.   --zg-icon-color: #003749;
    5. }
    6.  
    7. zg-cell {
    8.   color: black;
    9. }
    10.  
    11. zg-head {
    12.   --zg-icon-init-fill: #000000;
    13. }
    14.  
    15. zg-control-bar {
    16.   --zg-icon-color: #003749;
    17. }
    1. // window:load event for Javascript to run after HTML
    2. // because this Javascript is injected into the document head
    3. window.addEventListener('load', () => {
    4.   // content after DOM load
    5. });