• 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 'boolean' column type renders true/false values and uses
    17.     input `type="checkbox"` as editor. Double-click cell to edit cell.</h3>
    18.   <zing-grid editor>
    19.     <zg-data data='[{
    20.           "paid": 1
    21.         },
    22.         {
    23.           "paid": false
    24.         },
    25.         {
    26.           "paid": true
    27.         }]'>
    28.     </zg-data>
    29.     <zg-colgroup>
    30.       <zg-column index="paid" header="Paid" type="boolean"></zg-column>
    31.     </zg-colgroup>
    32.   </zing-grid>
    33.   <script>
    34.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    35.   </script>
    36. </body>
    37.  
    38. </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 'boolean' column type renders true/false values and uses
    12.     input `type="checkbox"` as editor. Double-click cell to edit cell.</h3>
    13.   <zing-grid editor>
    14.     <zg-data data='[{
    15.           "paid": 1
    16.         },
    17.         {
    18.           "paid": false
    19.         },
    20.         {
    21.           "paid": true
    22.         }]'>
    23.     </zg-data>
    24.     <zg-colgroup>
    25.       <zg-column index="paid" header="Paid" type="boolean"></zg-column>
    26.     </zg-colgroup>
    27.   </zing-grid>
    28. </body>
    29.  
    30. </html>
    1.  
    1.