• 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>
    #zebra-default {
      --theme-background-zebra: #ef9a9a;
      --zg-row-card-background_editor_even: #ef9a9a;
    }

    body {
      background: #e6e6e6;
    }

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

<body>

  <zing-grid id="zebra-default" 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--504680" 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--660599" 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--698835" 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: 110px; 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: 110px; 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: 1277px; 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: 1303px; 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" editor-controls="all" viewport="mobile">
      <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--179569" 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--633632" 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--942467" 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--962299" 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--646482" 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--365470" 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--538679" 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--224397" 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--50769" 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--964140" 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--987383" 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--164118" 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"></script>
</head>

<body>

  <zing-grid id="zebra-default" 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--504680" 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--660599" 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--698835" 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: 110px; 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: 110px; 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: 1277px; 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: 1303px; 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" editor-controls="all" viewport="mobile">
      <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--179569" 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--633632" 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--942467" 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--962299" 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--646482" 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--365470" 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--538679" 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--224397" 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--50769" 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--964140" 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--987383" 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--164118" 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>
    #zebra-default {
  --theme-background-zebra: #ef9a9a;
  --zg-row-card-background_editor_even: #ef9a9a;
}

body {
  background: #e6e6e6;
}