Demos Back to Docs

Server-Side Rendering

109 of 124
Easily add server-side rendering to a previously rendered grid with the server-render attribute.
Result Full HTML CSS JS
Edit Download
Amazon Stock Data
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

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: 1154px;
    }
  </style>
</head>

<body class="zg-body">

  <!-- refresh page content when displaying this iframe -->
  <button onclick="window.location.reload()">Reload Iframe</button>


  <!--
      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" role="grid" viewport="desktop-large" style="cursor: default;">
    <zg-colgroup slot="gridcolgroup">
      <zg-column type="text" index="Date" min-column-width="109" style="width: 1284px;"></zg-column>
      <zg-column type="number" index="Close" min-column-width="83" style="width: 1258px;"></zg-column>
    </zg-colgroup>
    <zg-header slot="header">
      <zg-caption slot="caption">
        <div id="zg-caption-user-text">Amazon Stock Data</div>
        <zg-button slot="tool" action="removerecord" hidden="" tabindex="0">
          <zg-icon name="removerecord" slot="icon" internal-caption=""><svg id="svg--349415" 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>
        <zg-search slot="tool">
          <zg-button slot="button" action="search" tabindex="0">
            <zg-icon name="search" slot="icon" internal-caption=""><svg id="svg--537894" 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-checkbox><span class="label" slot="label"></span></zg-button><input slot="input" type="search" placeholder="Search"></zg-search>
        <zg-button slot="tool" action="fixedmenu" tabindex="0" hidden="">
          <zg-icon name="fixedmenu" slot="icon" internal-caption=""><svg id="svg--166920" 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-checkbox><span class="label" slot="label"></span></zg-button>
        <zg-button slot="tool" action="menu" tabindex="0" hidden="">
          <zg-icon name="menu" slot="icon" internal-caption=""><svg id="svg--542139" 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-checkbox><span class="label" slot="label"></span></zg-button>
      </zg-caption>
      <zg-control-bar slot="control-bar" hidden="">
        <zg-button slot="action" action="createrecord" hidden="" tooltip="Insert Record" tooltip-right="" tabindex="0">
          <zg-icon name="createrecord" slot="icon"><svg id="svg--53076" 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" role="rowgroup">
      <zg-row role="row">
        <zg-head-cell cellindex="0" role="rowheader" class="" depth="1" type="text" style="left: 0px; line-height: 40px; position: absolute; width: 1284px; height: 40px;" title="Date">
          <zg-icon class="zg-head-icon"></zg-icon>
          <div data-field-index="Date"><span>Date</span></div>
        </zg-head-cell>
        <zg-head-cell cellindex="1" role="rowheader" class="" depth="1" type="number" style="left: 1284px; line-height: 40px; position: absolute; width: 1258px; height: 40px;" title="Close">
          <zg-icon class="zg-head-icon"></zg-icon>
          <div data-field-index="Close"><span>Close</span></div>
        </zg-head-cell>
      </zg-row>
    </zg-head>
    <zg-body slot="gridbody" role="rowgroup">
      <zg-row role="row">
        <zg-cell role="gridcell" value="2-Mar-17" data-field-index="Date" type="text">
          <div data-field-index="Date">2-Mar-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="848.91" data-field-index="Close" type="number">
          <div data-field-index="Close">848.91</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="1-Mar-17" data-field-index="Date" type="text">
          <div data-field-index="Date">1-Mar-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="853.08" data-field-index="Close" type="number">
          <div data-field-index="Close">853.08</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="28-Feb-17" data-field-index="Date" type="text">
          <div data-field-index="Date">28-Feb-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="845.04" data-field-index="Close" type="number">
          <div data-field-index="Close">845.04</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="27-Feb-17" data-field-index="Date" type="text">
          <div data-field-index="Date">27-Feb-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="848.64" data-field-index="Close" type="number">
          <div data-field-index="Close">848.64</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="24-Feb-17" data-field-index="Date" type="text">
          <div data-field-index="Date">24-Feb-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="845.24" data-field-index="Close" type="number">
          <div data-field-index="Close">845.24</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="23-Feb-17" data-field-index="Date" type="text">
          <div data-field-index="Date">23-Feb-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="852.19" data-field-index="Close" type="number">
          <div data-field-index="Close">852.19</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="22-Feb-17" data-field-index="Date" type="text">
          <div data-field-index="Date">22-Feb-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="855.61" data-field-index="Close" type="number">
          <div data-field-index="Close">855.61</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="21-Feb-17" data-field-index="Date" type="text">
          <div data-field-index="Date">21-Feb-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="856.44" data-field-index="Close" type="number">
          <div data-field-index="Close">856.44</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="17-Feb-17" data-field-index="Date" type="text">
          <div data-field-index="Date">17-Feb-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="845.07" data-field-index="Close" type="number">
          <div data-field-index="Close">845.07</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="16-Feb-17" data-field-index="Date" type="text">
          <div data-field-index="Date">16-Feb-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="844.14" data-field-index="Close" type="number">
          <div data-field-index="Close">844.14</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="15-Feb-17" data-field-index="Date" type="text">
          <div data-field-index="Date">15-Feb-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="842.7" data-field-index="Close" type="number">
          <div data-field-index="Close">842.7</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="14-Feb-17" data-field-index="Date" type="text">
          <div data-field-index="Date">14-Feb-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="836.39" data-field-index="Close" type="number">
          <div data-field-index="Close">836.39</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="13-Feb-17" data-field-index="Date" type="text">
          <div data-field-index="Date">13-Feb-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="836.53" data-field-index="Close" type="number">
          <div data-field-index="Close">836.53</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="10-Feb-17" data-field-index="Date" type="text">
          <div data-field-index="Date">10-Feb-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="827.46" data-field-index="Close" type="number">
          <div data-field-index="Close">827.46</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="9-Feb-17" data-field-index="Date" type="text">
          <div data-field-index="Date">9-Feb-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="821.36" data-field-index="Close" type="number">
          <div data-field-index="Close">821.36</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="8-Feb-17" data-field-index="Date" type="text">
          <div data-field-index="Date">8-Feb-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="819.71" data-field-index="Close" type="number">
          <div data-field-index="Close">819.71</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="7-Feb-17" data-field-index="Date" type="text">
          <div data-field-index="Date">7-Feb-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="812.5" data-field-index="Close" type="number">
          <div data-field-index="Close">812.5</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="6-Feb-17" data-field-index="Date" type="text">
          <div data-field-index="Date">6-Feb-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="807.64" data-field-index="Close" type="number">
          <div data-field-index="Close">807.64</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="3-Feb-17" data-field-index="Date" type="text">
          <div data-field-index="Date">3-Feb-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="810.2" data-field-index="Close" type="number">
          <div data-field-index="Close">810.2</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="2-Feb-17" data-field-index="Date" type="text">
          <div data-field-index="Date">2-Feb-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="839.95" data-field-index="Close" type="number">
          <div data-field-index="Close">839.95</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="1-Feb-17" data-field-index="Date" type="text">
          <div data-field-index="Date">1-Feb-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="832.35" data-field-index="Close" type="number">
          <div data-field-index="Close">832.35</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="31-Jan-17" data-field-index="Date" type="text">
          <div data-field-index="Date">31-Jan-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="823.48" data-field-index="Close" type="number">
          <div data-field-index="Close">823.48</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="30-Jan-17" data-field-index="Date" type="text">
          <div data-field-index="Date">30-Jan-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="830.38" data-field-index="Close" type="number">
          <div data-field-index="Close">830.38</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="27-Jan-17" data-field-index="Date" type="text">
          <div data-field-index="Date">27-Jan-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="835.77" data-field-index="Close" type="number">
          <div data-field-index="Close">835.77</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="26-Jan-17" data-field-index="Date" type="text">
          <div data-field-index="Date">26-Jan-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="839.15" data-field-index="Close" type="number">
          <div data-field-index="Close">839.15</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="25-Jan-17" data-field-index="Date" type="text">
          <div data-field-index="Date">25-Jan-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="836.52" data-field-index="Close" type="number">
          <div data-field-index="Close">836.52</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="24-Jan-17" data-field-index="Date" type="text">
          <div data-field-index="Date">24-Jan-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="822.44" data-field-index="Close" type="number">
          <div data-field-index="Close">822.44</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="23-Jan-17" data-field-index="Date" type="text">
          <div data-field-index="Date">23-Jan-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="817.88" data-field-index="Close" type="number">
          <div data-field-index="Close">817.88</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="20-Jan-17" data-field-index="Date" type="text">
          <div data-field-index="Date">20-Jan-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="808.33" data-field-index="Close" type="number">
          <div data-field-index="Close">808.33</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="19-Jan-17" data-field-index="Date" type="text">
          <div data-field-index="Date">19-Jan-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="809.04" data-field-index="Close" type="number">
          <div data-field-index="Close">809.04</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="18-Jan-17" data-field-index="Date" type="text">
          <div data-field-index="Date">18-Jan-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="807.48" data-field-index="Close" type="number">
          <div data-field-index="Close">807.48</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="17-Jan-17" data-field-index="Date" type="text">
          <div data-field-index="Date">17-Jan-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="809.72" data-field-index="Close" type="number">
          <div data-field-index="Close">809.72</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="13-Jan-17" data-field-index="Date" type="text">
          <div data-field-index="Date">13-Jan-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="817.14" data-field-index="Close" type="number">
          <div data-field-index="Close">817.14</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="12-Jan-17" data-field-index="Date" type="text">
          <div data-field-index="Date">12-Jan-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="813.64" data-field-index="Close" type="number">
          <div data-field-index="Close">813.64</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="11-Jan-17" data-field-index="Date" type="text">
          <div data-field-index="Date">11-Jan-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="799.02" data-field-index="Close" type="number">
          <div data-field-index="Close">799.02</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="10-Jan-17" data-field-index="Date" type="text">
          <div data-field-index="Date">10-Jan-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="795.9" data-field-index="Close" type="number">
          <div data-field-index="Close">795.9</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="9-Jan-17" data-field-index="Date" type="text">
          <div data-field-index="Date">9-Jan-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="796.92" data-field-index="Close" type="number">
          <div data-field-index="Close">796.92</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="6-Jan-17" data-field-index="Date" type="text">
          <div data-field-index="Date">6-Jan-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="795.99" data-field-index="Close" type="number">
          <div data-field-index="Close">795.99</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="5-Jan-17" data-field-index="Date" type="text">
          <div data-field-index="Date">5-Jan-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="780.45" data-field-index="Close" type="number">
          <div data-field-index="Close">780.45</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="4-Jan-17" data-field-index="Date" type="text">
          <div data-field-index="Date">4-Jan-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="757.18" data-field-index="Close" type="number">
          <div data-field-index="Close">757.18</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="3-Jan-17" data-field-index="Date" type="text">
          <div data-field-index="Date">3-Jan-17</div>
        </zg-cell>
        <zg-cell role="gridcell" value="753.67" data-field-index="Close" type="number">
          <div data-field-index="Close">753.67</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="30-Dec-16" data-field-index="Date" type="text">
          <div data-field-index="Date">30-Dec-16</div>
        </zg-cell>
        <zg-cell role="gridcell" value="749.87" data-field-index="Close" type="number">
          <div data-field-index="Close">749.87</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="29-Dec-16" data-field-index="Date" type="text">
          <div data-field-index="Date">29-Dec-16</div>
        </zg-cell>
        <zg-cell role="gridcell" value="765.15" data-field-index="Close" type="number">
          <div data-field-index="Close">765.15</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="28-Dec-16" data-field-index="Date" type="text">
          <div data-field-index="Date">28-Dec-16</div>
        </zg-cell>
        <zg-cell role="gridcell" value="772.13" data-field-index="Close" type="number">
          <div data-field-index="Close">772.13</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="27-Dec-16" data-field-index="Date" type="text">
          <div data-field-index="Date">27-Dec-16</div>
        </zg-cell>
        <zg-cell role="gridcell" value="771.4" data-field-index="Close" type="number">
          <div data-field-index="Close">771.4</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="23-Dec-16" data-field-index="Date" type="text">
          <div data-field-index="Date">23-Dec-16</div>
        </zg-cell>
        <zg-cell role="gridcell" value="760.59" data-field-index="Close" type="number">
          <div data-field-index="Close">760.59</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="22-Dec-16" data-field-index="Date" type="text">
          <div data-field-index="Date">22-Dec-16</div>
        </zg-cell>
        <zg-cell role="gridcell" value="766.34" data-field-index="Close" type="number">
          <div data-field-index="Close">766.34</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="21-Dec-16" data-field-index="Date" type="text">
          <div data-field-index="Date">21-Dec-16</div>
        </zg-cell>
        <zg-cell role="gridcell" value="770.6" data-field-index="Close" type="number">
          <div data-field-index="Close">770.6</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="20-Dec-16" data-field-index="Date" type="text">
          <div data-field-index="Date">20-Dec-16</div>
        </zg-cell>
        <zg-cell role="gridcell" value="771.22" data-field-index="Close" type="number">
          <div data-field-index="Close">771.22</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="19-Dec-16" data-field-index="Date" type="text">
          <div data-field-index="Date">19-Dec-16</div>
        </zg-cell>
        <zg-cell role="gridcell" value="766" data-field-index="Close" type="number">
          <div data-field-index="Close">766</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="16-Dec-16" data-field-index="Date" type="text">
          <div data-field-index="Date">16-Dec-16</div>
        </zg-cell>
        <zg-cell role="gridcell" value="757.77" data-field-index="Close" type="number">
          <div data-field-index="Close">757.77</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="15-Dec-16" data-field-index="Date" type="text">
          <div data-field-index="Date">15-Dec-16</div>
        </zg-cell>
        <zg-cell role="gridcell" value="761" data-field-index="Close" type="number">
          <div data-field-index="Close">761</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="14-Dec-16" data-field-index="Date" type="text">
          <div data-field-index="Date">14-Dec-16</div>
        </zg-cell>
        <zg-cell role="gridcell" value="768.82" data-field-index="Close" type="number">
          <div data-field-index="Close">768.82</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="13-Dec-16" data-field-index="Date" type="text">
          <div data-field-index="Date">13-Dec-16</div>
        </zg-cell>
        <zg-cell role="gridcell" value="774.34" data-field-index="Close" type="number">
          <div data-field-index="Close">774.34</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="12-Dec-16" data-field-index="Date" type="text">
          <div data-field-index="Date">12-Dec-16</div>
        </zg-cell>
        <zg-cell role="gridcell" value="760.12" data-field-index="Close" type="number">
          <div data-field-index="Close">760.12</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="9-Dec-16" data-field-index="Date" type="text">
          <div data-field-index="Date">9-Dec-16</div>
        </zg-cell>
        <zg-cell role="gridcell" value="768.66" data-field-index="Close" type="number">
          <div data-field-index="Close">768.66</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="8-Dec-16" data-field-index="Date" type="text">
          <div data-field-index="Date">8-Dec-16</div>
        </zg-cell>
        <zg-cell role="gridcell" value="767.33" data-field-index="Close" type="number">
          <div data-field-index="Close">767.33</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="7-Dec-16" data-field-index="Date" type="text">
          <div data-field-index="Date">7-Dec-16</div>
        </zg-cell>
        <zg-cell role="gridcell" value="770.42" data-field-index="Close" type="number">
          <div data-field-index="Close">770.42</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="6-Dec-16" data-field-index="Date" type="text">
          <div data-field-index="Date">6-Dec-16</div>
        </zg-cell>
        <zg-cell role="gridcell" value="764.72" data-field-index="Close" type="number">
          <div data-field-index="Close">764.72</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="5-Dec-16" data-field-index="Date" type="text">
          <div data-field-index="Date">5-Dec-16</div>
        </zg-cell>
        <zg-cell role="gridcell" value="759.36" data-field-index="Close" type="number">
          <div data-field-index="Close">759.36</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="2-Dec-16" data-field-index="Date" type="text">
          <div data-field-index="Date">2-Dec-16</div>
        </zg-cell>
        <zg-cell role="gridcell" value="740.34" data-field-index="Close" type="number">
          <div data-field-index="Close">740.34</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="1-Dec-16" data-field-index="Date" type="text">
          <div data-field-index="Date">1-Dec-16</div>
        </zg-cell>
        <zg-cell role="gridcell" value="743.65" data-field-index="Close" type="number">
          <div data-field-index="Close">743.65</div>
        </zg-cell>
      </zg-row>
      <zg-row role="row">
        <zg-cell role="gridcell" value="30-Nov-16" data-field-index="Date" type="text">
          <div data-field-index="Date">30-Nov-16</div>
        </zg-cell>
        <zg-cell role="gridcell" value="750.57" data-field-index="Close" type="number">
          <div data-field-index="Close">750.57</div>
        </zg-cell>
      </zg-row>
    </zg-body>
    <zg-dialog internal=""></zg-dialog>
    <zg-foot slot="gridfoot"></zg-foot>
    <zg-footer slot="footer"></zg-footer>
    <zg-editor-row slot="editrow"></zg-editor-row>
    <zg-status></zg-status>
    <zg-load-mask default-load-mask="" hidden=""></zg-load-mask>
    <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--742488" slot="icon" viewBox="0 0 24 24"></svg></zg-icon>
          <zg-checkbox checked="" slot="checkbox" action="checkbox"></zg-checkbox><span class="label" slot="label">Date</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--814770" slot="icon" viewBox="0 0 24 24"></svg></zg-icon>
          <zg-checkbox checked="" slot="checkbox" action="checkbox"></zg-checkbox><span class="label" slot="label">Close</span></zg-button>
      </zg-menu-item>
    </zg-menu>
  </zing-grid>
  <script></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">
    
    <!-- refresh page content when displaying this iframe -->
    <button onclick="window.location.reload()">Reload Iframe</button>


	<!--
      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" role="grid" viewport="desktop-large" style="cursor: default;">
      <zg-colgroup slot="gridcolgroup"><zg-column type="text" index="Date" min-column-width="109" style="width: 1284px;"></zg-column><zg-column type="number" index="Close" min-column-width="83" style="width: 1258px;"></zg-column></zg-colgroup><zg-header slot="header"><zg-caption slot="caption"><div id="zg-caption-user-text">Amazon Stock Data</div><zg-button slot="tool" action="removerecord" hidden="" tabindex="0"><zg-icon name="removerecord" slot="icon" internal-caption=""><svg id="svg--349415" 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><zg-search slot="tool"><zg-button slot="button" action="search" tabindex="0"><zg-icon name="search" slot="icon" internal-caption=""><svg id="svg--537894" 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-checkbox><span class="label" slot="label"></span></zg-button><input slot="input" type="search" placeholder="Search"></zg-search><zg-button slot="tool" action="fixedmenu" tabindex="0" hidden=""><zg-icon name="fixedmenu" slot="icon" internal-caption=""><svg id="svg--166920" 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-checkbox><span class="label" slot="label"></span></zg-button><zg-button slot="tool" action="menu" tabindex="0" hidden=""><zg-icon name="menu" slot="icon" internal-caption=""><svg id="svg--542139" 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-checkbox><span class="label" slot="label"></span></zg-button></zg-caption><zg-control-bar slot="control-bar" hidden=""><zg-button slot="action" action="createrecord" hidden="" tooltip="Insert Record" tooltip-right="" tabindex="0"><zg-icon name="createrecord" slot="icon"><svg id="svg--53076" 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" role="rowgroup"><zg-row role="row"><zg-head-cell cellindex="0" role="rowheader" class="" depth="1" type="text" style="left: 0px; line-height: 40px; position: absolute; width: 1284px; height: 40px;" title="Date"><zg-icon class="zg-head-icon"></zg-icon><div data-field-index="Date"><span>Date</span></div></zg-head-cell><zg-head-cell cellindex="1" role="rowheader" class="" depth="1" type="number" style="left: 1284px; line-height: 40px; position: absolute; width: 1258px; height: 40px;" title="Close"><zg-icon class="zg-head-icon"></zg-icon><div data-field-index="Close"><span>Close</span></div></zg-head-cell></zg-row></zg-head><zg-body slot="gridbody" role="rowgroup"><zg-row role="row"><zg-cell role="gridcell" value="2-Mar-17" data-field-index="Date" type="text"><div data-field-index="Date">2-Mar-17</div></zg-cell><zg-cell role="gridcell" value="848.91" data-field-index="Close" type="number"><div data-field-index="Close">848.91</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="1-Mar-17" data-field-index="Date" type="text"><div data-field-index="Date">1-Mar-17</div></zg-cell><zg-cell role="gridcell" value="853.08" data-field-index="Close" type="number"><div data-field-index="Close">853.08</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="28-Feb-17" data-field-index="Date" type="text"><div data-field-index="Date">28-Feb-17</div></zg-cell><zg-cell role="gridcell" value="845.04" data-field-index="Close" type="number"><div data-field-index="Close">845.04</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="27-Feb-17" data-field-index="Date" type="text"><div data-field-index="Date">27-Feb-17</div></zg-cell><zg-cell role="gridcell" value="848.64" data-field-index="Close" type="number"><div data-field-index="Close">848.64</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="24-Feb-17" data-field-index="Date" type="text"><div data-field-index="Date">24-Feb-17</div></zg-cell><zg-cell role="gridcell" value="845.24" data-field-index="Close" type="number"><div data-field-index="Close">845.24</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="23-Feb-17" data-field-index="Date" type="text"><div data-field-index="Date">23-Feb-17</div></zg-cell><zg-cell role="gridcell" value="852.19" data-field-index="Close" type="number"><div data-field-index="Close">852.19</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="22-Feb-17" data-field-index="Date" type="text"><div data-field-index="Date">22-Feb-17</div></zg-cell><zg-cell role="gridcell" value="855.61" data-field-index="Close" type="number"><div data-field-index="Close">855.61</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="21-Feb-17" data-field-index="Date" type="text"><div data-field-index="Date">21-Feb-17</div></zg-cell><zg-cell role="gridcell" value="856.44" data-field-index="Close" type="number"><div data-field-index="Close">856.44</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="17-Feb-17" data-field-index="Date" type="text"><div data-field-index="Date">17-Feb-17</div></zg-cell><zg-cell role="gridcell" value="845.07" data-field-index="Close" type="number"><div data-field-index="Close">845.07</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="16-Feb-17" data-field-index="Date" type="text"><div data-field-index="Date">16-Feb-17</div></zg-cell><zg-cell role="gridcell" value="844.14" data-field-index="Close" type="number"><div data-field-index="Close">844.14</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="15-Feb-17" data-field-index="Date" type="text"><div data-field-index="Date">15-Feb-17</div></zg-cell><zg-cell role="gridcell" value="842.7" data-field-index="Close" type="number"><div data-field-index="Close">842.7</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="14-Feb-17" data-field-index="Date" type="text"><div data-field-index="Date">14-Feb-17</div></zg-cell><zg-cell role="gridcell" value="836.39" data-field-index="Close" type="number"><div data-field-index="Close">836.39</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="13-Feb-17" data-field-index="Date" type="text"><div data-field-index="Date">13-Feb-17</div></zg-cell><zg-cell role="gridcell" value="836.53" data-field-index="Close" type="number"><div data-field-index="Close">836.53</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="10-Feb-17" data-field-index="Date" type="text"><div data-field-index="Date">10-Feb-17</div></zg-cell><zg-cell role="gridcell" value="827.46" data-field-index="Close" type="number"><div data-field-index="Close">827.46</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="9-Feb-17" data-field-index="Date" type="text"><div data-field-index="Date">9-Feb-17</div></zg-cell><zg-cell role="gridcell" value="821.36" data-field-index="Close" type="number"><div data-field-index="Close">821.36</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="8-Feb-17" data-field-index="Date" type="text"><div data-field-index="Date">8-Feb-17</div></zg-cell><zg-cell role="gridcell" value="819.71" data-field-index="Close" type="number"><div data-field-index="Close">819.71</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="7-Feb-17" data-field-index="Date" type="text"><div data-field-index="Date">7-Feb-17</div></zg-cell><zg-cell role="gridcell" value="812.5" data-field-index="Close" type="number"><div data-field-index="Close">812.5</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="6-Feb-17" data-field-index="Date" type="text"><div data-field-index="Date">6-Feb-17</div></zg-cell><zg-cell role="gridcell" value="807.64" data-field-index="Close" type="number"><div data-field-index="Close">807.64</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="3-Feb-17" data-field-index="Date" type="text"><div data-field-index="Date">3-Feb-17</div></zg-cell><zg-cell role="gridcell" value="810.2" data-field-index="Close" type="number"><div data-field-index="Close">810.2</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="2-Feb-17" data-field-index="Date" type="text"><div data-field-index="Date">2-Feb-17</div></zg-cell><zg-cell role="gridcell" value="839.95" data-field-index="Close" type="number"><div data-field-index="Close">839.95</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="1-Feb-17" data-field-index="Date" type="text"><div data-field-index="Date">1-Feb-17</div></zg-cell><zg-cell role="gridcell" value="832.35" data-field-index="Close" type="number"><div data-field-index="Close">832.35</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="31-Jan-17" data-field-index="Date" type="text"><div data-field-index="Date">31-Jan-17</div></zg-cell><zg-cell role="gridcell" value="823.48" data-field-index="Close" type="number"><div data-field-index="Close">823.48</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="30-Jan-17" data-field-index="Date" type="text"><div data-field-index="Date">30-Jan-17</div></zg-cell><zg-cell role="gridcell" value="830.38" data-field-index="Close" type="number"><div data-field-index="Close">830.38</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="27-Jan-17" data-field-index="Date" type="text"><div data-field-index="Date">27-Jan-17</div></zg-cell><zg-cell role="gridcell" value="835.77" data-field-index="Close" type="number"><div data-field-index="Close">835.77</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="26-Jan-17" data-field-index="Date" type="text"><div data-field-index="Date">26-Jan-17</div></zg-cell><zg-cell role="gridcell" value="839.15" data-field-index="Close" type="number"><div data-field-index="Close">839.15</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="25-Jan-17" data-field-index="Date" type="text"><div data-field-index="Date">25-Jan-17</div></zg-cell><zg-cell role="gridcell" value="836.52" data-field-index="Close" type="number"><div data-field-index="Close">836.52</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="24-Jan-17" data-field-index="Date" type="text"><div data-field-index="Date">24-Jan-17</div></zg-cell><zg-cell role="gridcell" value="822.44" data-field-index="Close" type="number"><div data-field-index="Close">822.44</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="23-Jan-17" data-field-index="Date" type="text"><div data-field-index="Date">23-Jan-17</div></zg-cell><zg-cell role="gridcell" value="817.88" data-field-index="Close" type="number"><div data-field-index="Close">817.88</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="20-Jan-17" data-field-index="Date" type="text"><div data-field-index="Date">20-Jan-17</div></zg-cell><zg-cell role="gridcell" value="808.33" data-field-index="Close" type="number"><div data-field-index="Close">808.33</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="19-Jan-17" data-field-index="Date" type="text"><div data-field-index="Date">19-Jan-17</div></zg-cell><zg-cell role="gridcell" value="809.04" data-field-index="Close" type="number"><div data-field-index="Close">809.04</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="18-Jan-17" data-field-index="Date" type="text"><div data-field-index="Date">18-Jan-17</div></zg-cell><zg-cell role="gridcell" value="807.48" data-field-index="Close" type="number"><div data-field-index="Close">807.48</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="17-Jan-17" data-field-index="Date" type="text"><div data-field-index="Date">17-Jan-17</div></zg-cell><zg-cell role="gridcell" value="809.72" data-field-index="Close" type="number"><div data-field-index="Close">809.72</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="13-Jan-17" data-field-index="Date" type="text"><div data-field-index="Date">13-Jan-17</div></zg-cell><zg-cell role="gridcell" value="817.14" data-field-index="Close" type="number"><div data-field-index="Close">817.14</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="12-Jan-17" data-field-index="Date" type="text"><div data-field-index="Date">12-Jan-17</div></zg-cell><zg-cell role="gridcell" value="813.64" data-field-index="Close" type="number"><div data-field-index="Close">813.64</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="11-Jan-17" data-field-index="Date" type="text"><div data-field-index="Date">11-Jan-17</div></zg-cell><zg-cell role="gridcell" value="799.02" data-field-index="Close" type="number"><div data-field-index="Close">799.02</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="10-Jan-17" data-field-index="Date" type="text"><div data-field-index="Date">10-Jan-17</div></zg-cell><zg-cell role="gridcell" value="795.9" data-field-index="Close" type="number"><div data-field-index="Close">795.9</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="9-Jan-17" data-field-index="Date" type="text"><div data-field-index="Date">9-Jan-17</div></zg-cell><zg-cell role="gridcell" value="796.92" data-field-index="Close" type="number"><div data-field-index="Close">796.92</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="6-Jan-17" data-field-index="Date" type="text"><div data-field-index="Date">6-Jan-17</div></zg-cell><zg-cell role="gridcell" value="795.99" data-field-index="Close" type="number"><div data-field-index="Close">795.99</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="5-Jan-17" data-field-index="Date" type="text"><div data-field-index="Date">5-Jan-17</div></zg-cell><zg-cell role="gridcell" value="780.45" data-field-index="Close" type="number"><div data-field-index="Close">780.45</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="4-Jan-17" data-field-index="Date" type="text"><div data-field-index="Date">4-Jan-17</div></zg-cell><zg-cell role="gridcell" value="757.18" data-field-index="Close" type="number"><div data-field-index="Close">757.18</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="3-Jan-17" data-field-index="Date" type="text"><div data-field-index="Date">3-Jan-17</div></zg-cell><zg-cell role="gridcell" value="753.67" data-field-index="Close" type="number"><div data-field-index="Close">753.67</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="30-Dec-16" data-field-index="Date" type="text"><div data-field-index="Date">30-Dec-16</div></zg-cell><zg-cell role="gridcell" value="749.87" data-field-index="Close" type="number"><div data-field-index="Close">749.87</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="29-Dec-16" data-field-index="Date" type="text"><div data-field-index="Date">29-Dec-16</div></zg-cell><zg-cell role="gridcell" value="765.15" data-field-index="Close" type="number"><div data-field-index="Close">765.15</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="28-Dec-16" data-field-index="Date" type="text"><div data-field-index="Date">28-Dec-16</div></zg-cell><zg-cell role="gridcell" value="772.13" data-field-index="Close" type="number"><div data-field-index="Close">772.13</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="27-Dec-16" data-field-index="Date" type="text"><div data-field-index="Date">27-Dec-16</div></zg-cell><zg-cell role="gridcell" value="771.4" data-field-index="Close" type="number"><div data-field-index="Close">771.4</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="23-Dec-16" data-field-index="Date" type="text"><div data-field-index="Date">23-Dec-16</div></zg-cell><zg-cell role="gridcell" value="760.59" data-field-index="Close" type="number"><div data-field-index="Close">760.59</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="22-Dec-16" data-field-index="Date" type="text"><div data-field-index="Date">22-Dec-16</div></zg-cell><zg-cell role="gridcell" value="766.34" data-field-index="Close" type="number"><div data-field-index="Close">766.34</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="21-Dec-16" data-field-index="Date" type="text"><div data-field-index="Date">21-Dec-16</div></zg-cell><zg-cell role="gridcell" value="770.6" data-field-index="Close" type="number"><div data-field-index="Close">770.6</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="20-Dec-16" data-field-index="Date" type="text"><div data-field-index="Date">20-Dec-16</div></zg-cell><zg-cell role="gridcell" value="771.22" data-field-index="Close" type="number"><div data-field-index="Close">771.22</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="19-Dec-16" data-field-index="Date" type="text"><div data-field-index="Date">19-Dec-16</div></zg-cell><zg-cell role="gridcell" value="766" data-field-index="Close" type="number"><div data-field-index="Close">766</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="16-Dec-16" data-field-index="Date" type="text"><div data-field-index="Date">16-Dec-16</div></zg-cell><zg-cell role="gridcell" value="757.77" data-field-index="Close" type="number"><div data-field-index="Close">757.77</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="15-Dec-16" data-field-index="Date" type="text"><div data-field-index="Date">15-Dec-16</div></zg-cell><zg-cell role="gridcell" value="761" data-field-index="Close" type="number"><div data-field-index="Close">761</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="14-Dec-16" data-field-index="Date" type="text"><div data-field-index="Date">14-Dec-16</div></zg-cell><zg-cell role="gridcell" value="768.82" data-field-index="Close" type="number"><div data-field-index="Close">768.82</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="13-Dec-16" data-field-index="Date" type="text"><div data-field-index="Date">13-Dec-16</div></zg-cell><zg-cell role="gridcell" value="774.34" data-field-index="Close" type="number"><div data-field-index="Close">774.34</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="12-Dec-16" data-field-index="Date" type="text"><div data-field-index="Date">12-Dec-16</div></zg-cell><zg-cell role="gridcell" value="760.12" data-field-index="Close" type="number"><div data-field-index="Close">760.12</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="9-Dec-16" data-field-index="Date" type="text"><div data-field-index="Date">9-Dec-16</div></zg-cell><zg-cell role="gridcell" value="768.66" data-field-index="Close" type="number"><div data-field-index="Close">768.66</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="8-Dec-16" data-field-index="Date" type="text"><div data-field-index="Date">8-Dec-16</div></zg-cell><zg-cell role="gridcell" value="767.33" data-field-index="Close" type="number"><div data-field-index="Close">767.33</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="7-Dec-16" data-field-index="Date" type="text"><div data-field-index="Date">7-Dec-16</div></zg-cell><zg-cell role="gridcell" value="770.42" data-field-index="Close" type="number"><div data-field-index="Close">770.42</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="6-Dec-16" data-field-index="Date" type="text"><div data-field-index="Date">6-Dec-16</div></zg-cell><zg-cell role="gridcell" value="764.72" data-field-index="Close" type="number"><div data-field-index="Close">764.72</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="5-Dec-16" data-field-index="Date" type="text"><div data-field-index="Date">5-Dec-16</div></zg-cell><zg-cell role="gridcell" value="759.36" data-field-index="Close" type="number"><div data-field-index="Close">759.36</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="2-Dec-16" data-field-index="Date" type="text"><div data-field-index="Date">2-Dec-16</div></zg-cell><zg-cell role="gridcell" value="740.34" data-field-index="Close" type="number"><div data-field-index="Close">740.34</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="1-Dec-16" data-field-index="Date" type="text"><div data-field-index="Date">1-Dec-16</div></zg-cell><zg-cell role="gridcell" value="743.65" data-field-index="Close" type="number"><div data-field-index="Close">743.65</div></zg-cell></zg-row><zg-row role="row"><zg-cell role="gridcell" value="30-Nov-16" data-field-index="Date" type="text"><div data-field-index="Date">30-Nov-16</div></zg-cell><zg-cell role="gridcell" value="750.57" data-field-index="Close" type="number"><div data-field-index="Close">750.57</div></zg-cell></zg-row></zg-body><zg-dialog internal=""></zg-dialog><zg-foot slot="gridfoot"></zg-foot><zg-footer slot="footer"></zg-footer><zg-editor-row slot="editrow"></zg-editor-row><zg-status></zg-status><zg-load-mask default-load-mask="" hidden=""></zg-load-mask><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--742488" slot="icon" viewBox="0 0 24 24"></svg></zg-icon><zg-checkbox checked="" slot="checkbox" action="checkbox"></zg-checkbox><span class="label" slot="label">Date</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--814770" slot="icon" viewBox="0 0 24 24"></svg></zg-icon><zg-checkbox checked="" slot="checkbox" action="checkbox"></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;
}

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

Demo Gallery