• 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.     zing-grid[loading] {
    14.       height: 1119px;
    15.     }
    16.   </style>
    17. </head>
    18.  
    19. <body class="zg-body">
    20.   <zing-grid caption="Autoformatting On (Default)" layout-controls="disabled">
    21.     <zg-data data='[
    22.         {
    23.           "playerName": "Eden Hazard",
    24.           "player_club": "Chelsea",
    25.           "goals-scored": 5          
    26.         },
    27.         {
    28.           "playerName": "Aleksandar Mitrovic",
    29.           "player_club": "Fulham",
    30.           "goals-scored": 5   
    31.         },
    32.         {
    33.           "playerName": "Sergio Agüero",
    34.           "player_club": "Manchester City",
    35.           "goals-scored": 4   
    36.         },
    37.         {
    38.           "playerName": "Romelu Lukaku",
    39.           "player_club": "Manchester United",
    40.           "goals-scored": 4   
    41.         },
    42.         {
    43.           "playerName": "Sadio Mané",
    44.           "player_club": "Liverpool",
    45.           "goals-scored": 4   
    46.         }
    47.       ]'></zg-data>
    48.   </zing-grid>
    49.  
    50.   <zing-grid header-auto-format="disabled" caption="Autoformatting Off" layout-controls="disabled">
    51.     <zg-data data='[
    52.         {
    53.           "playerName": "Eden Hazard",
    54.           "player_club": "Chelsea",
    55.           "goals-scored": 5          
    56.         },
    57.         {
    58.           "playerName": "Aleksandar Mitrovic",
    59.           "player_club": "Fulham",
    60.           "goals-scored": 5   
    61.         },
    62.         {
    63.           "playerName": "Sergio Agüero",
    64.           "player_club": "Manchester City",
    65.           "goals-scored": 4   
    66.         },
    67.         {
    68.           "playerName": "Romelu Lukaku",
    69.           "player_club": "Manchester United",
    70.           "goals-scored": 4   
    71.         },
    72.         {
    73.           "playerName": "Sadio Mané",
    74.           "player_club": "Liverpool",
    75.           "goals-scored": 4   
    76.         }
    77.       ]'></zg-data>
    78.   </zing-grid>
    79.  
    80.   <zing-grid header-auto-format="renderCustomHeaders" caption="Custom Autoformatting Function" layout-controls="disabled">
    81.     <zg-data data='[
    82.         {
    83.           "playerName": "Eden Hazard",
    84.           "player_club": "Chelsea",
    85.           "goals-scored": 5          
    86.         },
    87.         {
    88.           "playerName": "Aleksandar Mitrovic",
    89.           "player_club": "Fulham",
    90.           "goals-scored": 5   
    91.         },
    92.         {
    93.           "playerName": "Sergio Agüero",
    94.           "player_club": "Manchester City",
    95.           "goals-scored": 4   
    96.         },
    97.         {
    98.           "playerName": "Romelu Lukaku",
    99.           "player_club": "Manchester United",
    100.           "goals-scored": 4   
    101.         },
    102.         {
    103.           "playerName": "Sadio Mané",
    104.           "player_club": "Liverpool",
    105.           "goals-scored": 4   
    106.         }
    107.       ]'></zg-data>
    108.   </zing-grid>
    109.   <script>
    110.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    111.  
    112.     function renderCustomHeaders(originalValue, parsedValue) {
    113.       return `Custom ${parsedValue}`;
    114.     }
    115.   </script>
    116. </body>
    117.  
    118. </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="Autoformatting On (Default)" layout-controls="disabled">
    12.     <zg-data data='[
    13.         {
    14.           "playerName": "Eden Hazard",
    15.           "player_club": "Chelsea",
    16.           "goals-scored": 5          
    17.         },
    18.         {
    19.           "playerName": "Aleksandar Mitrovic",
    20.           "player_club": "Fulham",
    21.           "goals-scored": 5   
    22.         },
    23.         {
    24.           "playerName": "Sergio Agüero",
    25.           "player_club": "Manchester City",
    26.           "goals-scored": 4   
    27.         },
    28.         {
    29.           "playerName": "Romelu Lukaku",
    30.           "player_club": "Manchester United",
    31.           "goals-scored": 4   
    32.         },
    33.         {
    34.           "playerName": "Sadio Mané",
    35.           "player_club": "Liverpool",
    36.           "goals-scored": 4   
    37.         }
    38.       ]'></zg-data>
    39.   </zing-grid>
    40.  
    41.   <zing-grid header-auto-format="disabled" caption="Autoformatting Off" layout-controls="disabled">
    42.     <zg-data data='[
    43.         {
    44.           "playerName": "Eden Hazard",
    45.           "player_club": "Chelsea",
    46.           "goals-scored": 5          
    47.         },
    48.         {
    49.           "playerName": "Aleksandar Mitrovic",
    50.           "player_club": "Fulham",
    51.           "goals-scored": 5   
    52.         },
    53.         {
    54.           "playerName": "Sergio Agüero",
    55.           "player_club": "Manchester City",
    56.           "goals-scored": 4   
    57.         },
    58.         {
    59.           "playerName": "Romelu Lukaku",
    60.           "player_club": "Manchester United",
    61.           "goals-scored": 4   
    62.         },
    63.         {
    64.           "playerName": "Sadio Mané",
    65.           "player_club": "Liverpool",
    66.           "goals-scored": 4   
    67.         }
    68.       ]'></zg-data>
    69.   </zing-grid>
    70.  
    71.   <zing-grid header-auto-format="renderCustomHeaders" caption="Custom Autoformatting Function" layout-controls="disabled">
    72.     <zg-data data='[
    73.         {
    74.           "playerName": "Eden Hazard",
    75.           "player_club": "Chelsea",
    76.           "goals-scored": 5          
    77.         },
    78.         {
    79.           "playerName": "Aleksandar Mitrovic",
    80.           "player_club": "Fulham",
    81.           "goals-scored": 5   
    82.         },
    83.         {
    84.           "playerName": "Sergio Agüero",
    85.           "player_club": "Manchester City",
    86.           "goals-scored": 4   
    87.         },
    88.         {
    89.           "playerName": "Romelu Lukaku",
    90.           "player_club": "Manchester United",
    91.           "goals-scored": 4   
    92.         },
    93.         {
    94.           "playerName": "Sadio Mané",
    95.           "player_club": "Liverpool",
    96.           "goals-scored": 4   
    97.         }
    98.       ]'></zg-data>
    99.   </zing-grid>
    100. </body>
    101.  
    102. </html>
    1. .zg-body {
    2.   background: #e6e6e6;
    3. }
    1. function renderCustomHeaders(originalValue, parsedValue) {
    2.   return `Custom ${parsedValue}`;
    3. }