• 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: 332px;
    19. }
    20. </style>
    21. </head>
    22.  
    23. <body>
    24. <table is="zing-grid" data-zg-columns-control data-zg-filter data-zg-search data-zg-sort data-zg-pager>
    25. <colgroup>
    26. <col data-zg-index="first" data-zg-sort-asc="true">
    27. </col>
    28. <col data-zg-index="last">
    29. </col>
    30. <col data-zg-index="number" data-zg-header="ID Number" data-zg-hidden="true" data-zg-type="number">
    31. </col>
    32. </colgroup>
    33. <tr>
    34. <th>First</th>
    35. <th>Last</th>
    36. <th data-zg-ignore-row>Number</th>
    37. </tr>
    38. <tr>
    39. <td><b>Maria</b></td>
    40. <td>John</td>
    41. <td>123</td>
    42. </tr>
    43. <tr>
    44. <td><ins>David</ins></td>
    45. <td>Smith</td>
    46. <td>456</td>
    47. </tr>
    48. <tr>
    49. <td><i>Felicity</i></td>
    50. <td>Snow</td>
    51. <td>789</td>
    52. </tr>
    53. </table>
    54. <script>
    55. ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    56. </script>
    57. </body>
    58.  
    59. </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. <table is="zing-grid" data-zg-columns-control data-zg-filter data-zg-search data-zg-sort data-zg-pager>
    12. <colgroup>
    13. <col data-zg-index="first" data-zg-sort-asc="true">
    14. </col>
    15. <col data-zg-index="last">
    16. </col>
    17. <col data-zg-index="number" data-zg-header="ID Number" data-zg-hidden="true" data-zg-type="number">
    18. </col>
    19. </colgroup>
    20. <tr>
    21. <th>First</th>
    22. <th>Last</th>
    23. <th data-zg-ignore-row>Number</th>
    24. </tr>
    25. <tr>
    26. <td><b>Maria</b></td>
    27. <td>John</td>
    28. <td>123</td>
    29. </tr>
    30. <tr>
    31. <td><ins>David</ins></td>
    32. <td>Smith</td>
    33. <td>456</td>
    34. </tr>
    35. <tr>
    36. <td><i>Felicity</i></td>
    37. <td>Snow</td>
    38. <td>789</td>
    39. </tr>
    40. </table>
    41. </body>
    42.  
    43. </html>
    1. html,
    2. body {
    3. height: 100%;
    4. width: 100%;
    5. margin: 0;
    6. padding: 0;
    7. }
    1.