Server-Side Rendering
Easily add server-side rendering to a previously rendered grid with the
server-render
attribute.Result Full HTML CSS JS
Edit DownloadAmazon 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!