• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid: Blank Grid</title>
      <script src="https://cdn.zinggrid.com/zinggrid.min.js" defer></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></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" defer></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;
    }