• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     zing-grid[loading] {
    10.       height: 213px;
    11.     }
    12.   </style>
    13. </head>
    14.  
    15. <body>
    16.   <h3>The 'email' column type renders a string value and uses
    17.     input `type="email"` as editor. Double-click cell to edit cell.</h3>
    18.   <zing-grid editor>
    19.     <zg-data data='[
    20.         {"user":"kendoll@gmail.com"},
    21.         {"user":"jongee@gmail.com"},
    22.         {"user":"sofreeahh@yahoo.com"}
    23.       ]'></zg-data>
    24.     <zg-colgroup>
    25.       <zg-column index="user" header="User" type="email"></zg-column>
    26.     </zg-colgroup>
    27.   </zing-grid>
    28.   <script>
    29.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    30.   </script>
    31. </body>
    32.  
    33. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body>
    11.   <h3>The 'email' column type renders a string value and uses
    12.     input `type="email"` as editor. Double-click cell to edit cell.</h3>
    13.   <zing-grid editor>
    14.     <zg-data data='[
    15.         {"user":"kendoll@gmail.com"},
    16.         {"user":"jongee@gmail.com"},
    17.         {"user":"sofreeahh@yahoo.com"}
    18.       ]'></zg-data>
    19.     <zg-colgroup>
    20.       <zg-column index="user" header="User" type="email"></zg-column>
    21.     </zg-colgroup>
    22.   </zing-grid>
    23. </body>
    24.  
    25. </html>
    1.  
    1.