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
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
There are no records to display.

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: 1133px;
    }
  </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 caption="Amazon Stock Data" server-rendered="true" search="" height="1000" src="https://cdn.zinggrid.com/datasets/amzn-stock-data.json" tabindex="0" viewport="desktop">
    <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" tooltip="Remove Record" tooltip-left="" aria-label="Remove Record" tabindex="-1"><zg-icon name="removerecord" slot="icon" internal-caption=""><svg id="svg--548557" 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--911060" 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></zg-button><zg-search slot="tool"><zg-button slot="button" action="search" data-focusable="" role="button" dir="ltr" tooltip="Open Search" tooltip-left="" aria-label="Open Search" tabindex="-1"><zg-icon name="search" slot="icon" internal-caption=""><svg id="svg--972529" 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--694516" 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></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" tooltip="Open Menu" tooltip-left="" aria-label="Open Menu" aria-haspopup="true" tabindex="-1"><zg-icon name="fixedmenu" slot="icon" internal-caption=""><svg id="svg--974554" 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--933326" 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></zg-button><zg-button data-focusable="" slot="tool" action="menu" hidden="" role="button" dir="ltr" tooltip="Open Column Menu" tooltip-left="" aria-label="Open Column Menu" aria-haspopup="true" tabindex="-1"><zg-icon name="menu" slot="icon" internal-caption=""><svg id="svg--134207" 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--2412" 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></zg-button>
      </zg-caption><zg-control-bar slot="control-bar" hidden=""><zg-button data-focusable="" slot="action" action="createrecord" hidden="" role="button" dir="ltr" tooltip="Insert Record" tooltip-right="" aria-label="Insert Record" tabindex="-1"><zg-icon name="createrecord" slot="icon"><svg id="svg--961677" 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--125296" 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></zg-button><zg-button data-focusable="" slot="action" action="batchedit" hidden="" role="button" dir="ltr" tooltip="Open Batch Edit" tooltip-right="" aria-label="Open Batch Edit" tabindex="-1"><zg-icon name="batchedit" slot="icon"><svg id="svg--934318" 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--642708" 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></zg-button><zg-button data-focusable="" slot="action" action="batcheditsave" hidden="" role="button" dir="ltr" tooltip="Save Batch Edit" tooltip-right="" aria-label="Save Batch Edit" tabindex="-1"><zg-icon name="batcheditsave" slot="icon"><svg id="svg--569929" 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--5508" 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></zg-button><zg-button data-focusable="" slot="action" action="batcheditcancel" hidden="" role="button" dir="ltr" tooltip="Cancel Batch Edit" tooltip-right="" aria-label="Cancel Batch Edit" tabindex="-1"><zg-icon name="batcheditcancel" slot="icon"><svg id="svg--511257" 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--383294" 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></zg-button><span id="unsaved" slot="message" hidden=""></span></zg-control-bar></zg-header><zg-head id="lefthead" slot="lefthead" role="rowgroup"></zg-head><zg-body id="leftbody" slot="leftbody" role="rowgroup"></zg-body><zg-foot id="leftfoot" slot="leftfoot"></zg-foot><zg-colgroup id="leftcolgroup" slot="leftcolgroup"></zg-colgroup><zg-colgroup id="gridcolgroup" slot="gridcolgroup"><zg-column type="text" index="Date" min-calculated-header-width="68" min-calculated-width="107.203125" style="width: 699px;"></zg-column><zg-column type="number" index="Close" min-calculated-header-width="72" min-calculated-width="81.609375" style="width: 674px;"></zg-column></zg-colgroup><zg-colgroup id="rightcolgroup" slot="rightcolgroup"></zg-colgroup><zg-head id="mainhead" slot="gridhead" role="rowgroup"><zg-row aria-rowindex="1" role="row"><zg-head-cell cellindex="0" role="columnheader" aria-colindex="1" data-focusable="" data-field-index="Date" first="" title="" depth="1" type="text" style="left: 0px; width: 699px; line-height: 40px; height: 40px; position: absolute;" class=""><zg-icon class="zg-head-icon"></zg-icon><zg-icon class="zg-head-details-icon"></zg-icon>
          <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" title="" depth="1" type="number" style="left: 699px; width: 674px; line-height: 40px; height: 40px; position: absolute;" class=""><zg-icon class="zg-head-icon"></zg-icon><zg-icon class="zg-head-details-icon"></zg-icon>
          <div data-field-index="Close"><span>Close</span></div>
        </zg-head-cell></zg-row></zg-head><zg-body id="mainbody" slot="gridbody" role="rowgroup" viewport="desktop"><zg-row aria-rowindex="2" role="row"><zg-cell aria-colindex="1" role="gridcell" value="2-Mar-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">848.91</div>
        </zg-cell></zg-row><zg-row aria-rowindex="3" role="row"><zg-cell aria-colindex="1" role="gridcell" value="1-Mar-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">853.08</div>
        </zg-cell></zg-row><zg-row aria-rowindex="4" role="row"><zg-cell aria-colindex="1" role="gridcell" value="28-Feb-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">845.04</div>
        </zg-cell></zg-row><zg-row aria-rowindex="5" role="row"><zg-cell aria-colindex="1" role="gridcell" value="27-Feb-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">848.64</div>
        </zg-cell></zg-row><zg-row aria-rowindex="6" role="row"><zg-cell aria-colindex="1" role="gridcell" value="24-Feb-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">845.24</div>
        </zg-cell></zg-row><zg-row aria-rowindex="7" role="row"><zg-cell aria-colindex="1" role="gridcell" value="23-Feb-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">852.19</div>
        </zg-cell></zg-row><zg-row aria-rowindex="8" role="row"><zg-cell aria-colindex="1" role="gridcell" value="22-Feb-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">855.61</div>
        </zg-cell></zg-row><zg-row aria-rowindex="9" role="row"><zg-cell aria-colindex="1" role="gridcell" value="21-Feb-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">856.44</div>
        </zg-cell></zg-row><zg-row aria-rowindex="10" role="row"><zg-cell aria-colindex="1" role="gridcell" value="17-Feb-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">845.07</div>
        </zg-cell></zg-row><zg-row aria-rowindex="11" role="row"><zg-cell aria-colindex="1" role="gridcell" value="16-Feb-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">844.14</div>
        </zg-cell></zg-row><zg-row aria-rowindex="12" role="row"><zg-cell aria-colindex="1" role="gridcell" value="15-Feb-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">842.7</div>
        </zg-cell></zg-row><zg-row aria-rowindex="13" role="row"><zg-cell aria-colindex="1" role="gridcell" value="14-Feb-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">836.39</div>
        </zg-cell></zg-row><zg-row aria-rowindex="14" role="row"><zg-cell aria-colindex="1" role="gridcell" value="13-Feb-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">836.53</div>
        </zg-cell></zg-row><zg-row aria-rowindex="15" role="row"><zg-cell aria-colindex="1" role="gridcell" value="10-Feb-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">827.46</div>
        </zg-cell></zg-row><zg-row aria-rowindex="16" role="row"><zg-cell aria-colindex="1" role="gridcell" value="9-Feb-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">821.36</div>
        </zg-cell></zg-row><zg-row aria-rowindex="17" role="row"><zg-cell aria-colindex="1" role="gridcell" value="8-Feb-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">819.71</div>
        </zg-cell></zg-row><zg-row aria-rowindex="18" role="row"><zg-cell aria-colindex="1" role="gridcell" value="7-Feb-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">812.5</div>
        </zg-cell></zg-row><zg-row aria-rowindex="19" role="row"><zg-cell aria-colindex="1" role="gridcell" value="6-Feb-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">807.64</div>
        </zg-cell></zg-row><zg-row aria-rowindex="20" role="row"><zg-cell aria-colindex="1" role="gridcell" value="3-Feb-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">810.2</div>
        </zg-cell></zg-row><zg-row aria-rowindex="21" role="row"><zg-cell aria-colindex="1" role="gridcell" value="2-Feb-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">839.95</div>
        </zg-cell></zg-row><zg-row aria-rowindex="22" role="row"><zg-cell aria-colindex="1" role="gridcell" value="1-Feb-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">832.35</div>
        </zg-cell></zg-row><zg-row aria-rowindex="23" role="row"><zg-cell aria-colindex="1" role="gridcell" value="31-Jan-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">823.48</div>
        </zg-cell></zg-row><zg-row aria-rowindex="24" role="row"><zg-cell aria-colindex="1" role="gridcell" value="30-Jan-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">830.38</div>
        </zg-cell></zg-row><zg-row aria-rowindex="25" role="row"><zg-cell aria-colindex="1" role="gridcell" value="27-Jan-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">835.77</div>
        </zg-cell></zg-row><zg-row aria-rowindex="26" role="row"><zg-cell aria-colindex="1" role="gridcell" value="26-Jan-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">839.15</div>
        </zg-cell></zg-row><zg-row aria-rowindex="27" role="row"><zg-cell aria-colindex="1" role="gridcell" value="25-Jan-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">836.52</div>
        </zg-cell></zg-row><zg-row aria-rowindex="28" role="row"><zg-cell aria-colindex="1" role="gridcell" value="24-Jan-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">822.44</div>
        </zg-cell></zg-row><zg-row aria-rowindex="29" role="row"><zg-cell aria-colindex="1" role="gridcell" value="23-Jan-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">817.88</div>
        </zg-cell></zg-row><zg-row aria-rowindex="30" role="row"><zg-cell aria-colindex="1" role="gridcell" value="20-Jan-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">808.33</div>
        </zg-cell></zg-row><zg-row aria-rowindex="31" role="row"><zg-cell aria-colindex="1" role="gridcell" value="19-Jan-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">809.04</div>
        </zg-cell></zg-row><zg-row aria-rowindex="32" role="row"><zg-cell aria-colindex="1" role="gridcell" value="18-Jan-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">807.48</div>
        </zg-cell></zg-row><zg-row aria-rowindex="33" role="row"><zg-cell aria-colindex="1" role="gridcell" value="17-Jan-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">809.72</div>
        </zg-cell></zg-row><zg-row aria-rowindex="34" role="row"><zg-cell aria-colindex="1" role="gridcell" value="13-Jan-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">817.14</div>
        </zg-cell></zg-row><zg-row aria-rowindex="35" role="row"><zg-cell aria-colindex="1" role="gridcell" value="12-Jan-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">813.64</div>
        </zg-cell></zg-row><zg-row aria-rowindex="36" role="row"><zg-cell aria-colindex="1" role="gridcell" value="11-Jan-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">799.02</div>
        </zg-cell></zg-row><zg-row aria-rowindex="37" role="row"><zg-cell aria-colindex="1" role="gridcell" value="10-Jan-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">795.9</div>
        </zg-cell></zg-row><zg-row aria-rowindex="38" role="row"><zg-cell aria-colindex="1" role="gridcell" value="9-Jan-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">796.92</div>
        </zg-cell></zg-row><zg-row aria-rowindex="39" role="row"><zg-cell aria-colindex="1" role="gridcell" value="6-Jan-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">795.99</div>
        </zg-cell></zg-row><zg-row aria-rowindex="40" role="row"><zg-cell aria-colindex="1" role="gridcell" value="5-Jan-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">780.45</div>
        </zg-cell></zg-row><zg-row aria-rowindex="41" role="row"><zg-cell aria-colindex="1" role="gridcell" value="4-Jan-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">757.18</div>
        </zg-cell></zg-row><zg-row aria-rowindex="42" role="row"><zg-cell aria-colindex="1" role="gridcell" value="3-Jan-17" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">753.67</div>
        </zg-cell></zg-row><zg-row aria-rowindex="43" role="row"><zg-cell aria-colindex="1" role="gridcell" value="30-Dec-16" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">749.87</div>
        </zg-cell></zg-row><zg-row aria-rowindex="44" role="row"><zg-cell aria-colindex="1" role="gridcell" value="29-Dec-16" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">765.15</div>
        </zg-cell></zg-row><zg-row aria-rowindex="45" role="row"><zg-cell aria-colindex="1" role="gridcell" value="28-Dec-16" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">772.13</div>
        </zg-cell></zg-row><zg-row aria-rowindex="46" role="row"><zg-cell aria-colindex="1" role="gridcell" value="27-Dec-16" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">771.4</div>
        </zg-cell></zg-row><zg-row aria-rowindex="47" role="row"><zg-cell aria-colindex="1" role="gridcell" value="23-Dec-16" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">760.59</div>
        </zg-cell></zg-row><zg-row aria-rowindex="48" role="row"><zg-cell aria-colindex="1" role="gridcell" value="22-Dec-16" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">766.34</div>
        </zg-cell></zg-row><zg-row aria-rowindex="49" role="row"><zg-cell aria-colindex="1" role="gridcell" value="21-Dec-16" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">770.6</div>
        </zg-cell></zg-row><zg-row aria-rowindex="50" role="row"><zg-cell aria-colindex="1" role="gridcell" value="20-Dec-16" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">771.22</div>
        </zg-cell></zg-row><zg-row aria-rowindex="51" role="row"><zg-cell aria-colindex="1" role="gridcell" value="19-Dec-16" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">766</div>
        </zg-cell></zg-row><zg-row aria-rowindex="52" role="row"><zg-cell aria-colindex="1" role="gridcell" value="16-Dec-16" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">757.77</div>
        </zg-cell></zg-row><zg-row aria-rowindex="53" role="row"><zg-cell aria-colindex="1" role="gridcell" value="15-Dec-16" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">761</div>
        </zg-cell></zg-row><zg-row aria-rowindex="54" role="row"><zg-cell aria-colindex="1" role="gridcell" value="14-Dec-16" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">768.82</div>
        </zg-cell></zg-row><zg-row aria-rowindex="55" role="row"><zg-cell aria-colindex="1" role="gridcell" value="13-Dec-16" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">774.34</div>
        </zg-cell></zg-row><zg-row aria-rowindex="56" role="row"><zg-cell aria-colindex="1" role="gridcell" value="12-Dec-16" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">760.12</div>
        </zg-cell></zg-row><zg-row aria-rowindex="57" role="row"><zg-cell aria-colindex="1" role="gridcell" value="9-Dec-16" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">768.66</div>
        </zg-cell></zg-row><zg-row aria-rowindex="58" role="row"><zg-cell aria-colindex="1" role="gridcell" value="8-Dec-16" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">767.33</div>
        </zg-cell></zg-row><zg-row aria-rowindex="59" role="row"><zg-cell aria-colindex="1" role="gridcell" value="7-Dec-16" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">770.42</div>
        </zg-cell></zg-row><zg-row aria-rowindex="60" role="row"><zg-cell aria-colindex="1" role="gridcell" value="6-Dec-16" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">764.72</div>
        </zg-cell></zg-row><zg-row aria-rowindex="61" role="row"><zg-cell aria-colindex="1" role="gridcell" value="5-Dec-16" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">759.36</div>
        </zg-cell></zg-row><zg-row aria-rowindex="62" role="row"><zg-cell aria-colindex="1" role="gridcell" value="2-Dec-16" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">740.34</div>
        </zg-cell></zg-row><zg-row aria-rowindex="63" role="row"><zg-cell aria-colindex="1" role="gridcell" value="1-Dec-16" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">743.65</div>
        </zg-cell></zg-row><zg-row aria-rowindex="64" role="row"><zg-cell aria-colindex="1" role="gridcell" value="30-Nov-16" type="text" data-field-index="Date" first="">
          <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">
          <div data-field-index="Close">750.57</div>
        </zg-cell></zg-row></zg-body><zg-foot id="mainfoot" slot="gridfoot"></zg-foot><zg-head id="righthead" slot="righthead" role="rowgroup"></zg-head><zg-body id="rightbody" slot="rightbody" role="rowgroup"></zg-body><zg-foot id="rightfoot" slot="rightfoot"></zg-foot><zg-footer slot="footer"></zg-footer><zg-status slot="status"></zg-status><zg-tooltip slot="tooltip" role="tooltip" hidden=""></zg-tooltip><zg-editor-row id="lefteditorrow" slot="lefteditorrow"></zg-editor-row><zg-editor-row id="bodyeditorrow" slot="bodyeditorrow"></zg-editor-row><zg-editor-row id="righteditorrow" slot="righteditorrow"></zg-editor-row><zg-editor-row id="leftheadeditorrow" slot="leftheadeditorrow"></zg-editor-row><zg-editor-row id="mainheadeditorrow" slot="mainheadeditorrow"></zg-editor-row><zg-editor-row id="rightheadeditorrow" slot="rightheadeditorrow"></zg-editor-row><zg-editor-row id="leftfooteditorrow" slot="leftfooteditorrow"></zg-editor-row><zg-editor-row id="mainfooteditorrow" slot="mainfooteditorrow"></zg-editor-row><zg-editor-row id="rightfooteditorrow" slot="rightfooteditorrow"></zg-editor-row><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-load-mask default-load-mask="" hidden=""></zg-load-mask><zg-focus area="header" slot="leftheadfocus"></zg-focus><zg-focus area="header" slot="mainheadfocus"></zg-focus><zg-focus area="header" slot="rightheadfocus"></zg-focus><zg-selector-mask slot="leftgridselectmask"></zg-selector-mask><zg-focus slot="leftgridfocus" hidden=""></zg-focus><zg-selector-mask slot="bodygridselectmask"></zg-selector-mask><zg-focus slot="bodygridfocus" hidden=""></zg-focus><zg-selector-mask slot="rightgridselectmask"></zg-selector-mask><zg-focus slot="rightgridfocus" hidden=""></zg-focus><zg-focus area="footer" slot="leftfootfocus"></zg-focus><zg-focus area="footer" slot="mainfootfocus"></zg-focus><zg-focus area="footer" slot="rightfootfocus"></zg-focus><zg-no-data class="default" slot="gridnodata"><span class="default-message">There are no records to display.</span></zg-no-data><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--974281" 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--732903" 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--926339" 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--298938" 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 caption="Amazon Stock Data" server-rendered="true" search="" height="1000" src="https://cdn.zinggrid.com/datasets/amzn-stock-data.json" tabindex="0" viewport="desktop">
      <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" tooltip="Remove Record" tooltip-left="" aria-label="Remove Record" tabindex="-1"><zg-icon name="removerecord" slot="icon" internal-caption=""><svg id="svg--548557" 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--911060" 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></zg-button><zg-search slot="tool"><zg-button slot="button" action="search" data-focusable="" role="button" dir="ltr" tooltip="Open Search" tooltip-left="" aria-label="Open Search" tabindex="-1"><zg-icon name="search" slot="icon" internal-caption=""><svg id="svg--972529" 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--694516" 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></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" tooltip="Open Menu" tooltip-left="" aria-label="Open Menu" aria-haspopup="true" tabindex="-1"><zg-icon name="fixedmenu" slot="icon" internal-caption=""><svg id="svg--974554" 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--933326" 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></zg-button><zg-button data-focusable="" slot="tool" action="menu" hidden="" role="button" dir="ltr" tooltip="Open Column Menu" tooltip-left="" aria-label="Open Column Menu" aria-haspopup="true" tabindex="-1"><zg-icon name="menu" slot="icon" internal-caption=""><svg id="svg--134207" 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--2412" 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></zg-button></zg-caption><zg-control-bar slot="control-bar" hidden=""><zg-button data-focusable="" slot="action" action="createrecord" hidden="" role="button" dir="ltr" tooltip="Insert Record" tooltip-right="" aria-label="Insert Record" tabindex="-1"><zg-icon name="createrecord" slot="icon"><svg id="svg--961677" 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--125296" 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></zg-button><zg-button data-focusable="" slot="action" action="batchedit" hidden="" role="button" dir="ltr" tooltip="Open Batch Edit" tooltip-right="" aria-label="Open Batch Edit" tabindex="-1"><zg-icon name="batchedit" slot="icon"><svg id="svg--934318" 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--642708" 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></zg-button><zg-button data-focusable="" slot="action" action="batcheditsave" hidden="" role="button" dir="ltr" tooltip="Save Batch Edit" tooltip-right="" aria-label="Save Batch Edit" tabindex="-1"><zg-icon name="batcheditsave" slot="icon"><svg id="svg--569929" 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--5508" 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></zg-button><zg-button data-focusable="" slot="action" action="batcheditcancel" hidden="" role="button" dir="ltr" tooltip="Cancel Batch Edit" tooltip-right="" aria-label="Cancel Batch Edit" tabindex="-1"><zg-icon name="batcheditcancel" slot="icon"><svg id="svg--511257" 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--383294" 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></zg-button><span id="unsaved" slot="message" hidden=""></span></zg-control-bar></zg-header><zg-head id="lefthead" slot="lefthead" role="rowgroup"></zg-head><zg-body id="leftbody" slot="leftbody" role="rowgroup"></zg-body><zg-foot id="leftfoot" slot="leftfoot"></zg-foot><zg-colgroup id="leftcolgroup" slot="leftcolgroup"></zg-colgroup><zg-colgroup id="gridcolgroup" slot="gridcolgroup"><zg-column type="text" index="Date" min-calculated-header-width="68" min-calculated-width="107.203125" style="width: 699px;"></zg-column><zg-column type="number" index="Close" min-calculated-header-width="72" min-calculated-width="81.609375" style="width: 674px;"></zg-column></zg-colgroup><zg-colgroup id="rightcolgroup" slot="rightcolgroup"></zg-colgroup><zg-head id="mainhead" slot="gridhead" role="rowgroup"><zg-row aria-rowindex="1" role="row"><zg-head-cell cellindex="0" role="columnheader" aria-colindex="1" data-focusable="" data-field-index="Date" first="" title="" depth="1" type="text" style="left: 0px; width: 699px; line-height: 40px; height: 40px; position: absolute;" class=""><zg-icon class="zg-head-icon"></zg-icon><zg-icon class="zg-head-details-icon"></zg-icon><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" title="" depth="1" type="number" style="left: 699px; width: 674px; line-height: 40px; height: 40px; position: absolute;" class=""><zg-icon class="zg-head-icon"></zg-icon><zg-icon class="zg-head-details-icon"></zg-icon><div data-field-index="Close"><span>Close</span></div></zg-head-cell></zg-row></zg-head><zg-body id="mainbody" slot="gridbody" role="rowgroup" viewport="desktop"><zg-row aria-rowindex="2" role="row"><zg-cell aria-colindex="1" role="gridcell" value="2-Mar-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">848.91</div></zg-cell></zg-row><zg-row aria-rowindex="3" role="row"><zg-cell aria-colindex="1" role="gridcell" value="1-Mar-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">853.08</div></zg-cell></zg-row><zg-row aria-rowindex="4" role="row"><zg-cell aria-colindex="1" role="gridcell" value="28-Feb-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">845.04</div></zg-cell></zg-row><zg-row aria-rowindex="5" role="row"><zg-cell aria-colindex="1" role="gridcell" value="27-Feb-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">848.64</div></zg-cell></zg-row><zg-row aria-rowindex="6" role="row"><zg-cell aria-colindex="1" role="gridcell" value="24-Feb-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">845.24</div></zg-cell></zg-row><zg-row aria-rowindex="7" role="row"><zg-cell aria-colindex="1" role="gridcell" value="23-Feb-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">852.19</div></zg-cell></zg-row><zg-row aria-rowindex="8" role="row"><zg-cell aria-colindex="1" role="gridcell" value="22-Feb-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">855.61</div></zg-cell></zg-row><zg-row aria-rowindex="9" role="row"><zg-cell aria-colindex="1" role="gridcell" value="21-Feb-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">856.44</div></zg-cell></zg-row><zg-row aria-rowindex="10" role="row"><zg-cell aria-colindex="1" role="gridcell" value="17-Feb-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">845.07</div></zg-cell></zg-row><zg-row aria-rowindex="11" role="row"><zg-cell aria-colindex="1" role="gridcell" value="16-Feb-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">844.14</div></zg-cell></zg-row><zg-row aria-rowindex="12" role="row"><zg-cell aria-colindex="1" role="gridcell" value="15-Feb-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">842.7</div></zg-cell></zg-row><zg-row aria-rowindex="13" role="row"><zg-cell aria-colindex="1" role="gridcell" value="14-Feb-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">836.39</div></zg-cell></zg-row><zg-row aria-rowindex="14" role="row"><zg-cell aria-colindex="1" role="gridcell" value="13-Feb-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">836.53</div></zg-cell></zg-row><zg-row aria-rowindex="15" role="row"><zg-cell aria-colindex="1" role="gridcell" value="10-Feb-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">827.46</div></zg-cell></zg-row><zg-row aria-rowindex="16" role="row"><zg-cell aria-colindex="1" role="gridcell" value="9-Feb-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">821.36</div></zg-cell></zg-row><zg-row aria-rowindex="17" role="row"><zg-cell aria-colindex="1" role="gridcell" value="8-Feb-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">819.71</div></zg-cell></zg-row><zg-row aria-rowindex="18" role="row"><zg-cell aria-colindex="1" role="gridcell" value="7-Feb-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">812.5</div></zg-cell></zg-row><zg-row aria-rowindex="19" role="row"><zg-cell aria-colindex="1" role="gridcell" value="6-Feb-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">807.64</div></zg-cell></zg-row><zg-row aria-rowindex="20" role="row"><zg-cell aria-colindex="1" role="gridcell" value="3-Feb-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">810.2</div></zg-cell></zg-row><zg-row aria-rowindex="21" role="row"><zg-cell aria-colindex="1" role="gridcell" value="2-Feb-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">839.95</div></zg-cell></zg-row><zg-row aria-rowindex="22" role="row"><zg-cell aria-colindex="1" role="gridcell" value="1-Feb-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">832.35</div></zg-cell></zg-row><zg-row aria-rowindex="23" role="row"><zg-cell aria-colindex="1" role="gridcell" value="31-Jan-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">823.48</div></zg-cell></zg-row><zg-row aria-rowindex="24" role="row"><zg-cell aria-colindex="1" role="gridcell" value="30-Jan-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">830.38</div></zg-cell></zg-row><zg-row aria-rowindex="25" role="row"><zg-cell aria-colindex="1" role="gridcell" value="27-Jan-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">835.77</div></zg-cell></zg-row><zg-row aria-rowindex="26" role="row"><zg-cell aria-colindex="1" role="gridcell" value="26-Jan-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">839.15</div></zg-cell></zg-row><zg-row aria-rowindex="27" role="row"><zg-cell aria-colindex="1" role="gridcell" value="25-Jan-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">836.52</div></zg-cell></zg-row><zg-row aria-rowindex="28" role="row"><zg-cell aria-colindex="1" role="gridcell" value="24-Jan-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">822.44</div></zg-cell></zg-row><zg-row aria-rowindex="29" role="row"><zg-cell aria-colindex="1" role="gridcell" value="23-Jan-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">817.88</div></zg-cell></zg-row><zg-row aria-rowindex="30" role="row"><zg-cell aria-colindex="1" role="gridcell" value="20-Jan-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">808.33</div></zg-cell></zg-row><zg-row aria-rowindex="31" role="row"><zg-cell aria-colindex="1" role="gridcell" value="19-Jan-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">809.04</div></zg-cell></zg-row><zg-row aria-rowindex="32" role="row"><zg-cell aria-colindex="1" role="gridcell" value="18-Jan-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">807.48</div></zg-cell></zg-row><zg-row aria-rowindex="33" role="row"><zg-cell aria-colindex="1" role="gridcell" value="17-Jan-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">809.72</div></zg-cell></zg-row><zg-row aria-rowindex="34" role="row"><zg-cell aria-colindex="1" role="gridcell" value="13-Jan-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">817.14</div></zg-cell></zg-row><zg-row aria-rowindex="35" role="row"><zg-cell aria-colindex="1" role="gridcell" value="12-Jan-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">813.64</div></zg-cell></zg-row><zg-row aria-rowindex="36" role="row"><zg-cell aria-colindex="1" role="gridcell" value="11-Jan-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">799.02</div></zg-cell></zg-row><zg-row aria-rowindex="37" role="row"><zg-cell aria-colindex="1" role="gridcell" value="10-Jan-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">795.9</div></zg-cell></zg-row><zg-row aria-rowindex="38" role="row"><zg-cell aria-colindex="1" role="gridcell" value="9-Jan-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">796.92</div></zg-cell></zg-row><zg-row aria-rowindex="39" role="row"><zg-cell aria-colindex="1" role="gridcell" value="6-Jan-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">795.99</div></zg-cell></zg-row><zg-row aria-rowindex="40" role="row"><zg-cell aria-colindex="1" role="gridcell" value="5-Jan-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">780.45</div></zg-cell></zg-row><zg-row aria-rowindex="41" role="row"><zg-cell aria-colindex="1" role="gridcell" value="4-Jan-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">757.18</div></zg-cell></zg-row><zg-row aria-rowindex="42" role="row"><zg-cell aria-colindex="1" role="gridcell" value="3-Jan-17" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">753.67</div></zg-cell></zg-row><zg-row aria-rowindex="43" role="row"><zg-cell aria-colindex="1" role="gridcell" value="30-Dec-16" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">749.87</div></zg-cell></zg-row><zg-row aria-rowindex="44" role="row"><zg-cell aria-colindex="1" role="gridcell" value="29-Dec-16" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">765.15</div></zg-cell></zg-row><zg-row aria-rowindex="45" role="row"><zg-cell aria-colindex="1" role="gridcell" value="28-Dec-16" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">772.13</div></zg-cell></zg-row><zg-row aria-rowindex="46" role="row"><zg-cell aria-colindex="1" role="gridcell" value="27-Dec-16" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">771.4</div></zg-cell></zg-row><zg-row aria-rowindex="47" role="row"><zg-cell aria-colindex="1" role="gridcell" value="23-Dec-16" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">760.59</div></zg-cell></zg-row><zg-row aria-rowindex="48" role="row"><zg-cell aria-colindex="1" role="gridcell" value="22-Dec-16" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">766.34</div></zg-cell></zg-row><zg-row aria-rowindex="49" role="row"><zg-cell aria-colindex="1" role="gridcell" value="21-Dec-16" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">770.6</div></zg-cell></zg-row><zg-row aria-rowindex="50" role="row"><zg-cell aria-colindex="1" role="gridcell" value="20-Dec-16" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">771.22</div></zg-cell></zg-row><zg-row aria-rowindex="51" role="row"><zg-cell aria-colindex="1" role="gridcell" value="19-Dec-16" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">766</div></zg-cell></zg-row><zg-row aria-rowindex="52" role="row"><zg-cell aria-colindex="1" role="gridcell" value="16-Dec-16" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">757.77</div></zg-cell></zg-row><zg-row aria-rowindex="53" role="row"><zg-cell aria-colindex="1" role="gridcell" value="15-Dec-16" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">761</div></zg-cell></zg-row><zg-row aria-rowindex="54" role="row"><zg-cell aria-colindex="1" role="gridcell" value="14-Dec-16" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">768.82</div></zg-cell></zg-row><zg-row aria-rowindex="55" role="row"><zg-cell aria-colindex="1" role="gridcell" value="13-Dec-16" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">774.34</div></zg-cell></zg-row><zg-row aria-rowindex="56" role="row"><zg-cell aria-colindex="1" role="gridcell" value="12-Dec-16" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">760.12</div></zg-cell></zg-row><zg-row aria-rowindex="57" role="row"><zg-cell aria-colindex="1" role="gridcell" value="9-Dec-16" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">768.66</div></zg-cell></zg-row><zg-row aria-rowindex="58" role="row"><zg-cell aria-colindex="1" role="gridcell" value="8-Dec-16" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">767.33</div></zg-cell></zg-row><zg-row aria-rowindex="59" role="row"><zg-cell aria-colindex="1" role="gridcell" value="7-Dec-16" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">770.42</div></zg-cell></zg-row><zg-row aria-rowindex="60" role="row"><zg-cell aria-colindex="1" role="gridcell" value="6-Dec-16" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">764.72</div></zg-cell></zg-row><zg-row aria-rowindex="61" role="row"><zg-cell aria-colindex="1" role="gridcell" value="5-Dec-16" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">759.36</div></zg-cell></zg-row><zg-row aria-rowindex="62" role="row"><zg-cell aria-colindex="1" role="gridcell" value="2-Dec-16" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">740.34</div></zg-cell></zg-row><zg-row aria-rowindex="63" role="row"><zg-cell aria-colindex="1" role="gridcell" value="1-Dec-16" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">743.65</div></zg-cell></zg-row><zg-row aria-rowindex="64" role="row"><zg-cell aria-colindex="1" role="gridcell" value="30-Nov-16" type="text" data-field-index="Date" first=""><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"><div data-field-index="Close">750.57</div></zg-cell></zg-row></zg-body><zg-foot id="mainfoot" slot="gridfoot"></zg-foot><zg-head id="righthead" slot="righthead" role="rowgroup"></zg-head><zg-body id="rightbody" slot="rightbody" role="rowgroup"></zg-body><zg-foot id="rightfoot" slot="rightfoot"></zg-foot><zg-footer slot="footer"></zg-footer><zg-status slot="status"></zg-status><zg-tooltip slot="tooltip" role="tooltip" hidden=""></zg-tooltip><zg-editor-row id="lefteditorrow" slot="lefteditorrow"></zg-editor-row><zg-editor-row id="bodyeditorrow" slot="bodyeditorrow"></zg-editor-row><zg-editor-row id="righteditorrow" slot="righteditorrow"></zg-editor-row><zg-editor-row id="leftheadeditorrow" slot="leftheadeditorrow"></zg-editor-row><zg-editor-row id="mainheadeditorrow" slot="mainheadeditorrow"></zg-editor-row><zg-editor-row id="rightheadeditorrow" slot="rightheadeditorrow"></zg-editor-row><zg-editor-row id="leftfooteditorrow" slot="leftfooteditorrow"></zg-editor-row><zg-editor-row id="mainfooteditorrow" slot="mainfooteditorrow"></zg-editor-row><zg-editor-row id="rightfooteditorrow" slot="rightfooteditorrow"></zg-editor-row><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-load-mask default-load-mask="" hidden=""></zg-load-mask><zg-focus area="header" slot="leftheadfocus"></zg-focus><zg-focus area="header" slot="mainheadfocus"></zg-focus><zg-focus area="header" slot="rightheadfocus"></zg-focus><zg-selector-mask slot="leftgridselectmask"></zg-selector-mask><zg-focus slot="leftgridfocus" hidden=""></zg-focus><zg-selector-mask slot="bodygridselectmask"></zg-selector-mask><zg-focus slot="bodygridfocus" hidden=""></zg-focus><zg-selector-mask slot="rightgridselectmask"></zg-selector-mask><zg-focus slot="rightgridfocus" hidden=""></zg-focus><zg-focus area="footer" slot="leftfootfocus"></zg-focus><zg-focus area="footer" slot="mainfootfocus"></zg-focus><zg-focus area="footer" slot="rightfootfocus"></zg-focus><zg-no-data class="default" slot="gridnodata"><span class="default-message">There are no records to display.</span></zg-no-data><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--974281" 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--732903" 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--926339" 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--298938" 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;
}

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