• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title>ZingGrid Demo</title>
      <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js" defer></script>
      <style>
        body {
          background: #e6e6e6;
        }
    
        zing-grid[loading] {
          height: 360px;
        }
      </style>
    </head>
    
    <body>
      <zing-grid caption="Slotted Content" editor="modal" layout="row" layout-controls="disabled" viewport-stop>
        <zg-data data='[
            {
              "name": "Tom"
            },
            {
              "name": "Thorton"
            },
            {
              "name": "Timmy"
            },
            {
              "name": "Turner"
            }
          ]'></zg-data>
        <zg-colgroup>
          <zg-column index="name"></zg-column>
          <!-- custom column for delete button -->
          <zg-column index="custom" header="Delete Row" editor="false">
            <zg-button action="removerecord">
              <span name="close" slot="icon">&#10060; </span>
              <em slot="label" class="test"> Delete</em>
            </zg-button>
          </zg-column>
        </zg-colgroup>
      </zing-grid>
      <script></script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>ZingGrid Demo</title>
        <script src="https://cdn.zinggrid.com/dev/zinggrid-dev.min.js" defer></script>
      </head>
      <body>
        <zing-grid 
          caption="Slotted Content"
          editor="modal" 
          layout="row" 
          layout-controls="disabled" 
          viewport-stop>
          <zg-data data='[
            {
              "name": "Tom"
            },
            {
              "name": "Thorton"
            },
            {
              "name": "Timmy"
            },
            {
              "name": "Turner"
            }
          ]'></zg-data>
          <zg-colgroup>
            <zg-column index="name"></zg-column>
            <!-- custom column for delete button -->
            <zg-column index="custom" header="Delete Row" editor="false">
    					<zg-button action="removerecord">
                <span name="close" slot="icon">&#10060; </span> 
                <em slot="label" class="test"> Delete</em>
              </zg-button>
            </zg-column>
          </zg-colgroup>
        </zing-grid>
    	</body>
    </html>
    body { background:#e6e6e6; }