• 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: 234px;
    11.     }
    12.   </style>
    13. </head>
    14.  
    15. <body>
    16.   <h3>The 'range' column type renders a number value and uses
    17.     input `type="number"` as editor. Double-click cell to edit cell.</h3>
    18.   <zing-grid editor>
    19.     <zg-data data='[{
    20.       "quantity": 4
    21.     },
    22.     {
    23.       "quantity": 8
    24.     },
    25.     {
    26.       "quantity": 9
    27.     },
    28.     {
    29.       "quantity": 3
    30.     }]'></zg-data>
    31.     <zg-colgroup>
    32.       <zg-column index="quantity" header="Quantity" type="range" type-range-min=2 type-range-max=10 type-range-step=2></zg-column>
    33.     </zg-colgroup>
    34.   </zing-grid>
    35.   <script>
    36.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    37.   </script>
    38. </body>
    39.  
    40. </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 'range' column type renders a number value and uses
    12.     input `type="number"` as editor. Double-click cell to edit cell.</h3>
    13.   <zing-grid editor>
    14.     <zg-data data='[{
    15.       "quantity": 4
    16.     },
    17.     {
    18.       "quantity": 8
    19.     },
    20.     {
    21.       "quantity": 9
    22.     },
    23.     {
    24.       "quantity": 3
    25.     }]'></zg-data>
    26.     <zg-colgroup>
    27.       <zg-column index="quantity" header="Quantity" type="range" type-range-min=2 type-range-max=10 type-range-step=2></zg-column>
    28.     </zg-colgroup>
    29.   </zing-grid>
    30. </body>
    31.  
    32. </html>
    1.  
    1.