• 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: 221px;
    11. }
    12. </style>
    13. </head>
    14.  
    15. <body>
    16. <zing-grid>
    17. <zg-data data='[{
    18. "item": "strawberry",
    19. "image": "https://img.icons8.com/doodle/48/000000/strawberry-2.png"
    20. },
    21. {
    22. "item": "bacon",
    23. "image": "https://img.icons8.com/emoji/48/000000/bacon-emoji.png"
    24. },
    25. {
    26. "item": "sword",
    27. "image": "https://img.icons8.com/fluent-systems-filled/24/000000/sword.png",
    28. "customstyle": "border: 1px dashed gray"
    29. }]'></zg-data>
    30. <zg-colgroup>
    31. <zg-column index="item" header="Item"></zg-column>
    32. <zg-column index="image" header="Image" type="image" type-image-alt="missing image"></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. <zing-grid>
    12. <zg-data data='[{
    13. "item": "strawberry",
    14. "image": "https://img.icons8.com/doodle/48/000000/strawberry-2.png"
    15. },
    16. {
    17. "item": "bacon",
    18. "image": "https://img.icons8.com/emoji/48/000000/bacon-emoji.png"
    19. },
    20. {
    21. "item": "sword",
    22. "image": "https://img.icons8.com/fluent-systems-filled/24/000000/sword.png",
    23. "customstyle": "border: 1px dashed gray"
    24. }]'></zg-data>
    25. <zg-colgroup>
    26. <zg-column index="item" header="Item"></zg-column>
    27. <zg-column index="image" header="Image" type="image" type-image-alt="missing image"></zg-column>
    28. </zg-colgroup>
    29. </zing-grid>
    30. </body>
    31.  
    32. </html>
    1.  
    1.