• Edit
  • Download
    • <!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;
    }

    zing-grid[loading] {
      height: 205px;
    }
  </style>
</head>

<body>

  <zing-grid id="zebra-adjusted" editor="modal" editor-controls="all" layout="card" zebra="" role="grid" viewport="mobile"><zg-data data="[
              { &quot;breed&quot;: &quot;Cane Corso&quot;, &quot;name&quot;: &quot;Ziva&quot;},
              { &quot;breed&quot;: &quot;Pug&quot;, &quot;name&quot;: &quot;Doug&quot;},
              { &quot;breed&quot;: &quot;Corgi&quot;, &quot;name&quot;: &quot;Jenny&quot;},
              { &quot;breed&quot;: &quot;Pomeranian&quot;, &quot;name&quot;: &quot;Koda&quot;}
            ]" hidden=""></zg-data><zg-colgroup slot="gridcolgroup" layout="card"><zg-column type="text" index="breed"></zg-column><zg-column type="text" index="name"></zg-column><zg-column type="editor"></zg-column><zg-column type="remover"></zg-column></zg-colgroup><zg-header layout="card" slot="header"><zg-control-bar slot="control-bar" layout="card"><zg-layout-controls slot="layout-controls" role="toolbar"><zg-button action="layoutcard" tooltip="Card Layout" tooltip-left="" tabindex="0"><zg-icon name="layoutcard" slot="icon"><svg id="svg--322057" slot="icon" viewBox="0 0 24 24">
                <path d="M4 11h5V5H4v6zm0 7h5v-6H4v6zm6 0h5v-6h-5v6zm6 0h5v-6h-5v6zm-6-7h5V5h-5v6zm6-6v6h5V5h-5z"></path>
                <path d="M0 0h24v24H0z" fill="none"></path>
              </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""></zg-checkbox><span class="label" slot="label"></span></zg-button><zg-button action="layoutrow" tooltip="Row Layout" tooltip-left="" tabindex="0"><zg-icon name="layoutrow" slot="icon"><svg id="svg--408142" slot="icon" viewBox="0 0 24 24">
                <path d="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z"></path>
                <path d="M0 0h24v24H0z" fill="none"></path>
              </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""></zg-checkbox><span class="label" slot="label"></span></zg-button></zg-layout-controls><zg-button slot="action" action="createrecord" tooltip="Insert Record" tooltip-right="" tabindex="0"><zg-icon name="createrecord" slot="icon"><svg id="svg--381234" slot="icon" viewBox="0 0 24 24">
              <path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path>
            </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""></zg-checkbox><span class="label" slot="label"></span></zg-button></zg-control-bar></zg-header><zg-head slot="gridhead" layout="card" role="rowgroup"><zg-row role="row" layout="card"><zg-head-cell cellindex="0" role="rowheader" class="" title="Breed" depth="1" type="text" style="left: 1223px; line-height: 0px; position: absolute; width: 476px; height: 0px;"><zg-icon class="zg-head-icon"></zg-icon>
          <div data-field-index="breed"><span>Breed</span></div>
        </zg-head-cell><zg-head-cell cellindex="1" role="rowheader" class="" title="Name" depth="1" type="text" style="left: 1223px; line-height: 0px; position: absolute; width: 476px; height: 0px;"><zg-icon class="zg-head-icon"></zg-icon>
          <div data-field-index="name"><span>Name</span></div>
        </zg-head-cell><zg-head-cell cellindex="2" role="rowheader" class="" title="" depth="1" type="editor" sort="disabled" style="left: 1643px; line-height: 0px; position: absolute; width: 30px; height: 0px;"><zg-icon class="zg-head-icon"></zg-icon>
          <div data-field-index=""><span></span></div>
        </zg-head-cell><zg-head-cell cellindex="3" role="rowheader" class="" title="" depth="1" type="remover" sort="disabled" style="left: 1669px; line-height: 0px; position: absolute; width: 30px; height: 0px;"><zg-icon class="zg-head-icon"></zg-icon>
          <div data-field-index=""><span></span></div>
        </zg-head-cell></zg-row></zg-head><zg-body slot="gridbody" layout="card" role="rowgroup" viewport="mobile" editor-controls="all"><zg-row role="row" layout="card" class="zebra-1"><zg-cell role="gridcell" layout="card" value="Cane Corso" data-field-index="breed" type="text"><label data-field-label="">Breed</label>
          <div data-field-index="breed">Cane Corso</div>
        </zg-cell><zg-cell role="gridcell" layout="card" value="Ziva" data-field-index="name" type="text"><label data-field-label="">Name</label>
          <div data-field-index="name">Ziva</div>
        </zg-cell><zg-cell role="gridcell" layout="card" value="" data-field-index="" type="editor" data-control-field=""><label data-field-label=""></label>
          <div data-field-index=""><zg-button action="editrecord" tabindex="0"><zg-icon name="editrecord" slot="icon"><svg id="svg--830266" slot="icon" viewBox="0 0 24 24">
                  <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path>
                </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""></zg-checkbox><span class="label" slot="label"></span></zg-button></div>
        </zg-cell><zg-cell role="gridcell" layout="card" value="" data-field-index="" type="remover" data-control-field=""><label data-field-label=""></label>
          <div data-field-index=""><zg-button action="removerecord" tabindex="0"><zg-icon name="removerecord" slot="icon"><svg id="svg--452077" slot="icon" viewBox="0 0 24 24">
                  <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path>
                </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""></zg-checkbox><span class="label" slot="label"></span></zg-button></div>
        </zg-cell></zg-row><zg-row role="row" layout="card" class="zebra-2"><zg-cell role="gridcell" layout="card" value="Pug" data-field-index="breed" type="text"><label data-field-label="">Breed</label>
          <div data-field-index="breed">Pug</div>
        </zg-cell><zg-cell role="gridcell" layout="card" value="Doug" data-field-index="name" type="text"><label data-field-label="">Name</label>
          <div data-field-index="name">Doug</div>
        </zg-cell><zg-cell role="gridcell" layout="card" value="" data-field-index="" type="editor" data-control-field=""><label data-field-label=""></label>
          <div data-field-index=""><zg-button action="editrecord" tabindex="0"><zg-icon name="editrecord" slot="icon"><svg id="svg--705532" slot="icon" viewBox="0 0 24 24">
                  <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path>
                </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""></zg-checkbox><span class="label" slot="label"></span></zg-button></div>
        </zg-cell><zg-cell role="gridcell" layout="card" value="" data-field-index="" type="remover" data-control-field=""><label data-field-label=""></label>
          <div data-field-index=""><zg-button action="removerecord" tabindex="0"><zg-icon name="removerecord" slot="icon"><svg id="svg--493811" slot="icon" viewBox="0 0 24 24">
                  <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path>
                </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""></zg-checkbox><span class="label" slot="label"></span></zg-button></div>
        </zg-cell></zg-row><zg-row role="row" layout="card" class="zebra-1"><zg-cell role="gridcell" layout="card" value="Corgi" data-field-index="breed" type="text"><label data-field-label="">Breed</label>
          <div data-field-index="breed">Corgi</div>
        </zg-cell><zg-cell role="gridcell" layout="card" value="Jenny" data-field-index="name" type="text"><label data-field-label="">Name</label>
          <div data-field-index="name">Jenny</div>
        </zg-cell><zg-cell role="gridcell" layout="card" value="" data-field-index="" type="editor" data-control-field=""><label data-field-label=""></label>
          <div data-field-index=""><zg-button action="editrecord" tabindex="0"><zg-icon name="editrecord" slot="icon"><svg id="svg--835648" slot="icon" viewBox="0 0 24 24">
                  <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path>
                </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""></zg-checkbox><span class="label" slot="label"></span></zg-button></div>
        </zg-cell><zg-cell role="gridcell" layout="card" value="" data-field-index="" type="remover" data-control-field=""><label data-field-label=""></label>
          <div data-field-index=""><zg-button action="removerecord" tabindex="0"><zg-icon name="removerecord" slot="icon"><svg id="svg--937186" slot="icon" viewBox="0 0 24 24">
                  <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path>
                </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""></zg-checkbox><span class="label" slot="label"></span></zg-button></div>
        </zg-cell></zg-row><zg-row role="row" layout="card" class="zebra-2"><zg-cell role="gridcell" layout="card" value="Pomeranian" data-field-index="breed" type="text"><label data-field-label="">Breed</label>
          <div data-field-index="breed">Pomeranian</div>
        </zg-cell><zg-cell role="gridcell" layout="card" value="Koda" data-field-index="name" type="text"><label data-field-label="">Name</label>
          <div data-field-index="name">Koda</div>
        </zg-cell><zg-cell role="gridcell" layout="card" value="" data-field-index="" type="editor" data-control-field=""><label data-field-label=""></label>
          <div data-field-index=""><zg-button action="editrecord" tabindex="0"><zg-icon name="editrecord" slot="icon"><svg id="svg--359879" slot="icon" viewBox="0 0 24 24">
                  <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path>
                </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""></zg-checkbox><span class="label" slot="label"></span></zg-button></div>
        </zg-cell><zg-cell role="gridcell" layout="card" value="" data-field-index="" type="remover" data-control-field=""><label data-field-label=""></label>
          <div data-field-index=""><zg-button action="removerecord" tabindex="0"><zg-icon name="removerecord" slot="icon"><svg id="svg--376031" slot="icon" viewBox="0 0 24 24">
                  <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path>
                </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""></zg-checkbox><span class="label" slot="label"></span></zg-button></div>
        </zg-cell></zg-row></zg-body><zg-foot slot="gridfoot" layout="card"></zg-foot><zg-footer slot="footer"></zg-footer><zg-editor-row type="modal" slot="editrow"></zg-editor-row><zg-status slot="status"></zg-status><zg-load-mask default-load-mask="" hidden=""></zg-load-mask><zg-dialog internal="" slot="dialogInternal"></zg-dialog><zg-menu id="columnMenu" hidden=""><zg-menu-item><zg-button action="checkbox" hastext="" tabindex="0"><zg-icon hidden="" name="checkbox" slot="icon"><svg id="svg--648728" slot="icon" viewBox="0 0 24 24"></svg></zg-icon><zg-checkbox checked="" slot="checkbox" action="checkbox"></zg-checkbox><span class="label" slot="label">Breed</span></zg-button></zg-menu-item><zg-menu-item><zg-button action="checkbox" hastext="" tabindex="0"><zg-icon hidden="" name="checkbox" slot="icon"><svg id="svg--315659" slot="icon" viewBox="0 0 24 24"></svg></zg-icon><zg-checkbox checked="" slot="checkbox" action="checkbox"></zg-checkbox><span class="label" slot="label">Name</span></zg-button></zg-menu-item><zg-menu-item><zg-button action="checkbox" hastext="" tabindex="0"><zg-icon hidden="" name="checkbox" slot="icon"><svg id="svg--727875" slot="icon" viewBox="0 0 24 24"></svg></zg-icon><zg-checkbox checked="" slot="checkbox" action="checkbox"></zg-checkbox><span class="label" slot="label">Edit</span></zg-button></zg-menu-item><zg-menu-item><zg-button action="checkbox" hastext="" tabindex="0"><zg-icon hidden="" name="checkbox" slot="icon"><svg id="svg--906496" slot="icon" viewBox="0 0 24 24"></svg></zg-icon><zg-checkbox checked="" slot="checkbox" action="checkbox"></zg-checkbox><span class="label" slot="label">Delete</span></zg-button></zg-menu-item></zg-menu></zing-grid>
  <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>

  <zing-grid id="zebra-adjusted" editor="modal" editor-controls="all" layout="card" zebra="" role="grid" viewport="mobile"><zg-data data="[
              { &quot;breed&quot;: &quot;Cane Corso&quot;, &quot;name&quot;: &quot;Ziva&quot;},
              { &quot;breed&quot;: &quot;Pug&quot;, &quot;name&quot;: &quot;Doug&quot;},
              { &quot;breed&quot;: &quot;Corgi&quot;, &quot;name&quot;: &quot;Jenny&quot;},
              { &quot;breed&quot;: &quot;Pomeranian&quot;, &quot;name&quot;: &quot;Koda&quot;}
            ]" hidden=""></zg-data><zg-colgroup slot="gridcolgroup" layout="card"><zg-column type="text" index="breed"></zg-column><zg-column type="text" index="name"></zg-column><zg-column type="editor"></zg-column><zg-column type="remover"></zg-column></zg-colgroup><zg-header layout="card" slot="header"><zg-control-bar slot="control-bar" layout="card"><zg-layout-controls slot="layout-controls" role="toolbar"><zg-button action="layoutcard" tooltip="Card Layout" tooltip-left="" tabindex="0"><zg-icon name="layoutcard" slot="icon"><svg id="svg--322057" slot="icon" viewBox="0 0 24 24">
                <path d="M4 11h5V5H4v6zm0 7h5v-6H4v6zm6 0h5v-6h-5v6zm6 0h5v-6h-5v6zm-6-7h5V5h-5v6zm6-6v6h5V5h-5z"></path>
                <path d="M0 0h24v24H0z" fill="none"></path>
              </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""></zg-checkbox><span class="label" slot="label"></span></zg-button><zg-button action="layoutrow" tooltip="Row Layout" tooltip-left="" tabindex="0"><zg-icon name="layoutrow" slot="icon"><svg id="svg--408142" slot="icon" viewBox="0 0 24 24">
                <path d="M4 14h4v-4H4v4zm0 5h4v-4H4v4zM4 9h4V5H4v4zm5 5h12v-4H9v4zm0 5h12v-4H9v4zM9 5v4h12V5H9z"></path>
                <path d="M0 0h24v24H0z" fill="none"></path>
              </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""></zg-checkbox><span class="label" slot="label"></span></zg-button></zg-layout-controls><zg-button slot="action" action="createrecord" tooltip="Insert Record" tooltip-right="" tabindex="0"><zg-icon name="createrecord" slot="icon"><svg id="svg--381234" slot="icon" viewBox="0 0 24 24">
              <path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"></path>
            </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""></zg-checkbox><span class="label" slot="label"></span></zg-button></zg-control-bar></zg-header><zg-head slot="gridhead" layout="card" role="rowgroup"><zg-row role="row" layout="card"><zg-head-cell cellindex="0" role="rowheader" class="" title="Breed" depth="1" type="text" style="left: 1223px; line-height: 0px; position: absolute; width: 476px; height: 0px;"><zg-icon class="zg-head-icon"></zg-icon>
          <div data-field-index="breed"><span>Breed</span></div>
        </zg-head-cell><zg-head-cell cellindex="1" role="rowheader" class="" title="Name" depth="1" type="text" style="left: 1223px; line-height: 0px; position: absolute; width: 476px; height: 0px;"><zg-icon class="zg-head-icon"></zg-icon>
          <div data-field-index="name"><span>Name</span></div>
        </zg-head-cell><zg-head-cell cellindex="2" role="rowheader" class="" title="" depth="1" type="editor" sort="disabled" style="left: 1643px; line-height: 0px; position: absolute; width: 30px; height: 0px;"><zg-icon class="zg-head-icon"></zg-icon>
          <div data-field-index=""><span></span></div>
        </zg-head-cell><zg-head-cell cellindex="3" role="rowheader" class="" title="" depth="1" type="remover" sort="disabled" style="left: 1669px; line-height: 0px; position: absolute; width: 30px; height: 0px;"><zg-icon class="zg-head-icon"></zg-icon>
          <div data-field-index=""><span></span></div>
        </zg-head-cell></zg-row></zg-head><zg-body slot="gridbody" layout="card" role="rowgroup" viewport="mobile" editor-controls="all"><zg-row role="row" layout="card" class="zebra-1"><zg-cell role="gridcell" layout="card" value="Cane Corso" data-field-index="breed" type="text"><label data-field-label="">Breed</label>
          <div data-field-index="breed">Cane Corso</div>
        </zg-cell><zg-cell role="gridcell" layout="card" value="Ziva" data-field-index="name" type="text"><label data-field-label="">Name</label>
          <div data-field-index="name">Ziva</div>
        </zg-cell><zg-cell role="gridcell" layout="card" value="" data-field-index="" type="editor" data-control-field=""><label data-field-label=""></label>
          <div data-field-index=""><zg-button action="editrecord" tabindex="0"><zg-icon name="editrecord" slot="icon"><svg id="svg--830266" slot="icon" viewBox="0 0 24 24">
                  <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path>
                </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""></zg-checkbox><span class="label" slot="label"></span></zg-button></div>
        </zg-cell><zg-cell role="gridcell" layout="card" value="" data-field-index="" type="remover" data-control-field=""><label data-field-label=""></label>
          <div data-field-index=""><zg-button action="removerecord" tabindex="0"><zg-icon name="removerecord" slot="icon"><svg id="svg--452077" slot="icon" viewBox="0 0 24 24">
                  <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path>
                </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""></zg-checkbox><span class="label" slot="label"></span></zg-button></div>
        </zg-cell></zg-row><zg-row role="row" layout="card" class="zebra-2"><zg-cell role="gridcell" layout="card" value="Pug" data-field-index="breed" type="text"><label data-field-label="">Breed</label>
          <div data-field-index="breed">Pug</div>
        </zg-cell><zg-cell role="gridcell" layout="card" value="Doug" data-field-index="name" type="text"><label data-field-label="">Name</label>
          <div data-field-index="name">Doug</div>
        </zg-cell><zg-cell role="gridcell" layout="card" value="" data-field-index="" type="editor" data-control-field=""><label data-field-label=""></label>
          <div data-field-index=""><zg-button action="editrecord" tabindex="0"><zg-icon name="editrecord" slot="icon"><svg id="svg--705532" slot="icon" viewBox="0 0 24 24">
                  <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path>
                </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""></zg-checkbox><span class="label" slot="label"></span></zg-button></div>
        </zg-cell><zg-cell role="gridcell" layout="card" value="" data-field-index="" type="remover" data-control-field=""><label data-field-label=""></label>
          <div data-field-index=""><zg-button action="removerecord" tabindex="0"><zg-icon name="removerecord" slot="icon"><svg id="svg--493811" slot="icon" viewBox="0 0 24 24">
                  <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path>
                </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""></zg-checkbox><span class="label" slot="label"></span></zg-button></div>
        </zg-cell></zg-row><zg-row role="row" layout="card" class="zebra-1"><zg-cell role="gridcell" layout="card" value="Corgi" data-field-index="breed" type="text"><label data-field-label="">Breed</label>
          <div data-field-index="breed">Corgi</div>
        </zg-cell><zg-cell role="gridcell" layout="card" value="Jenny" data-field-index="name" type="text"><label data-field-label="">Name</label>
          <div data-field-index="name">Jenny</div>
        </zg-cell><zg-cell role="gridcell" layout="card" value="" data-field-index="" type="editor" data-control-field=""><label data-field-label=""></label>
          <div data-field-index=""><zg-button action="editrecord" tabindex="0"><zg-icon name="editrecord" slot="icon"><svg id="svg--835648" slot="icon" viewBox="0 0 24 24">
                  <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path>
                </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""></zg-checkbox><span class="label" slot="label"></span></zg-button></div>
        </zg-cell><zg-cell role="gridcell" layout="card" value="" data-field-index="" type="remover" data-control-field=""><label data-field-label=""></label>
          <div data-field-index=""><zg-button action="removerecord" tabindex="0"><zg-icon name="removerecord" slot="icon"><svg id="svg--937186" slot="icon" viewBox="0 0 24 24">
                  <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path>
                </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""></zg-checkbox><span class="label" slot="label"></span></zg-button></div>
        </zg-cell></zg-row><zg-row role="row" layout="card" class="zebra-2"><zg-cell role="gridcell" layout="card" value="Pomeranian" data-field-index="breed" type="text"><label data-field-label="">Breed</label>
          <div data-field-index="breed">Pomeranian</div>
        </zg-cell><zg-cell role="gridcell" layout="card" value="Koda" data-field-index="name" type="text"><label data-field-label="">Name</label>
          <div data-field-index="name">Koda</div>
        </zg-cell><zg-cell role="gridcell" layout="card" value="" data-field-index="" type="editor" data-control-field=""><label data-field-label=""></label>
          <div data-field-index=""><zg-button action="editrecord" tabindex="0"><zg-icon name="editrecord" slot="icon"><svg id="svg--359879" slot="icon" viewBox="0 0 24 24">
                  <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"></path>
                </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""></zg-checkbox><span class="label" slot="label"></span></zg-button></div>
        </zg-cell><zg-cell role="gridcell" layout="card" value="" data-field-index="" type="remover" data-control-field=""><label data-field-label=""></label>
          <div data-field-index=""><zg-button action="removerecord" tabindex="0"><zg-icon name="removerecord" slot="icon"><svg id="svg--376031" slot="icon" viewBox="0 0 24 24">
                  <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path>
                </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""></zg-checkbox><span class="label" slot="label"></span></zg-button></div>
        </zg-cell></zg-row></zg-body><zg-foot slot="gridfoot" layout="card"></zg-foot><zg-footer slot="footer"></zg-footer><zg-editor-row type="modal" slot="editrow"></zg-editor-row><zg-status slot="status"></zg-status><zg-load-mask default-load-mask="" hidden=""></zg-load-mask><zg-dialog internal="" slot="dialogInternal"></zg-dialog><zg-menu id="columnMenu" hidden=""><zg-menu-item><zg-button action="checkbox" hastext="" tabindex="0"><zg-icon hidden="" name="checkbox" slot="icon"><svg id="svg--648728" slot="icon" viewBox="0 0 24 24"></svg></zg-icon><zg-checkbox checked="" slot="checkbox" action="checkbox"></zg-checkbox><span class="label" slot="label">Breed</span></zg-button></zg-menu-item><zg-menu-item><zg-button action="checkbox" hastext="" tabindex="0"><zg-icon hidden="" name="checkbox" slot="icon"><svg id="svg--315659" slot="icon" viewBox="0 0 24 24"></svg></zg-icon><zg-checkbox checked="" slot="checkbox" action="checkbox"></zg-checkbox><span class="label" slot="label">Name</span></zg-button></zg-menu-item><zg-menu-item><zg-button action="checkbox" hastext="" tabindex="0"><zg-icon hidden="" name="checkbox" slot="icon"><svg id="svg--727875" slot="icon" viewBox="0 0 24 24"></svg></zg-icon><zg-checkbox checked="" slot="checkbox" action="checkbox"></zg-checkbox><span class="label" slot="label">Edit</span></zg-button></zg-menu-item><zg-menu-item><zg-button action="checkbox" hastext="" tabindex="0"><zg-icon hidden="" name="checkbox" slot="icon"><svg id="svg--906496" slot="icon" viewBox="0 0 24 24"></svg></zg-icon><zg-checkbox checked="" slot="checkbox" action="checkbox"></zg-checkbox><span class="label" slot="label">Delete</span></zg-button></zg-menu-item></zg-menu></zing-grid>
</body>

</html>
    body {
  background: #e6e6e6;
}