• 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.     html,
    10.     body {
    11.       height: 100%;
    12.       width: 100%;
    13.       margin: 0;
    14.       padding: 0;
    15.     }
    16.  
    17.     zing-grid[loading] {
    18.       height: 450px;
    19.     }
    20.   </style>
    21. </head>
    22.  
    23. <body>
    24.   <h3>Call `searchIsTable()` to insert a grid if `table[is="zing-grid"]` is added after Documented is loaded.</h3>
    25.  
    26.   <table>
    27.     <tr>
    28.       <th>First</th>
    29.       <th>Last</th>
    30.       <th>Number</th>
    31.     </tr>
    32.     <tr>
    33.       <td><b>Maria</b></td>
    34.       <td>John</td>
    35.       <td>123</td>
    36.     </tr>
    37.     <tr>
    38.       <td><ins>David</ins></td>
    39.       <td>Smith</td>
    40.       <td>456</td>
    41.     </tr>
    42.     <tr>
    43.       <td><i>Felicity</i></td>
    44.       <td>Snow</td>
    45.       <td>789</td>
    46.     </tr>
    47.   </table>
    48.   <script>
    49.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    50.     window.addEventListener('load', () => {
    51.       // Add [is="zing-grid"] attribute
    52.       let tableRef = document.querySelector('table');
    53.       tableRef.setAttribute('is', 'zing-grid');
    54.       // Insert grid over `table[is="zing-grid"]`
    55.       ZingGrid.searchIsTable();
    56.     });
    57.   </script>
    58. </body>
    59.  
    60. </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>Call `searchIsTable()` to insert a grid if `table[is="zing-grid"]` is added after Documented is loaded.</h3>
    12.  
    13.   <table>
    14.     <tr>
    15.       <th>First</th>
    16.       <th>Last</th>
    17.       <th>Number</th>
    18.     </tr>
    19.     <tr>
    20.       <td><b>Maria</b></td>
    21.       <td>John</td>
    22.       <td>123</td>
    23.     </tr>
    24.     <tr>
    25.       <td><ins>David</ins></td>
    26.       <td>Smith</td>
    27.       <td>456</td>
    28.     </tr>
    29.     <tr>
    30.       <td><i>Felicity</i></td>
    31.       <td>Snow</td>
    32.       <td>789</td>
    33.     </tr>
    34.   </table>
    35. </body>
    36.  
    37. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    1. window.addEventListener('load', () => {
    2.   // Add [is="zing-grid"] attribute
    3.   let tableRef = document.querySelector('table');
    4.   tableRef.setAttribute('is', 'zing-grid');
    5.   // Insert grid over `table[is="zing-grid"]`
    6.   ZingGrid.searchIsTable();
    7. });