• 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 'url' column type renders a value in `&lt;a&gt;` tag and uses
    17. input `type="text"` as editor. Double-click cell to edit cell.</h3>
    18. <zing-grid editor>
    19. <zg-data data='[{
    20. "page": "Your First Grid",
    21. "link": "https://www.zinggrid.com/docs/your-first-grid"
    22. },
    23. {
    24. "page": "Types",
    25. "link": "https://www.zinggrid.com/docs/column-types"
    26. },
    27. {
    28. "page": "API Elements",
    29. "link": "https://www.zinggrid.com/docs/api-elements"
    30. }]'>
    31. </zg-data>
    32. <zg-colgroup>
    33. <zg-column index="page" header="Docs Page" type="text"></zg-column>
    34. <zg-column index="link" header="Link (Default)" type="url"></zg-column>
    35. <zg-column index="link" header="Link Text" type="url" type-url-text="Click here!"></zg-column>
    36. <zg-column index="link" header="Link Internal Icon" type="url" type-url-icon="link"></zg-column>
    37. <zg-column index="link" header="Link External Icon" type="url" type-url-icon="outsidearrow"></zg-column>
    38. </zg-colgroup>
    39. </zing-grid>
    40. <script>
    41. ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    42. </script>
    43. </body>
    44.  
    45. </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 'url' column type renders a value in `&lt;a&gt;` tag and uses
    12. input `type="text"` as editor. Double-click cell to edit cell.</h3>
    13. <zing-grid editor>
    14. <zg-data data='[{
    15. "page": "Your First Grid",
    16. "link": "https://www.zinggrid.com/docs/your-first-grid"
    17. },
    18. {
    19. "page": "Types",
    20. "link": "https://www.zinggrid.com/docs/column-types"
    21. },
    22. {
    23. "page": "API Elements",
    24. "link": "https://www.zinggrid.com/docs/api-elements"
    25. }]'>
    26. </zg-data>
    27. <zg-colgroup>
    28. <zg-column index="page" header="Docs Page" type="text"></zg-column>
    29. <zg-column index="link" header="Link (Default)" type="url"></zg-column>
    30. <zg-column index="link" header="Link Text" type="url" type-url-text="Click here!"></zg-column>
    31. <zg-column index="link" header="Link Internal Icon" type="url" type-url-icon="link"></zg-column>
    32. <zg-column index="link" header="Link External Icon" type="url" type-url-icon="outsidearrow"></zg-column>
    33. </zg-colgroup>
    34. </zing-grid>
    35. </body>
    36.  
    37. </html>
    1.  
    1.