Demos Back to Docs

Icon Column Type

9 of 124
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 Download
This sets ZGIcon to a FA name directly, no map lookup needed (<zg-icon name="fa-smile-wink"></zg-icon>).
These get mapped to FA equivalents.

Full 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></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!

Edit in Studio

Demo Gallery