Demos Back to Docs

Server-Side Rendering

109 of 124
Easily add server-side rendering to a previously rendered grid with the server-rendered attribute.
Result Full HTML CSS JS
Edit Download
Date
Close
2-Mar-17
848.91
1-Mar-17
853.08
28-Feb-17
845.04
27-Feb-17
848.64
24-Feb-17
845.24
23-Feb-17
852.19
22-Feb-17
855.61
21-Feb-17
856.44
17-Feb-17
845.07
16-Feb-17
844.14
15-Feb-17
842.7
14-Feb-17
836.39
13-Feb-17
836.53
10-Feb-17
827.46
9-Feb-17
821.36
8-Feb-17
819.71
7-Feb-17
812.5
6-Feb-17
807.64
3-Feb-17
810.2
2-Feb-17
839.95
1-Feb-17
832.35
31-Jan-17
823.48
30-Jan-17
830.38
27-Jan-17
835.77
26-Jan-17
839.15
25-Jan-17
836.52
24-Jan-17
822.44
23-Jan-17
817.88
20-Jan-17
808.33
19-Jan-17
809.04
18-Jan-17
807.48
17-Jan-17
809.72
13-Jan-17
817.14
12-Jan-17
813.64
11-Jan-17
799.02
10-Jan-17
795.9
9-Jan-17
796.92
6-Jan-17
795.99
5-Jan-17
780.45
4-Jan-17
757.18
3-Jan-17
753.67
30-Dec-16
749.87
29-Dec-16
765.15
28-Dec-16
772.13
27-Dec-16
771.4
23-Dec-16
760.59
22-Dec-16
766.34
21-Dec-16
770.6
20-Dec-16
771.22
19-Dec-16
766
16-Dec-16
757.77
15-Dec-16
761
14-Dec-16
768.82
13-Dec-16
774.34
12-Dec-16
760.12
9-Dec-16
768.66
8-Dec-16
767.33
7-Dec-16
770.42
6-Dec-16
764.72
5-Dec-16
759.36
2-Dec-16
740.34
1-Dec-16
743.65
30-Nov-16
750.57
There are no records to display.
Amazon Stock Data

Full Code

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>ZingGrid Demo</title>
  <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  <style>
    .zg-body {
      background: #e6e6e6;
    }

    zing-grid {
      overflow: hidden;
    }

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

<body class="zg-body">

  <!--
      Original Markup: 

      <zing-grid 
        caption="Amazon Stock Data"
        search
        height="1000"
        src="https://cdn.zinggrid.com/datasets/amzn-stock-data.json">
      </zing-grid> 
	-->


  <!-- 
		SSR renderered markup... 

		ADDED server-rendered="true" attribute for this markup, the
		rest of the markup is just output from the browser when ZG
		is rendered.
	-->

  <zing-grid server-rendered caption="Amazon Stock Data" search="" height="1000" src="https://cdn.zinggrid.com/datasets/amzn-stock-data.json" tabindex="0" static-scroll="" role="grid" viewport="desktop" loadingupdate="true" style="--zg-max-height: 1000px; --grid-columns: 1fr 1fr; --zg-head-cell-height: 40px; --grid-rows: repeat(64, max-content) 1fr;">
    <zg-table slot="table" tabindex="-1" height="" aria-rowcount="64" aria-colcount="2" style="visibility: visible;" class=""><zg-head id="mainhead" slot="gridhead" role="rowgroup" internal-height=""><zg-row frozen-top="" aria-rowindex="1" role="row" internal-height=""><zg-head-cell cellindex="0" role="columnheader" aria-colindex="1" data-focusable="" data-field-index="Date" icon-position="left" title="" depth="1" type="text" class="" style="inset-block-start: 0px;"><zg-icon class="zg-head-details-icon" slot="right"></zg-icon><zg-icon class="zg-head-icon" slot="left"></zg-icon><zg-icon class="zg-header-user-icon" slot="left" position="left"></zg-icon><zg-button action="filter" slot="right" class="zg-filter-menu" role="button" internal-cell="" dir="ltr" aria-label="filter"><zg-icon name="filter" slot="icon"><svg id="svg--762163" slot="icon" viewBox="0 0 24 24">
                  <path d="M10.333 16v-1.667h3.334V16h-3.334ZM7 11.833v-1.666h10v1.666H7ZM4.5 7.667V6h15v1.667h-15Z"></path>
                </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked"><svg id="svg--597401" slot="icon" viewBox="0 0 24 24">
                    <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
                  </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button>
            <div data-field-index="Date"><span>Date</span></div>
          </zg-head-cell><zg-head-cell cellindex="1" role="columnheader" aria-colindex="2" data-focusable="" data-field-index="Close" icon-position="left" last="" title="" depth="1" type="number" class="" style="inset-block-start: 0px;"><zg-icon class="zg-head-details-icon" slot="right"></zg-icon><zg-icon class="zg-head-icon" slot="left"></zg-icon><zg-icon class="zg-header-user-icon" slot="left" position="left"></zg-icon><zg-button action="filter" slot="right" class="zg-filter-menu" role="button" internal-cell="" dir="ltr" aria-label="filter"><zg-icon name="filter" slot="icon"><svg id="svg--415879" slot="icon" viewBox="0 0 24 24">
                  <path d="M10.333 16v-1.667h3.334V16h-3.334ZM7 11.833v-1.666h10v1.666H7ZM4.5 7.667V6h15v1.667h-15Z"></path>
                </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked"><svg id="svg--414082" slot="icon" viewBox="0 0 24 24">
                    <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
                  </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button>
            <div data-field-index="Close"><span>Close</span></div>
          </zg-head-cell><zg-row-details hidden=""></zg-row-details></zg-row></zg-head><zg-body id="mainbody" slot="gridbody" role="rowgroup" viewport="desktop"><zg-row aria-rowindex="2" role="row" internal-height="" internal-top="" class=""><zg-cell aria-colindex="1" role="gridcell" value="2-Mar-17" type="text" data-field-index="Date" class="">
            <div data-field-index="Date">2-Mar-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="848.91" type="number" data-field-index="Close" last="" class="">
            <div data-field-index="Close">848.91</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="3" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="1-Mar-17" type="text" data-field-index="Date" class="">
            <div data-field-index="Date">1-Mar-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="853.08" type="number" data-field-index="Close" last="" class="">
            <div data-field-index="Close">853.08</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="4" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="28-Feb-17" type="text" data-field-index="Date" class="">
            <div data-field-index="Date">28-Feb-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="845.04" type="number" data-field-index="Close" last="" class="">
            <div data-field-index="Close">845.04</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="5" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="27-Feb-17" type="text" data-field-index="Date" class="">
            <div data-field-index="Date">27-Feb-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="848.64" type="number" data-field-index="Close" last="" class="">
            <div data-field-index="Close">848.64</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="6" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="24-Feb-17" type="text" data-field-index="Date" class="">
            <div data-field-index="Date">24-Feb-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="845.24" type="number" data-field-index="Close" last="" class="">
            <div data-field-index="Close">845.24</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="7" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="23-Feb-17" type="text" data-field-index="Date" class="">
            <div data-field-index="Date">23-Feb-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="852.19" type="number" data-field-index="Close" last="" class="">
            <div data-field-index="Close">852.19</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="8" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="22-Feb-17" type="text" data-field-index="Date" class="">
            <div data-field-index="Date">22-Feb-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="855.61" type="number" data-field-index="Close" last="" class="">
            <div data-field-index="Close">855.61</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="9" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="21-Feb-17" type="text" data-field-index="Date" class="">
            <div data-field-index="Date">21-Feb-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="856.44" type="number" data-field-index="Close" last="" class="">
            <div data-field-index="Close">856.44</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="10" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="17-Feb-17" type="text" data-field-index="Date" class="">
            <div data-field-index="Date">17-Feb-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="845.07" type="number" data-field-index="Close" last="" class="">
            <div data-field-index="Close">845.07</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="11" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="16-Feb-17" type="text" data-field-index="Date" class="">
            <div data-field-index="Date">16-Feb-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="844.14" type="number" data-field-index="Close" last="" class="">
            <div data-field-index="Close">844.14</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="12" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="15-Feb-17" type="text" data-field-index="Date" class="">
            <div data-field-index="Date">15-Feb-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="842.7" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">842.7</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="13" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="14-Feb-17" type="text" data-field-index="Date" class="">
            <div data-field-index="Date">14-Feb-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="836.39" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">836.39</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="14" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="13-Feb-17" type="text" data-field-index="Date" class="">
            <div data-field-index="Date">13-Feb-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="836.53" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">836.53</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="15" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="10-Feb-17" type="text" data-field-index="Date" class="">
            <div data-field-index="Date">10-Feb-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="827.46" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">827.46</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="16" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="9-Feb-17" type="text" data-field-index="Date" class="">
            <div data-field-index="Date">9-Feb-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="821.36" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">821.36</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="17" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="8-Feb-17" type="text" data-field-index="Date" class="">
            <div data-field-index="Date">8-Feb-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="819.71" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">819.71</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="18" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="7-Feb-17" type="text" data-field-index="Date" class="">
            <div data-field-index="Date">7-Feb-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="812.5" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">812.5</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="19" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="6-Feb-17" type="text" data-field-index="Date" class="">
            <div data-field-index="Date">6-Feb-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="807.64" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">807.64</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="20" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="3-Feb-17" type="text" data-field-index="Date" class="">
            <div data-field-index="Date">3-Feb-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="810.2" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">810.2</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="21" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="2-Feb-17" type="text" data-field-index="Date" class="">
            <div data-field-index="Date">2-Feb-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="839.95" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">839.95</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="22" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="1-Feb-17" type="text" data-field-index="Date">
            <div data-field-index="Date">1-Feb-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="832.35" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">832.35</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="23" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="31-Jan-17" type="text" data-field-index="Date">
            <div data-field-index="Date">31-Jan-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="823.48" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">823.48</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="24" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="30-Jan-17" type="text" data-field-index="Date">
            <div data-field-index="Date">30-Jan-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="830.38" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">830.38</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="25" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="27-Jan-17" type="text" data-field-index="Date">
            <div data-field-index="Date">27-Jan-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="835.77" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">835.77</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="26" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="26-Jan-17" type="text" data-field-index="Date">
            <div data-field-index="Date">26-Jan-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="839.15" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">839.15</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="27" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="25-Jan-17" type="text" data-field-index="Date">
            <div data-field-index="Date">25-Jan-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="836.52" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">836.52</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="28" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="24-Jan-17" type="text" data-field-index="Date">
            <div data-field-index="Date">24-Jan-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="822.44" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">822.44</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="29" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="23-Jan-17" type="text" data-field-index="Date">
            <div data-field-index="Date">23-Jan-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="817.88" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">817.88</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="30" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="20-Jan-17" type="text" data-field-index="Date">
            <div data-field-index="Date">20-Jan-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="808.33" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">808.33</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="31" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="19-Jan-17" type="text" data-field-index="Date">
            <div data-field-index="Date">19-Jan-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="809.04" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">809.04</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="32" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="18-Jan-17" type="text" data-field-index="Date">
            <div data-field-index="Date">18-Jan-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="807.48" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">807.48</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="33" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="17-Jan-17" type="text" data-field-index="Date">
            <div data-field-index="Date">17-Jan-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="809.72" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">809.72</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="34" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="13-Jan-17" type="text" data-field-index="Date">
            <div data-field-index="Date">13-Jan-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="817.14" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">817.14</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="35" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="12-Jan-17" type="text" data-field-index="Date">
            <div data-field-index="Date">12-Jan-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="813.64" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">813.64</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="36" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="11-Jan-17" type="text" data-field-index="Date">
            <div data-field-index="Date">11-Jan-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="799.02" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">799.02</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="37" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="10-Jan-17" type="text" data-field-index="Date">
            <div data-field-index="Date">10-Jan-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="795.9" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">795.9</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="38" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="9-Jan-17" type="text" data-field-index="Date">
            <div data-field-index="Date">9-Jan-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="796.92" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">796.92</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="39" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="6-Jan-17" type="text" data-field-index="Date">
            <div data-field-index="Date">6-Jan-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="795.99" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">795.99</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="40" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="5-Jan-17" type="text" data-field-index="Date">
            <div data-field-index="Date">5-Jan-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="780.45" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">780.45</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="41" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="4-Jan-17" type="text" data-field-index="Date">
            <div data-field-index="Date">4-Jan-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="757.18" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">757.18</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="42" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="3-Jan-17" type="text" data-field-index="Date">
            <div data-field-index="Date">3-Jan-17</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="753.67" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">753.67</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="43" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="30-Dec-16" type="text" data-field-index="Date">
            <div data-field-index="Date">30-Dec-16</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="749.87" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">749.87</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="44" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="29-Dec-16" type="text" data-field-index="Date">
            <div data-field-index="Date">29-Dec-16</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="765.15" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">765.15</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="45" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="28-Dec-16" type="text" data-field-index="Date">
            <div data-field-index="Date">28-Dec-16</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="772.13" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">772.13</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="46" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="27-Dec-16" type="text" data-field-index="Date">
            <div data-field-index="Date">27-Dec-16</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="771.4" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">771.4</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="47" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="23-Dec-16" type="text" data-field-index="Date">
            <div data-field-index="Date">23-Dec-16</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="760.59" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">760.59</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="48" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="22-Dec-16" type="text" data-field-index="Date">
            <div data-field-index="Date">22-Dec-16</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="766.34" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">766.34</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="49" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="21-Dec-16" type="text" data-field-index="Date">
            <div data-field-index="Date">21-Dec-16</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="770.6" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">770.6</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="50" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="20-Dec-16" type="text" data-field-index="Date">
            <div data-field-index="Date">20-Dec-16</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="771.22" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">771.22</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="51" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="19-Dec-16" type="text" data-field-index="Date">
            <div data-field-index="Date">19-Dec-16</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="766" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">766</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="52" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="16-Dec-16" type="text" data-field-index="Date">
            <div data-field-index="Date">16-Dec-16</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="757.77" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">757.77</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="53" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="15-Dec-16" type="text" data-field-index="Date">
            <div data-field-index="Date">15-Dec-16</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="761" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">761</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="54" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="14-Dec-16" type="text" data-field-index="Date">
            <div data-field-index="Date">14-Dec-16</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="768.82" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">768.82</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="55" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="13-Dec-16" type="text" data-field-index="Date">
            <div data-field-index="Date">13-Dec-16</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="774.34" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">774.34</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="56" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="12-Dec-16" type="text" data-field-index="Date">
            <div data-field-index="Date">12-Dec-16</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="760.12" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">760.12</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="57" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="9-Dec-16" type="text" data-field-index="Date">
            <div data-field-index="Date">9-Dec-16</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="768.66" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">768.66</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="58" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="8-Dec-16" type="text" data-field-index="Date">
            <div data-field-index="Date">8-Dec-16</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="767.33" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">767.33</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="59" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="7-Dec-16" type="text" data-field-index="Date">
            <div data-field-index="Date">7-Dec-16</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="770.42" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">770.42</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="60" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="6-Dec-16" type="text" data-field-index="Date">
            <div data-field-index="Date">6-Dec-16</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="764.72" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">764.72</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="61" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="5-Dec-16" type="text" data-field-index="Date">
            <div data-field-index="Date">5-Dec-16</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="759.36" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">759.36</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="62" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="2-Dec-16" type="text" data-field-index="Date">
            <div data-field-index="Date">2-Dec-16</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="740.34" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">740.34</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="63" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="1-Dec-16" type="text" data-field-index="Date">
            <div data-field-index="Date">1-Dec-16</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="743.65" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">743.65</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="64" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="30-Nov-16" type="text" data-field-index="Date">
            <div data-field-index="Date">30-Nov-16</div>
          </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="750.57" type="number" data-field-index="Close" last="">
            <div data-field-index="Close">750.57</div>
          </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row></zg-body><zg-foot id="mainfoot" slot="gridfoot"></zg-foot><zg-editor-row id="bodyeditorrow" slot="bodyeditorrow"></zg-editor-row><zg-selector-mask slot="bodygridselectmask"></zg-selector-mask><zg-focus slot="bodygridfocus" hidden=""></zg-focus><zg-no-data class="default" slot="gridnodata"><span class="default-message">There are no records to display.</span></zg-no-data></zg-table><zg-header slot="header"><zg-caption slot="caption">
        <div id="zg-caption-user-text">Amazon Stock Data</div><zg-button data-focusable="" slot="tool" action="removerecord" hidden="" role="button" dir="ltr" aria-label="removerecord" tabindex="-1"><zg-icon name="removerecord" slot="icon" internal-caption=""><svg id="svg--512383" 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-icon slot="zgicon" name="unchecked" internal-caption=""><svg id="svg--811755" slot="icon" viewBox="0 0 24 24">
                <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
              </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><zg-search slot="tool"><zg-button slot="button" action="search" data-focusable="" role="button" dir="ltr" aria-label="search" tabindex="-1"><zg-icon name="search" slot="icon" internal-caption=""><svg id="svg--413331" slot="icon" viewBox="0 0 24 24">
                <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
                <path d="M0 0h24v24H0z" fill="none"></path>
              </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked" internal-caption=""><svg id="svg--986536" slot="icon" viewBox="0 0 24 24">
                  <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
                </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><input slot="input" type="search" placeholder="Search" aria-label="Search" tabindex="-1"></zg-search><zg-button data-focusable="" slot="tool" action="fixedmenu" hidden="" role="button" dir="ltr" aria-label="fixedmenu" aria-haspopup="true" tabindex="-1"><zg-icon name="fixedmenu" slot="icon" internal-caption=""><svg id="svg--405199" slot="icon" viewBox="0 0 24 24">
              <path d="M0 0h24v24H0z" fill="none"></path>
              <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
            </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked" internal-caption=""><svg id="svg--283447" slot="icon" viewBox="0 0 24 24">
                <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
              </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><zg-button data-focusable="" slot="tool" action="menu" hidden="" role="button" dir="ltr" aria-label="menu" aria-haspopup="true" tabindex="-1"><zg-icon name="menu" slot="icon" internal-caption=""><svg id="svg--61537" slot="icon" viewBox="0 0 24 24">
              <path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path>
            </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked" internal-caption=""><svg id="svg--237548" slot="icon" viewBox="0 0 24 24">
                <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
              </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button>
      </zg-caption><zg-control-bar slot="control-bar" hidden=""><zg-separator slot="cardaction" hidden="" id="afterselect"></zg-separator><zg-button data-focusable="" slot="action" action="createrecord" hidden="" role="button" dir="ltr" aria-label="createrecord" tabindex="-1"><zg-icon name="createrecord" slot="icon"><svg id="svg--589970" 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-icon slot="zgicon" name="unchecked"><svg id="svg--265842" slot="icon" viewBox="0 0 24 24">
                <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
              </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><zg-separator slot="action" hidden="" id="beforeedit"></zg-separator><zg-text id="label" slot="action">Edit Records (Batch):</zg-text><zg-button data-focusable="" slot="action" action="batchedit" hidden="" role="button" dir="ltr" aria-label="batchedit" tabindex="-1"><zg-icon name="batchedit" slot="icon"><svg id="svg--813759" 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-icon slot="zgicon" name="unchecked"><svg id="svg--543707" slot="icon" viewBox="0 0 24 24">
                <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
              </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><zg-button data-focusable="" slot="action" action="batcheditsave" hidden="" role="button" dir="ltr" aria-label="batcheditsave" tabindex="-1"><zg-icon name="batcheditsave" slot="icon"><svg id="svg--407286" slot="icon" viewBox="0 0 24 24">
              <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
            </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked"><svg id="svg--683260" slot="icon" viewBox="0 0 24 24">
                <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
              </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><zg-button data-focusable="" slot="action" action="batcheditcancel" hidden="" role="button" dir="ltr" aria-label="batcheditcancel" tabindex="-1"><zg-icon name="batcheditcancel" slot="icon"><svg id="svg--476762" slot="icon" viewBox="0 0 24 24">
              <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
            </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked"><svg id="svg--629781" slot="icon" viewBox="0 0 24 24">
                <path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path>
              </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><zg-text id="unsaved" slot="message" hidden=""></zg-text></zg-control-bar></zg-header><zg-colgroup id="gridcolgroup" slot="gridcolgroup"><zg-column type="text" index="Date"></zg-column><zg-column type="number" index="Close"></zg-column></zg-colgroup><zg-footer slot="footer"></zg-footer><zg-status slot="status"></zg-status><zg-tooltip slot="tooltip" role="tooltip" hidden=""></zg-tooltip><zg-cell-overflow slot="celloverflow" hidden=""></zg-cell-overflow><zg-filter-menu slot="filtermenu" hidden="" role="menu"></zg-filter-menu><zg-frozen-colgroup id="zing-grid-freeze-style-left" slot="freeze-left-columns" hidden=""></zg-frozen-colgroup><zg-frozen-colgroup id="zing-grid-freeze-style-right" slot="freeze-right-columns" hidden=""></zg-frozen-colgroup><zg-batch-edit id="zing-grid-batch-edit" slot="batch-edit" hidden=""></zg-batch-edit><zg-load-mask slot="loadmask" hidden=""></zg-load-mask><zg-dialog internal="" slot="dialogInternal"></zg-dialog><zg-watermark slot="watermark"></zg-watermark><zg-menu id="columnMenu" hidden="" role="menu"><zg-menu-item role="menuitemcheckbox" tabindex="-1"><zg-button action="checkbox" role="button" hastext="" dir="ltr"><zg-icon hidden="" name="checkbox" slot="icon"><svg id="svg--434706" slot="icon" viewBox="0 0 24 24"></svg></zg-icon><zg-checkbox checked="" slot="checkbox" action="checkbox"><zg-icon slot="zgicon" name="checked"><svg id="svg--792969" slot="icon" viewBox="0 0 24 24">
                <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
              </svg></zg-icon></zg-checkbox><span class="label" slot="label">Date</span></zg-button></zg-menu-item><zg-menu-item role="menuitemcheckbox" tabindex="-1"><zg-button action="checkbox" role="button" hastext="" dir="ltr"><zg-icon hidden="" name="checkbox" slot="icon"><svg id="svg--721484" slot="icon" viewBox="0 0 24 24"></svg></zg-icon><zg-checkbox checked="" slot="checkbox" action="checkbox"><zg-icon slot="zgicon" name="checked"><svg id="svg--209365" slot="icon" viewBox="0 0 24 24">
                <path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path>
              </svg></zg-icon></zg-checkbox><span class="label" slot="label">Close</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 Demo</title>
    <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
  </head>
  <body class="zg-body">
  
	<!--
      Original Markup: 

      <zing-grid 
        caption="Amazon Stock Data"
        search
        height="1000"
        src="https://cdn.zinggrid.com/datasets/amzn-stock-data.json">
      </zing-grid> 
	-->
    
    
  <!-- 
		SSR renderered markup... 

		ADDED server-rendered="true" attribute for this markup, the
		rest of the markup is just output from the browser when ZG
		is rendered.
	-->
    
  <zing-grid server-rendered caption="Amazon Stock Data" search="" height="1000" src="https://cdn.zinggrid.com/datasets/amzn-stock-data.json" tabindex="0" static-scroll="" role="grid" viewport="desktop" loadingupdate="true" style="--zg-max-height: 1000px; --grid-columns: 1fr 1fr; --zg-head-cell-height: 40px; --grid-rows: repeat(64, max-content) 1fr;">
    <zg-table slot="table" tabindex="-1" height="" aria-rowcount="64" aria-colcount="2" style="visibility: visible;" class=""><zg-head id="mainhead" slot="gridhead" role="rowgroup" internal-height=""><zg-row frozen-top="" aria-rowindex="1" role="row" internal-height=""><zg-head-cell cellindex="0" role="columnheader" aria-colindex="1" data-focusable="" data-field-index="Date" icon-position="left" title="" depth="1" type="text" class="" style="inset-block-start: 0px;"><zg-icon class="zg-head-details-icon" slot="right"></zg-icon><zg-icon class="zg-head-icon" slot="left"></zg-icon><zg-icon class="zg-header-user-icon" slot="left" position="left"></zg-icon><zg-button action="filter" slot="right" class="zg-filter-menu" role="button" internal-cell="" dir="ltr" aria-label="filter"><zg-icon name="filter" slot="icon"><svg id="svg--762163" slot="icon" viewBox="0 0 24 24"><path d="M10.333 16v-1.667h3.334V16h-3.334ZM7 11.833v-1.666h10v1.666H7ZM4.5 7.667V6h15v1.667h-15Z"></path></svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked"><svg id="svg--597401" slot="icon" viewBox="0 0 24 24"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><div data-field-index="Date"><span>Date</span></div></zg-head-cell><zg-head-cell cellindex="1" role="columnheader" aria-colindex="2" data-focusable="" data-field-index="Close" icon-position="left" last="" title="" depth="1" type="number" class="" style="inset-block-start: 0px;"><zg-icon class="zg-head-details-icon" slot="right"></zg-icon><zg-icon class="zg-head-icon" slot="left"></zg-icon><zg-icon class="zg-header-user-icon" slot="left" position="left"></zg-icon><zg-button action="filter" slot="right" class="zg-filter-menu" role="button" internal-cell="" dir="ltr" aria-label="filter"><zg-icon name="filter" slot="icon"><svg id="svg--415879" slot="icon" viewBox="0 0 24 24"><path d="M10.333 16v-1.667h3.334V16h-3.334ZM7 11.833v-1.666h10v1.666H7ZM4.5 7.667V6h15v1.667h-15Z"></path></svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked"><svg id="svg--414082" slot="icon" viewBox="0 0 24 24"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><div data-field-index="Close"><span>Close</span></div></zg-head-cell><zg-row-details hidden=""></zg-row-details></zg-row></zg-head><zg-body id="mainbody" slot="gridbody" role="rowgroup" viewport="desktop"><zg-row aria-rowindex="2" role="row" internal-height="" internal-top="" class=""><zg-cell aria-colindex="1" role="gridcell" value="2-Mar-17" type="text" data-field-index="Date" class=""><div data-field-index="Date">2-Mar-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="848.91" type="number" data-field-index="Close" last="" class=""><div data-field-index="Close">848.91</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="3" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="1-Mar-17" type="text" data-field-index="Date" class=""><div data-field-index="Date">1-Mar-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="853.08" type="number" data-field-index="Close" last="" class=""><div data-field-index="Close">853.08</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="4" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="28-Feb-17" type="text" data-field-index="Date" class=""><div data-field-index="Date">28-Feb-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="845.04" type="number" data-field-index="Close" last="" class=""><div data-field-index="Close">845.04</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="5" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="27-Feb-17" type="text" data-field-index="Date" class=""><div data-field-index="Date">27-Feb-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="848.64" type="number" data-field-index="Close" last="" class=""><div data-field-index="Close">848.64</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="6" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="24-Feb-17" type="text" data-field-index="Date" class=""><div data-field-index="Date">24-Feb-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="845.24" type="number" data-field-index="Close" last="" class=""><div data-field-index="Close">845.24</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="7" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="23-Feb-17" type="text" data-field-index="Date" class=""><div data-field-index="Date">23-Feb-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="852.19" type="number" data-field-index="Close" last="" class=""><div data-field-index="Close">852.19</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="8" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="22-Feb-17" type="text" data-field-index="Date" class=""><div data-field-index="Date">22-Feb-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="855.61" type="number" data-field-index="Close" last="" class=""><div data-field-index="Close">855.61</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="9" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="21-Feb-17" type="text" data-field-index="Date" class=""><div data-field-index="Date">21-Feb-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="856.44" type="number" data-field-index="Close" last="" class=""><div data-field-index="Close">856.44</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="10" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="17-Feb-17" type="text" data-field-index="Date" class=""><div data-field-index="Date">17-Feb-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="845.07" type="number" data-field-index="Close" last="" class=""><div data-field-index="Close">845.07</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="11" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="16-Feb-17" type="text" data-field-index="Date" class=""><div data-field-index="Date">16-Feb-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="844.14" type="number" data-field-index="Close" last="" class=""><div data-field-index="Close">844.14</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="12" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="15-Feb-17" type="text" data-field-index="Date" class=""><div data-field-index="Date">15-Feb-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="842.7" type="number" data-field-index="Close" last=""><div data-field-index="Close">842.7</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="13" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="14-Feb-17" type="text" data-field-index="Date" class=""><div data-field-index="Date">14-Feb-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="836.39" type="number" data-field-index="Close" last=""><div data-field-index="Close">836.39</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="14" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="13-Feb-17" type="text" data-field-index="Date" class=""><div data-field-index="Date">13-Feb-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="836.53" type="number" data-field-index="Close" last=""><div data-field-index="Close">836.53</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="15" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="10-Feb-17" type="text" data-field-index="Date" class=""><div data-field-index="Date">10-Feb-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="827.46" type="number" data-field-index="Close" last=""><div data-field-index="Close">827.46</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="16" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="9-Feb-17" type="text" data-field-index="Date" class=""><div data-field-index="Date">9-Feb-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="821.36" type="number" data-field-index="Close" last=""><div data-field-index="Close">821.36</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="17" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="8-Feb-17" type="text" data-field-index="Date" class=""><div data-field-index="Date">8-Feb-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="819.71" type="number" data-field-index="Close" last=""><div data-field-index="Close">819.71</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="18" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="7-Feb-17" type="text" data-field-index="Date" class=""><div data-field-index="Date">7-Feb-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="812.5" type="number" data-field-index="Close" last=""><div data-field-index="Close">812.5</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="19" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="6-Feb-17" type="text" data-field-index="Date" class=""><div data-field-index="Date">6-Feb-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="807.64" type="number" data-field-index="Close" last=""><div data-field-index="Close">807.64</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="20" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="3-Feb-17" type="text" data-field-index="Date" class=""><div data-field-index="Date">3-Feb-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="810.2" type="number" data-field-index="Close" last=""><div data-field-index="Close">810.2</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="21" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="2-Feb-17" type="text" data-field-index="Date" class=""><div data-field-index="Date">2-Feb-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="839.95" type="number" data-field-index="Close" last=""><div data-field-index="Close">839.95</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="22" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="1-Feb-17" type="text" data-field-index="Date"><div data-field-index="Date">1-Feb-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="832.35" type="number" data-field-index="Close" last=""><div data-field-index="Close">832.35</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="23" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="31-Jan-17" type="text" data-field-index="Date"><div data-field-index="Date">31-Jan-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="823.48" type="number" data-field-index="Close" last=""><div data-field-index="Close">823.48</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="24" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="30-Jan-17" type="text" data-field-index="Date"><div data-field-index="Date">30-Jan-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="830.38" type="number" data-field-index="Close" last=""><div data-field-index="Close">830.38</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="25" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="27-Jan-17" type="text" data-field-index="Date"><div data-field-index="Date">27-Jan-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="835.77" type="number" data-field-index="Close" last=""><div data-field-index="Close">835.77</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="26" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="26-Jan-17" type="text" data-field-index="Date"><div data-field-index="Date">26-Jan-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="839.15" type="number" data-field-index="Close" last=""><div data-field-index="Close">839.15</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="27" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="25-Jan-17" type="text" data-field-index="Date"><div data-field-index="Date">25-Jan-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="836.52" type="number" data-field-index="Close" last=""><div data-field-index="Close">836.52</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="28" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="24-Jan-17" type="text" data-field-index="Date"><div data-field-index="Date">24-Jan-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="822.44" type="number" data-field-index="Close" last=""><div data-field-index="Close">822.44</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="29" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="23-Jan-17" type="text" data-field-index="Date"><div data-field-index="Date">23-Jan-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="817.88" type="number" data-field-index="Close" last=""><div data-field-index="Close">817.88</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="30" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="20-Jan-17" type="text" data-field-index="Date"><div data-field-index="Date">20-Jan-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="808.33" type="number" data-field-index="Close" last=""><div data-field-index="Close">808.33</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="31" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="19-Jan-17" type="text" data-field-index="Date"><div data-field-index="Date">19-Jan-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="809.04" type="number" data-field-index="Close" last=""><div data-field-index="Close">809.04</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="32" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="18-Jan-17" type="text" data-field-index="Date"><div data-field-index="Date">18-Jan-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="807.48" type="number" data-field-index="Close" last=""><div data-field-index="Close">807.48</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="33" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="17-Jan-17" type="text" data-field-index="Date"><div data-field-index="Date">17-Jan-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="809.72" type="number" data-field-index="Close" last=""><div data-field-index="Close">809.72</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="34" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="13-Jan-17" type="text" data-field-index="Date"><div data-field-index="Date">13-Jan-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="817.14" type="number" data-field-index="Close" last=""><div data-field-index="Close">817.14</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="35" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="12-Jan-17" type="text" data-field-index="Date"><div data-field-index="Date">12-Jan-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="813.64" type="number" data-field-index="Close" last=""><div data-field-index="Close">813.64</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="36" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="11-Jan-17" type="text" data-field-index="Date"><div data-field-index="Date">11-Jan-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="799.02" type="number" data-field-index="Close" last=""><div data-field-index="Close">799.02</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="37" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="10-Jan-17" type="text" data-field-index="Date"><div data-field-index="Date">10-Jan-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="795.9" type="number" data-field-index="Close" last=""><div data-field-index="Close">795.9</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="38" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="9-Jan-17" type="text" data-field-index="Date"><div data-field-index="Date">9-Jan-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="796.92" type="number" data-field-index="Close" last=""><div data-field-index="Close">796.92</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="39" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="6-Jan-17" type="text" data-field-index="Date"><div data-field-index="Date">6-Jan-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="795.99" type="number" data-field-index="Close" last=""><div data-field-index="Close">795.99</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="40" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="5-Jan-17" type="text" data-field-index="Date"><div data-field-index="Date">5-Jan-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="780.45" type="number" data-field-index="Close" last=""><div data-field-index="Close">780.45</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="41" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="4-Jan-17" type="text" data-field-index="Date"><div data-field-index="Date">4-Jan-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="757.18" type="number" data-field-index="Close" last=""><div data-field-index="Close">757.18</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="42" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="3-Jan-17" type="text" data-field-index="Date"><div data-field-index="Date">3-Jan-17</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="753.67" type="number" data-field-index="Close" last=""><div data-field-index="Close">753.67</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="43" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="30-Dec-16" type="text" data-field-index="Date"><div data-field-index="Date">30-Dec-16</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="749.87" type="number" data-field-index="Close" last=""><div data-field-index="Close">749.87</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="44" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="29-Dec-16" type="text" data-field-index="Date"><div data-field-index="Date">29-Dec-16</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="765.15" type="number" data-field-index="Close" last=""><div data-field-index="Close">765.15</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="45" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="28-Dec-16" type="text" data-field-index="Date"><div data-field-index="Date">28-Dec-16</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="772.13" type="number" data-field-index="Close" last=""><div data-field-index="Close">772.13</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="46" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="27-Dec-16" type="text" data-field-index="Date"><div data-field-index="Date">27-Dec-16</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="771.4" type="number" data-field-index="Close" last=""><div data-field-index="Close">771.4</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="47" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="23-Dec-16" type="text" data-field-index="Date"><div data-field-index="Date">23-Dec-16</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="760.59" type="number" data-field-index="Close" last=""><div data-field-index="Close">760.59</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="48" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="22-Dec-16" type="text" data-field-index="Date"><div data-field-index="Date">22-Dec-16</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="766.34" type="number" data-field-index="Close" last=""><div data-field-index="Close">766.34</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="49" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="21-Dec-16" type="text" data-field-index="Date"><div data-field-index="Date">21-Dec-16</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="770.6" type="number" data-field-index="Close" last=""><div data-field-index="Close">770.6</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="50" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="20-Dec-16" type="text" data-field-index="Date"><div data-field-index="Date">20-Dec-16</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="771.22" type="number" data-field-index="Close" last=""><div data-field-index="Close">771.22</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="51" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="19-Dec-16" type="text" data-field-index="Date"><div data-field-index="Date">19-Dec-16</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="766" type="number" data-field-index="Close" last=""><div data-field-index="Close">766</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="52" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="16-Dec-16" type="text" data-field-index="Date"><div data-field-index="Date">16-Dec-16</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="757.77" type="number" data-field-index="Close" last=""><div data-field-index="Close">757.77</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="53" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="15-Dec-16" type="text" data-field-index="Date"><div data-field-index="Date">15-Dec-16</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="761" type="number" data-field-index="Close" last=""><div data-field-index="Close">761</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="54" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="14-Dec-16" type="text" data-field-index="Date"><div data-field-index="Date">14-Dec-16</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="768.82" type="number" data-field-index="Close" last=""><div data-field-index="Close">768.82</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="55" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="13-Dec-16" type="text" data-field-index="Date"><div data-field-index="Date">13-Dec-16</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="774.34" type="number" data-field-index="Close" last=""><div data-field-index="Close">774.34</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="56" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="12-Dec-16" type="text" data-field-index="Date"><div data-field-index="Date">12-Dec-16</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="760.12" type="number" data-field-index="Close" last=""><div data-field-index="Close">760.12</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="57" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="9-Dec-16" type="text" data-field-index="Date"><div data-field-index="Date">9-Dec-16</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="768.66" type="number" data-field-index="Close" last=""><div data-field-index="Close">768.66</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="58" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="8-Dec-16" type="text" data-field-index="Date"><div data-field-index="Date">8-Dec-16</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="767.33" type="number" data-field-index="Close" last=""><div data-field-index="Close">767.33</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="59" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="7-Dec-16" type="text" data-field-index="Date"><div data-field-index="Date">7-Dec-16</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="770.42" type="number" data-field-index="Close" last=""><div data-field-index="Close">770.42</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="60" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="6-Dec-16" type="text" data-field-index="Date"><div data-field-index="Date">6-Dec-16</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="764.72" type="number" data-field-index="Close" last=""><div data-field-index="Close">764.72</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="61" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="5-Dec-16" type="text" data-field-index="Date"><div data-field-index="Date">5-Dec-16</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="759.36" type="number" data-field-index="Close" last=""><div data-field-index="Close">759.36</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="62" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="2-Dec-16" type="text" data-field-index="Date"><div data-field-index="Date">2-Dec-16</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="740.34" type="number" data-field-index="Close" last=""><div data-field-index="Close">740.34</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="63" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="1-Dec-16" type="text" data-field-index="Date"><div data-field-index="Date">1-Dec-16</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="743.65" type="number" data-field-index="Close" last=""><div data-field-index="Close">743.65</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="64" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="30-Nov-16" type="text" data-field-index="Date"><div data-field-index="Date">30-Nov-16</div></zg-cell><zg-cell aria-colindex="2" role="gridcell" value="750.57" type="number" data-field-index="Close" last=""><div data-field-index="Close">750.57</div></zg-cell><zg-row-details hidden=""></zg-row-details></zg-row></zg-body><zg-foot id="mainfoot" slot="gridfoot"></zg-foot><zg-editor-row id="bodyeditorrow" slot="bodyeditorrow"></zg-editor-row><zg-selector-mask slot="bodygridselectmask"></zg-selector-mask><zg-focus slot="bodygridfocus" hidden=""></zg-focus><zg-no-data class="default" slot="gridnodata"><span class="default-message">There are no records to display.</span></zg-no-data></zg-table><zg-header slot="header"><zg-caption slot="caption"><div id="zg-caption-user-text">Amazon Stock Data</div><zg-button data-focusable="" slot="tool" action="removerecord" hidden="" role="button" dir="ltr" aria-label="removerecord" tabindex="-1"><zg-icon name="removerecord" slot="icon" internal-caption=""><svg id="svg--512383" 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-icon slot="zgicon" name="unchecked" internal-caption=""><svg id="svg--811755" slot="icon" viewBox="0 0 24 24"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><zg-search slot="tool"><zg-button slot="button" action="search" data-focusable="" role="button" dir="ltr" aria-label="search" tabindex="-1"><zg-icon name="search" slot="icon" internal-caption=""><svg id="svg--413331" slot="icon" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked" internal-caption=""><svg id="svg--986536" slot="icon" viewBox="0 0 24 24"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><input slot="input" type="search" placeholder="Search" aria-label="Search" tabindex="-1"></zg-search><zg-button data-focusable="" slot="tool" action="fixedmenu" hidden="" role="button" dir="ltr" aria-label="fixedmenu" aria-haspopup="true" tabindex="-1"><zg-icon name="fixedmenu" slot="icon" internal-caption=""><svg id="svg--405199" slot="icon" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"></path><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked" internal-caption=""><svg id="svg--283447" slot="icon" viewBox="0 0 24 24"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><zg-button data-focusable="" slot="tool" action="menu" hidden="" role="button" dir="ltr" aria-label="menu" aria-haspopup="true" tabindex="-1"><zg-icon name="menu" slot="icon" internal-caption=""><svg id="svg--61537" slot="icon" viewBox="0 0 24 24"><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"></path></svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked" internal-caption=""><svg id="svg--237548" slot="icon" viewBox="0 0 24 24"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button></zg-caption><zg-control-bar slot="control-bar" hidden=""><zg-separator slot="cardaction" hidden="" id="afterselect"></zg-separator><zg-button data-focusable="" slot="action" action="createrecord" hidden="" role="button" dir="ltr" aria-label="createrecord" tabindex="-1"><zg-icon name="createrecord" slot="icon"><svg id="svg--589970" 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-icon slot="zgicon" name="unchecked"><svg id="svg--265842" slot="icon" viewBox="0 0 24 24"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><zg-separator slot="action" hidden="" id="beforeedit"></zg-separator><zg-text id="label" slot="action">Edit Records (Batch):</zg-text><zg-button data-focusable="" slot="action" action="batchedit" hidden="" role="button" dir="ltr" aria-label="batchedit" tabindex="-1"><zg-icon name="batchedit" slot="icon"><svg id="svg--813759" 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-icon slot="zgicon" name="unchecked"><svg id="svg--543707" slot="icon" viewBox="0 0 24 24"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><zg-button data-focusable="" slot="action" action="batcheditsave" hidden="" role="button" dir="ltr" aria-label="batcheditsave" tabindex="-1"><zg-icon name="batcheditsave" slot="icon"><svg id="svg--407286" slot="icon" viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path></svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked"><svg id="svg--683260" slot="icon" viewBox="0 0 24 24"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><zg-button data-focusable="" slot="action" action="batcheditcancel" hidden="" role="button" dir="ltr" aria-label="batcheditcancel" tabindex="-1"><zg-icon name="batcheditcancel" slot="icon"><svg id="svg--476762" slot="icon" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked"><svg id="svg--629781" slot="icon" viewBox="0 0 24 24"><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"></path></svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><zg-text id="unsaved" slot="message" hidden=""></zg-text></zg-control-bar></zg-header><zg-colgroup id="gridcolgroup" slot="gridcolgroup"><zg-column type="text" index="Date"></zg-column><zg-column type="number" index="Close"></zg-column></zg-colgroup><zg-footer slot="footer"></zg-footer><zg-status slot="status"></zg-status><zg-tooltip slot="tooltip" role="tooltip" hidden=""></zg-tooltip><zg-cell-overflow slot="celloverflow" hidden=""></zg-cell-overflow><zg-filter-menu slot="filtermenu" hidden="" role="menu"></zg-filter-menu><zg-frozen-colgroup id="zing-grid-freeze-style-left" slot="freeze-left-columns" hidden=""></zg-frozen-colgroup><zg-frozen-colgroup id="zing-grid-freeze-style-right" slot="freeze-right-columns" hidden=""></zg-frozen-colgroup><zg-batch-edit id="zing-grid-batch-edit" slot="batch-edit" hidden=""></zg-batch-edit><zg-load-mask slot="loadmask" hidden=""></zg-load-mask><zg-dialog internal="" slot="dialogInternal"></zg-dialog><zg-watermark slot="watermark"></zg-watermark><zg-menu id="columnMenu" hidden="" role="menu"><zg-menu-item role="menuitemcheckbox" tabindex="-1"><zg-button action="checkbox" role="button" hastext="" dir="ltr"><zg-icon hidden="" name="checkbox" slot="icon"><svg id="svg--434706" slot="icon" viewBox="0 0 24 24"></svg></zg-icon><zg-checkbox checked="" slot="checkbox" action="checkbox"><zg-icon slot="zgicon" name="checked"><svg id="svg--792969" slot="icon" viewBox="0 0 24 24"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></svg></zg-icon></zg-checkbox><span class="label" slot="label">Date</span></zg-button></zg-menu-item><zg-menu-item role="menuitemcheckbox" tabindex="-1"><zg-button action="checkbox" role="button" hastext="" dir="ltr"><zg-icon hidden="" name="checkbox" slot="icon"><svg id="svg--721484" slot="icon" viewBox="0 0 24 24"></svg></zg-icon><zg-checkbox checked="" slot="checkbox" action="checkbox"><zg-icon slot="zgicon" name="checked"><svg id="svg--209365" slot="icon" viewBox="0 0 24 24"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"></path></svg></zg-icon></zg-checkbox><span class="label" slot="label">Close</span></zg-button></zg-menu-item></zg-menu></zing-grid>
 
    </body>
</html>
.zg-body {background:#e6e6e6;}

zing-grid {
	overflow: hidden;
}
// No JS code

Related Docs

Interested in this demo? Modify it to your needs in ZingSoft Studio, our testing sandbox. It's free to sign up, and you can come back and edit at any time!

Edit in Studio

Related Docs

Demo Gallery