• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid: Blank Grid</title>
      <script nonce="undefined" src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js"></script>
    
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
      <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: 1725px;
        }
      </style>
    </head>
    
    <body>
    
      <div class="wrap">
        <zing-grid caption="ZGIcons w/ Font Awesome" icon-set="fontawesome">
          <zg-data data='[
              { "name": "cancel", "fontAwesome": "fa-times" },
              { "name": "cancelrecord", "fontAwesome": "fa-times" },
              { "name": "close", "fontAwesome": "fa-times" },
              { "name": "checked", "fontAwesome": "fa-check-square" },
              { "name": "checkmark", "fontAwesome": "fa-check" },
              { "name": "delete", "fontAwesome": "fa-trash" },
              { "name": "down", "fontAwesome": "fa-arrow-down" },
              { "name": "error", "fontAwesome": "fa-exclamation-circle" },
              { "name": "edit", "fontAwesome": "fa-edit" },
              { "name": "editrecord", "fontAwesome": "fa-edit" },
              { "name": "firstpage", "fontAwesome": "fa-angle-double-left" },
              { "name": "fixedmenu", "fontAwesome": "fa-bars" },
              { "name": "info", "fontAwesome": "fa-info-circle" },
              { "name": "lastpage", "fontAwesome": "fa-angle-double-right" },
              { "name": "layoutcard", "fontAwesome": "fa-th-large" },
              { "name": "layoutrow", "fontAwesome": "fa-th-list" },
              { "name": "link", "fontAwesome": "fa-link" },
              { "name": "menu", "fontAwesome": "fa-ellipsis-v" },
              { "name": "nextpage", "fontAwesome": "fa-angle-right" },
              { "name": "outsidearrow", "fontAwesome": "fa-external-link-alt" },
              { "name": "prevpage", "fontAwesome": "fa-angle-left" },
              { "name": "reload", "fontAwesome": "fa-redo-alt" },
              { "name": "remove", "fontAwesome": "fa-times" },
              { "name": "removerecord", "fontAwesome": "fa-trash" },
              { "name": "search", "fontAwesome": "fa-search" },
              { "name": "submitrecord", "fontAwesome": "fa-check" },
              { "name": "success", "fontAwesome": "fa-check-circle" },
              { "name": "unchecked", "fontAwesome": "fa-square" },
              { "name": "up", "fontAwesome": "fa-arrow-up" },
              { "name": "warning", "fontAwesome": "fa-exclamation-triangle" },
              { "name": "fa-smile-wink", "fontAwesome": "fa-smile-wink" }
            ]'></zg-data>
          <zg-colgroup>
            <zg-column index="name" header="Icon Name"></zg-column>
            <zg-column index="fontAwesome" header="Font Awesome"></zg-column>
            <zg-column index="fontAwesome" header="Font Awesome">
              <i class="fa [[index.fontAwesome]]"></i>
            </zg-column>
            <zg-column index="name" type="icon" align="center" width="150" 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 (&lt;zg-icon name="fa-smile-wink"&gt;&lt;/zg-icon&gt;).</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/dev/zinggrid-dev.min.js"></script>
    
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
    </head>
    
    <body>
    
      <div class="wrap">
        <zing-grid caption="ZGIcons w/ Font Awesome" icon-set="fontawesome">
          <zg-data data='[
              { "name": "cancel", "fontAwesome": "fa-times" },
              { "name": "cancelrecord", "fontAwesome": "fa-times" },
              { "name": "close", "fontAwesome": "fa-times" },
              { "name": "checked", "fontAwesome": "fa-check-square" },
              { "name": "checkmark", "fontAwesome": "fa-check" },
              { "name": "delete", "fontAwesome": "fa-trash" },
              { "name": "down", "fontAwesome": "fa-arrow-down" },
              { "name": "error", "fontAwesome": "fa-exclamation-circle" },
              { "name": "edit", "fontAwesome": "fa-edit" },
              { "name": "editrecord", "fontAwesome": "fa-edit" },
              { "name": "firstpage", "fontAwesome": "fa-angle-double-left" },
              { "name": "fixedmenu", "fontAwesome": "fa-bars" },
              { "name": "info", "fontAwesome": "fa-info-circle" },
              { "name": "lastpage", "fontAwesome": "fa-angle-double-right" },
              { "name": "layoutcard", "fontAwesome": "fa-th-large" },
              { "name": "layoutrow", "fontAwesome": "fa-th-list" },
              { "name": "link", "fontAwesome": "fa-link" },
              { "name": "menu", "fontAwesome": "fa-ellipsis-v" },
              { "name": "nextpage", "fontAwesome": "fa-angle-right" },
              { "name": "outsidearrow", "fontAwesome": "fa-external-link-alt" },
              { "name": "prevpage", "fontAwesome": "fa-angle-left" },
              { "name": "reload", "fontAwesome": "fa-redo-alt" },
              { "name": "remove", "fontAwesome": "fa-times" },
              { "name": "removerecord", "fontAwesome": "fa-trash" },
              { "name": "search", "fontAwesome": "fa-search" },
              { "name": "submitrecord", "fontAwesome": "fa-check" },
              { "name": "success", "fontAwesome": "fa-check-circle" },
              { "name": "unchecked", "fontAwesome": "fa-square" },
              { "name": "up", "fontAwesome": "fa-arrow-up" },
              { "name": "warning", "fontAwesome": "fa-exclamation-triangle" },
              { "name": "fa-smile-wink", "fontAwesome": "fa-smile-wink" }
            ]'></zg-data>
          <zg-colgroup>
            <zg-column index="name" header="Icon Name"></zg-column>
            <zg-column index="fontAwesome" header="Font Awesome"></zg-column>
            <zg-column index="fontAwesome" header="Font Awesome">
              <i class="fa [[index.fontAwesome]]"></i>
            </zg-column>
            <zg-column index="name" type="icon" align="center" width="150" 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 (&lt;zg-icon name="fa-smile-wink"&gt;&lt;/zg-icon&gt;).</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;
    }