Icon Column Type
ZingGrid provides a
<zg-column type="icon">
column type. This will allow you to render our default icons. There is no cell editor for icon column types.Result Full HTML CSS JS
Edit DownloadFull Code
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingGrid: Blank Grid</title> <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script> <style> body { background: #e6e6e6; } .wrap { margin: 0 auto; max-width: 800px; padding-top: 50px; } zg-cell:nth-of-type(2) { --zg-cell-background: #fffced; border-left: 1px solid #fff0a3; border-right: 1px solid #fff0a3; } zing-grid[loading] { height: 1645px; } </style> </head> <body> <div class="wrap"> <zing-grid caption="<code>icon</code> Column Type"> <zg-data data='[ { "name": "cancel"}, { "name": "cancelrecord"}, { "name": "close"}, { "name": "checked"}, { "name": "checkmark"}, { "name": "down"}, { "name": "error"}, { "name": "edit"}, { "name": "editrecord"}, { "name": "firstpage"}, { "name": "fixedmenu"}, { "name": "info"}, { "name": "lastpage"}, { "name": "layoutcard"}, { "name": "layoutrow"}, { "name": "link"}, { "name": "menu"}, { "name": "nextpage"}, { "name": "outsidearrow"}, { "name": "prevpage"}, { "name": "reload"}, { "name": "remove"}, { "name": "removerecord"}, { "name": "search"}, { "name": "submitrecord"}, { "name": "success"}, { "name": "unchecked"}, { "name": "up"}, { "name": "warning"} ]'></zg-data> <zg-colgroup> <zg-column index="name" header="Icon Name"></zg-column> <zg-column index="name" type="icon" align="center" header="ZG Icon"></zg-column> </zg-colgroup> <zg-source> <zg-icon name="fa-smile-wink"></zg-icon> <span>This sets ZGIcon to a FA name directly, no map lookup needed (<zg-icon name="fa-smile-wink"></zg-icon>).</span> <br> <zg-icon name="error"></zg-icon> <zg-icon name="nextpage"></zg-icon> <zg-icon name="delete"></zg-icon> <zg-icon name="close"></zg-icon> <span>These get mapped to FA equivalents.</span> </zg-source> </zing-grid> </div> <script> ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']); </script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ZingGrid: Blank Grid</title> <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script> </head> <body> <div class="wrap"> <zing-grid caption="<code>icon</code> Column Type"> <zg-data data='[ { "name": "cancel"}, { "name": "cancelrecord"}, { "name": "close"}, { "name": "checked"}, { "name": "checkmark"}, { "name": "down"}, { "name": "error"}, { "name": "edit"}, { "name": "editrecord"}, { "name": "firstpage"}, { "name": "fixedmenu"}, { "name": "info"}, { "name": "lastpage"}, { "name": "layoutcard"}, { "name": "layoutrow"}, { "name": "link"}, { "name": "menu"}, { "name": "nextpage"}, { "name": "outsidearrow"}, { "name": "prevpage"}, { "name": "reload"}, { "name": "remove"}, { "name": "removerecord"}, { "name": "search"}, { "name": "submitrecord"}, { "name": "success"}, { "name": "unchecked"}, { "name": "up"}, { "name": "warning"} ]'></zg-data> <zg-colgroup> <zg-column index="name" header="Icon Name"></zg-column> <zg-column index="name" type="icon" align="center" header="ZG Icon"></zg-column> </zg-colgroup> <zg-source> <zg-icon name="fa-smile-wink"></zg-icon> <span>This sets ZGIcon to a FA name directly, no map lookup needed (<zg-icon name="fa-smile-wink"></zg-icon>).</span> <br> <zg-icon name="error"></zg-icon> <zg-icon name="nextpage"></zg-icon> <zg-icon name="delete"></zg-icon> <zg-icon name="close"></zg-icon> <span>These get mapped to FA equivalents.</span> </zg-source> </zing-grid> </div> </body> </html>
body { background:#e6e6e6; } .wrap { margin: 0 auto; max-width: 800px; padding-top: 50px; } zg-cell:nth-of-type(2) { --zg-cell-background:#fffced; border-left:1px solid #fff0a3; border-right:1px solid #fff0a3; }
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!