URL Column Type
ZingGrid provides a
<zg-column type="url"> column type. This column type will automatically format a url into an anchor tag. The anchor link can be displayed as text or an icon.
Result
Full
HTML
CSS
JS
Edit
Download
Full Code
<!DOCTYPE html> <html class="zg-html"> <head> <meta charset="utf-8"> <title>ZingGrid: Simple Grid</title> <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script> <style> .zg-body { background: #e6e6e6; } .zg-body zing-grid[loading] { height: 400px; } zing-grid[loading] { height: 421px; } </style> </head> <body class="zg-body"> <zing-grid caption="<code>url</code> Column Type" search sort src="https://cdn.zinggrid.com/datasets/users.json"> <zg-column index="episode_link" header="Without Column Type"></zg-column> <zg-column index="episode_link" header="With Column Type" type="url"></zg-column> <zg-column index="episode_link" header="With Url Icon" type="url" type-url-icon="link" sort="disabled"></zg-column> <zg-column index="episode_link" header="With Url Icon" type="url" type-url-icon="outsidearrow" sort="disabled"></zg-column> </zing-grid> <script> ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); </script> </body> </html>
<!DOCTYPE html> <html class="zg-html"> <head> <meta charset="utf-8"> <title>ZingGrid: Simple Grid</title> <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script> </head> <body class="zg-body"> <zing-grid caption="<code>url</code> Column Type" search sort src="https://cdn.zinggrid.com/datasets/users.json"> <zg-column index="episode_link" header="Without Column Type"></zg-column> <zg-column index="episode_link" header="With Column Type" type="url"></zg-column> <zg-column index="episode_link" header="With Url Icon" type="url" type-url-icon="link" sort="disabled"></zg-column> <zg-column index="episode_link" header="With Url Icon" type="url" type-url-icon="outsidearrow" sort="disabled"></zg-column> </zing-grid> </body> </html>
.zg-body {background:#e6e6e6;} .zg-body zing-grid[loading] { height:400px; }
// No JS code
Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!