• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <style>
    9.     .zg-body {
    10.       background: #e6e6e6;
    11.     }
    12.  
    13.     zing-grid {
    14.       overflow: hidden;
    15.     }
    16.  
    17.     zing-grid[loading] {
    18.       height: 1093px;
    19.     }
    20.   </style>
    21. </head>
    22.  
    23. <body class="zg-body">
    24.  
    25.   <!--
    26.       Original Markup: 
    27.  
    28.       <zing-grid 
    29.         caption="Amazon Stock Data"
    30.         search
    31.         height="1000"
    32.         src="https://cdn.zinggrid.com/datasets/amzn-stock-data.json">
    33.       </zing-grid> 
    34. 	-->
    35.  
    36.  
    37.   <!-- 
    38. 		SSR renderered markup... 
    39.  
    40. 		ADDED server-rendered="true" attribute for this markup, the
    41. 		rest of the markup is just output from the browser when ZG
    42. 		is rendered.
    43. 	-->
    44.  
    45.   <zing-grid server-rendered caption="Amazon Stock Data" search="" height="1000" src="https://cdn.zinggrid.com/datasets/amzn-stock-data.json" tabindex="0" static-scroll="" role="grid" viewport="desktop" loadingupdate="true" style="--zg-max-height: 1000px; --grid-columns: 1fr 1fr; --zg-head-cell-height: 40px; --grid-rows: repeat(64, max-content) 1fr;">
    46.     <zg-table slot="table" tabindex="-1" height="" aria-rowcount="64" aria-colcount="2" style="visibility: visible;" class=""><zg-head id="mainhead" slot="gridhead" role="rowgroup" internal-height=""><zg-row frozen-top="" aria-rowindex="1" role="row" internal-height=""><zg-head-cell cellindex="0" role="columnheader" aria-colindex="1" data-focusable="" data-field-index="Date" icon-position="left" title="" depth="1" type="text" class="" style="inset-block-start: 0px;"><zg-icon class="zg-head-details-icon" slot="right"></zg-icon><zg-icon class="zg-head-icon" slot="left"></zg-icon><zg-icon class="zg-header-user-icon" slot="left" position="left"></zg-icon><zg-button action="filter" slot="right" class="zg-filter-menu" role="button" internal-cell="" dir="ltr" aria-label="filter"><zg-icon name="filter" slot="icon"><svg id="svg--762163" slot="icon" viewBox="0 0 24 24">
    47.                   <path d="M10.333 16v-1.667h3.334V16h-3.334ZM7 11.833v-1.666h10v1.666H7ZM4.5 7.667V6h15v1.667h-15Z"></path>
    48.                 </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked"><svg id="svg--597401" slot="icon" viewBox="0 0 24 24">
    49.                     <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>
    50.                   </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button>
    51.             <div data-field-index="Date"><span>Date</span></div>
    52.           </zg-head-cell><zg-head-cell cellindex="1" role="columnheader" aria-colindex="2" data-focusable="" data-field-index="Close" icon-position="left" last="" title="" depth="1" type="number" class="" style="inset-block-start: 0px;"><zg-icon class="zg-head-details-icon" slot="right"></zg-icon><zg-icon class="zg-head-icon" slot="left"></zg-icon><zg-icon class="zg-header-user-icon" slot="left" position="left"></zg-icon><zg-button action="filter" slot="right" class="zg-filter-menu" role="button" internal-cell="" dir="ltr" aria-label="filter"><zg-icon name="filter" slot="icon"><svg id="svg--415879" slot="icon" viewBox="0 0 24 24">
    53.                   <path d="M10.333 16v-1.667h3.334V16h-3.334ZM7 11.833v-1.666h10v1.666H7ZM4.5 7.667V6h15v1.667h-15Z"></path>
    54.                 </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked"><svg id="svg--414082" slot="icon" viewBox="0 0 24 24">
    55.                     <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>
    56.                   </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button>
    57.             <div data-field-index="Close"><span>Close</span></div>
    58.           </zg-head-cell><zg-row-details hidden=""></zg-row-details></zg-row></zg-head><zg-body id="mainbody" slot="gridbody" role="rowgroup" viewport="desktop"><zg-row aria-rowindex="2" role="row" internal-height="" internal-top="" class=""><zg-cell aria-colindex="1" role="gridcell" value="2-Mar-17" type="text" data-field-index="Date" class="">
    59.             <div data-field-index="Date">2-Mar-17</div>
    60.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="848.91" type="number" data-field-index="Close" last="" class="">
    61.             <div data-field-index="Close">848.91</div>
    62.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="3" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="1-Mar-17" type="text" data-field-index="Date" class="">
    63.             <div data-field-index="Date">1-Mar-17</div>
    64.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="853.08" type="number" data-field-index="Close" last="" class="">
    65.             <div data-field-index="Close">853.08</div>
    66.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="4" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="28-Feb-17" type="text" data-field-index="Date" class="">
    67.             <div data-field-index="Date">28-Feb-17</div>
    68.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="845.04" type="number" data-field-index="Close" last="" class="">
    69.             <div data-field-index="Close">845.04</div>
    70.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="5" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="27-Feb-17" type="text" data-field-index="Date" class="">
    71.             <div data-field-index="Date">27-Feb-17</div>
    72.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="848.64" type="number" data-field-index="Close" last="" class="">
    73.             <div data-field-index="Close">848.64</div>
    74.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="6" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="24-Feb-17" type="text" data-field-index="Date" class="">
    75.             <div data-field-index="Date">24-Feb-17</div>
    76.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="845.24" type="number" data-field-index="Close" last="" class="">
    77.             <div data-field-index="Close">845.24</div>
    78.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="7" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="23-Feb-17" type="text" data-field-index="Date" class="">
    79.             <div data-field-index="Date">23-Feb-17</div>
    80.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="852.19" type="number" data-field-index="Close" last="" class="">
    81.             <div data-field-index="Close">852.19</div>
    82.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="8" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="22-Feb-17" type="text" data-field-index="Date" class="">
    83.             <div data-field-index="Date">22-Feb-17</div>
    84.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="855.61" type="number" data-field-index="Close" last="" class="">
    85.             <div data-field-index="Close">855.61</div>
    86.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="9" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="21-Feb-17" type="text" data-field-index="Date" class="">
    87.             <div data-field-index="Date">21-Feb-17</div>
    88.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="856.44" type="number" data-field-index="Close" last="" class="">
    89.             <div data-field-index="Close">856.44</div>
    90.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="10" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="17-Feb-17" type="text" data-field-index="Date" class="">
    91.             <div data-field-index="Date">17-Feb-17</div>
    92.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="845.07" type="number" data-field-index="Close" last="" class="">
    93.             <div data-field-index="Close">845.07</div>
    94.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="11" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="16-Feb-17" type="text" data-field-index="Date" class="">
    95.             <div data-field-index="Date">16-Feb-17</div>
    96.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="844.14" type="number" data-field-index="Close" last="" class="">
    97.             <div data-field-index="Close">844.14</div>
    98.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="12" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="15-Feb-17" type="text" data-field-index="Date" class="">
    99.             <div data-field-index="Date">15-Feb-17</div>
    100.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="842.7" type="number" data-field-index="Close" last="">
    101.             <div data-field-index="Close">842.7</div>
    102.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="13" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="14-Feb-17" type="text" data-field-index="Date" class="">
    103.             <div data-field-index="Date">14-Feb-17</div>
    104.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="836.39" type="number" data-field-index="Close" last="">
    105.             <div data-field-index="Close">836.39</div>
    106.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="14" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="13-Feb-17" type="text" data-field-index="Date" class="">
    107.             <div data-field-index="Date">13-Feb-17</div>
    108.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="836.53" type="number" data-field-index="Close" last="">
    109.             <div data-field-index="Close">836.53</div>
    110.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="15" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="10-Feb-17" type="text" data-field-index="Date" class="">
    111.             <div data-field-index="Date">10-Feb-17</div>
    112.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="827.46" type="number" data-field-index="Close" last="">
    113.             <div data-field-index="Close">827.46</div>
    114.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="16" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="9-Feb-17" type="text" data-field-index="Date" class="">
    115.             <div data-field-index="Date">9-Feb-17</div>
    116.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="821.36" type="number" data-field-index="Close" last="">
    117.             <div data-field-index="Close">821.36</div>
    118.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="17" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="8-Feb-17" type="text" data-field-index="Date" class="">
    119.             <div data-field-index="Date">8-Feb-17</div>
    120.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="819.71" type="number" data-field-index="Close" last="">
    121.             <div data-field-index="Close">819.71</div>
    122.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="18" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="7-Feb-17" type="text" data-field-index="Date" class="">
    123.             <div data-field-index="Date">7-Feb-17</div>
    124.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="812.5" type="number" data-field-index="Close" last="">
    125.             <div data-field-index="Close">812.5</div>
    126.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="19" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="6-Feb-17" type="text" data-field-index="Date" class="">
    127.             <div data-field-index="Date">6-Feb-17</div>
    128.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="807.64" type="number" data-field-index="Close" last="">
    129.             <div data-field-index="Close">807.64</div>
    130.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="20" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="3-Feb-17" type="text" data-field-index="Date" class="">
    131.             <div data-field-index="Date">3-Feb-17</div>
    132.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="810.2" type="number" data-field-index="Close" last="">
    133.             <div data-field-index="Close">810.2</div>
    134.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="21" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="2-Feb-17" type="text" data-field-index="Date" class="">
    135.             <div data-field-index="Date">2-Feb-17</div>
    136.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="839.95" type="number" data-field-index="Close" last="">
    137.             <div data-field-index="Close">839.95</div>
    138.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="22" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="1-Feb-17" type="text" data-field-index="Date">
    139.             <div data-field-index="Date">1-Feb-17</div>
    140.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="832.35" type="number" data-field-index="Close" last="">
    141.             <div data-field-index="Close">832.35</div>
    142.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="23" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="31-Jan-17" type="text" data-field-index="Date">
    143.             <div data-field-index="Date">31-Jan-17</div>
    144.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="823.48" type="number" data-field-index="Close" last="">
    145.             <div data-field-index="Close">823.48</div>
    146.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="24" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="30-Jan-17" type="text" data-field-index="Date">
    147.             <div data-field-index="Date">30-Jan-17</div>
    148.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="830.38" type="number" data-field-index="Close" last="">
    149.             <div data-field-index="Close">830.38</div>
    150.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="25" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="27-Jan-17" type="text" data-field-index="Date">
    151.             <div data-field-index="Date">27-Jan-17</div>
    152.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="835.77" type="number" data-field-index="Close" last="">
    153.             <div data-field-index="Close">835.77</div>
    154.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="26" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="26-Jan-17" type="text" data-field-index="Date">
    155.             <div data-field-index="Date">26-Jan-17</div>
    156.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="839.15" type="number" data-field-index="Close" last="">
    157.             <div data-field-index="Close">839.15</div>
    158.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="27" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="25-Jan-17" type="text" data-field-index="Date">
    159.             <div data-field-index="Date">25-Jan-17</div>
    160.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="836.52" type="number" data-field-index="Close" last="">
    161.             <div data-field-index="Close">836.52</div>
    162.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="28" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="24-Jan-17" type="text" data-field-index="Date">
    163.             <div data-field-index="Date">24-Jan-17</div>
    164.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="822.44" type="number" data-field-index="Close" last="">
    165.             <div data-field-index="Close">822.44</div>
    166.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="29" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="23-Jan-17" type="text" data-field-index="Date">
    167.             <div data-field-index="Date">23-Jan-17</div>
    168.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="817.88" type="number" data-field-index="Close" last="">
    169.             <div data-field-index="Close">817.88</div>
    170.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="30" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="20-Jan-17" type="text" data-field-index="Date">
    171.             <div data-field-index="Date">20-Jan-17</div>
    172.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="808.33" type="number" data-field-index="Close" last="">
    173.             <div data-field-index="Close">808.33</div>
    174.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="31" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="19-Jan-17" type="text" data-field-index="Date">
    175.             <div data-field-index="Date">19-Jan-17</div>
    176.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="809.04" type="number" data-field-index="Close" last="">
    177.             <div data-field-index="Close">809.04</div>
    178.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="32" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="18-Jan-17" type="text" data-field-index="Date">
    179.             <div data-field-index="Date">18-Jan-17</div>
    180.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="807.48" type="number" data-field-index="Close" last="">
    181.             <div data-field-index="Close">807.48</div>
    182.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="33" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="17-Jan-17" type="text" data-field-index="Date">
    183.             <div data-field-index="Date">17-Jan-17</div>
    184.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="809.72" type="number" data-field-index="Close" last="">
    185.             <div data-field-index="Close">809.72</div>
    186.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="34" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="13-Jan-17" type="text" data-field-index="Date">
    187.             <div data-field-index="Date">13-Jan-17</div>
    188.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="817.14" type="number" data-field-index="Close" last="">
    189.             <div data-field-index="Close">817.14</div>
    190.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="35" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="12-Jan-17" type="text" data-field-index="Date">
    191.             <div data-field-index="Date">12-Jan-17</div>
    192.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="813.64" type="number" data-field-index="Close" last="">
    193.             <div data-field-index="Close">813.64</div>
    194.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="36" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="11-Jan-17" type="text" data-field-index="Date">
    195.             <div data-field-index="Date">11-Jan-17</div>
    196.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="799.02" type="number" data-field-index="Close" last="">
    197.             <div data-field-index="Close">799.02</div>
    198.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="37" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="10-Jan-17" type="text" data-field-index="Date">
    199.             <div data-field-index="Date">10-Jan-17</div>
    200.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="795.9" type="number" data-field-index="Close" last="">
    201.             <div data-field-index="Close">795.9</div>
    202.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="38" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="9-Jan-17" type="text" data-field-index="Date">
    203.             <div data-field-index="Date">9-Jan-17</div>
    204.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="796.92" type="number" data-field-index="Close" last="">
    205.             <div data-field-index="Close">796.92</div>
    206.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="39" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="6-Jan-17" type="text" data-field-index="Date">
    207.             <div data-field-index="Date">6-Jan-17</div>
    208.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="795.99" type="number" data-field-index="Close" last="">
    209.             <div data-field-index="Close">795.99</div>
    210.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="40" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="5-Jan-17" type="text" data-field-index="Date">
    211.             <div data-field-index="Date">5-Jan-17</div>
    212.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="780.45" type="number" data-field-index="Close" last="">
    213.             <div data-field-index="Close">780.45</div>
    214.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="41" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="4-Jan-17" type="text" data-field-index="Date">
    215.             <div data-field-index="Date">4-Jan-17</div>
    216.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="757.18" type="number" data-field-index="Close" last="">
    217.             <div data-field-index="Close">757.18</div>
    218.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="42" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="3-Jan-17" type="text" data-field-index="Date">
    219.             <div data-field-index="Date">3-Jan-17</div>
    220.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="753.67" type="number" data-field-index="Close" last="">
    221.             <div data-field-index="Close">753.67</div>
    222.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="43" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="30-Dec-16" type="text" data-field-index="Date">
    223.             <div data-field-index="Date">30-Dec-16</div>
    224.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="749.87" type="number" data-field-index="Close" last="">
    225.             <div data-field-index="Close">749.87</div>
    226.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="44" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="29-Dec-16" type="text" data-field-index="Date">
    227.             <div data-field-index="Date">29-Dec-16</div>
    228.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="765.15" type="number" data-field-index="Close" last="">
    229.             <div data-field-index="Close">765.15</div>
    230.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="45" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="28-Dec-16" type="text" data-field-index="Date">
    231.             <div data-field-index="Date">28-Dec-16</div>
    232.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="772.13" type="number" data-field-index="Close" last="">
    233.             <div data-field-index="Close">772.13</div>
    234.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="46" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="27-Dec-16" type="text" data-field-index="Date">
    235.             <div data-field-index="Date">27-Dec-16</div>
    236.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="771.4" type="number" data-field-index="Close" last="">
    237.             <div data-field-index="Close">771.4</div>
    238.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="47" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="23-Dec-16" type="text" data-field-index="Date">
    239.             <div data-field-index="Date">23-Dec-16</div>
    240.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="760.59" type="number" data-field-index="Close" last="">
    241.             <div data-field-index="Close">760.59</div>
    242.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="48" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="22-Dec-16" type="text" data-field-index="Date">
    243.             <div data-field-index="Date">22-Dec-16</div>
    244.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="766.34" type="number" data-field-index="Close" last="">
    245.             <div data-field-index="Close">766.34</div>
    246.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="49" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="21-Dec-16" type="text" data-field-index="Date">
    247.             <div data-field-index="Date">21-Dec-16</div>
    248.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="770.6" type="number" data-field-index="Close" last="">
    249.             <div data-field-index="Close">770.6</div>
    250.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="50" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="20-Dec-16" type="text" data-field-index="Date">
    251.             <div data-field-index="Date">20-Dec-16</div>
    252.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="771.22" type="number" data-field-index="Close" last="">
    253.             <div data-field-index="Close">771.22</div>
    254.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="51" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="19-Dec-16" type="text" data-field-index="Date">
    255.             <div data-field-index="Date">19-Dec-16</div>
    256.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="766" type="number" data-field-index="Close" last="">
    257.             <div data-field-index="Close">766</div>
    258.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="52" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="16-Dec-16" type="text" data-field-index="Date">
    259.             <div data-field-index="Date">16-Dec-16</div>
    260.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="757.77" type="number" data-field-index="Close" last="">
    261.             <div data-field-index="Close">757.77</div>
    262.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="53" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="15-Dec-16" type="text" data-field-index="Date">
    263.             <div data-field-index="Date">15-Dec-16</div>
    264.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="761" type="number" data-field-index="Close" last="">
    265.             <div data-field-index="Close">761</div>
    266.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="54" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="14-Dec-16" type="text" data-field-index="Date">
    267.             <div data-field-index="Date">14-Dec-16</div>
    268.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="768.82" type="number" data-field-index="Close" last="">
    269.             <div data-field-index="Close">768.82</div>
    270.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="55" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="13-Dec-16" type="text" data-field-index="Date">
    271.             <div data-field-index="Date">13-Dec-16</div>
    272.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="774.34" type="number" data-field-index="Close" last="">
    273.             <div data-field-index="Close">774.34</div>
    274.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="56" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="12-Dec-16" type="text" data-field-index="Date">
    275.             <div data-field-index="Date">12-Dec-16</div>
    276.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="760.12" type="number" data-field-index="Close" last="">
    277.             <div data-field-index="Close">760.12</div>
    278.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="57" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="9-Dec-16" type="text" data-field-index="Date">
    279.             <div data-field-index="Date">9-Dec-16</div>
    280.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="768.66" type="number" data-field-index="Close" last="">
    281.             <div data-field-index="Close">768.66</div>
    282.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="58" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="8-Dec-16" type="text" data-field-index="Date">
    283.             <div data-field-index="Date">8-Dec-16</div>
    284.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="767.33" type="number" data-field-index="Close" last="">
    285.             <div data-field-index="Close">767.33</div>
    286.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="59" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="7-Dec-16" type="text" data-field-index="Date">
    287.             <div data-field-index="Date">7-Dec-16</div>
    288.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="770.42" type="number" data-field-index="Close" last="">
    289.             <div data-field-index="Close">770.42</div>
    290.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="60" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="6-Dec-16" type="text" data-field-index="Date">
    291.             <div data-field-index="Date">6-Dec-16</div>
    292.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="764.72" type="number" data-field-index="Close" last="">
    293.             <div data-field-index="Close">764.72</div>
    294.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="61" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="5-Dec-16" type="text" data-field-index="Date">
    295.             <div data-field-index="Date">5-Dec-16</div>
    296.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="759.36" type="number" data-field-index="Close" last="">
    297.             <div data-field-index="Close">759.36</div>
    298.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="62" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="2-Dec-16" type="text" data-field-index="Date">
    299.             <div data-field-index="Date">2-Dec-16</div>
    300.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="740.34" type="number" data-field-index="Close" last="">
    301.             <div data-field-index="Close">740.34</div>
    302.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="63" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="1-Dec-16" type="text" data-field-index="Date">
    303.             <div data-field-index="Date">1-Dec-16</div>
    304.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="743.65" type="number" data-field-index="Close" last="">
    305.             <div data-field-index="Close">743.65</div>
    306.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="64" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="30-Nov-16" type="text" data-field-index="Date">
    307.             <div data-field-index="Date">30-Nov-16</div>
    308.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="750.57" type="number" data-field-index="Close" last="">
    309.             <div data-field-index="Close">750.57</div>
    310.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row></zg-body><zg-foot id="mainfoot" slot="gridfoot"></zg-foot><zg-editor-row id="bodyeditorrow" slot="bodyeditorrow"></zg-editor-row><zg-selector-mask slot="bodygridselectmask"></zg-selector-mask><zg-focus slot="bodygridfocus" hidden=""></zg-focus><zg-no-data class="default" slot="gridnodata"><span class="default-message">There are no records to display.</span></zg-no-data></zg-table><zg-header slot="header"><zg-caption slot="caption">
    311.         <div id="zg-caption-user-text">Amazon Stock Data</div><zg-button data-focusable="" slot="tool" action="removerecord" hidden="" role="button" dir="ltr" aria-label="removerecord" tabindex="-1"><zg-icon name="removerecord" slot="icon" internal-caption=""><svg id="svg--512383" slot="icon" viewBox="0 0 24 24">
    312.               <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>
    313.             </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked" internal-caption=""><svg id="svg--811755" slot="icon" viewBox="0 0 24 24">
    314.                 <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>
    315.               </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><zg-search slot="tool"><zg-button slot="button" action="search" data-focusable="" role="button" dir="ltr" aria-label="search" tabindex="-1"><zg-icon name="search" slot="icon" internal-caption=""><svg id="svg--413331" slot="icon" viewBox="0 0 24 24">
    316.                 <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>
    317.                 <path d="M0 0h24v24H0z" fill="none"></path>
    318.               </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked" internal-caption=""><svg id="svg--986536" slot="icon" viewBox="0 0 24 24">
    319.                   <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>
    320.                 </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><input slot="input" type="search" placeholder="Search" aria-label="Search" tabindex="-1"></zg-search><zg-button data-focusable="" slot="tool" action="fixedmenu" hidden="" role="button" dir="ltr" aria-label="fixedmenu" aria-haspopup="true" tabindex="-1"><zg-icon name="fixedmenu" slot="icon" internal-caption=""><svg id="svg--405199" slot="icon" viewBox="0 0 24 24">
    321.               <path d="M0 0h24v24H0z" fill="none"></path>
    322.               <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
    323.             </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked" internal-caption=""><svg id="svg--283447" slot="icon" viewBox="0 0 24 24">
    324.                 <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>
    325.               </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><zg-button data-focusable="" slot="tool" action="menu" hidden="" role="button" dir="ltr" aria-label="menu" aria-haspopup="true" tabindex="-1"><zg-icon name="menu" slot="icon" internal-caption=""><svg id="svg--61537" slot="icon" viewBox="0 0 24 24">
    326.               <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>
    327.             </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked" internal-caption=""><svg id="svg--237548" slot="icon" viewBox="0 0 24 24">
    328.                 <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>
    329.               </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button>
    330.       </zg-caption><zg-control-bar slot="control-bar" hidden=""><zg-separator slot="cardaction" hidden="" id="afterselect"></zg-separator><zg-button data-focusable="" slot="action" action="createrecord" hidden="" role="button" dir="ltr" aria-label="createrecord" tabindex="-1"><zg-icon name="createrecord" slot="icon"><svg id="svg--589970" slot="icon" viewBox="0 0 24 24">
    331.               <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>
    332.             </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked"><svg id="svg--265842" slot="icon" viewBox="0 0 24 24">
    333.                 <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>
    334.               </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><zg-separator slot="action" hidden="" id="beforeedit"></zg-separator><zg-text id="label" slot="action">Edit Records (Batch):</zg-text><zg-button data-focusable="" slot="action" action="batchedit" hidden="" role="button" dir="ltr" aria-label="batchedit" tabindex="-1"><zg-icon name="batchedit" slot="icon"><svg id="svg--813759" slot="icon" viewBox="0 0 24 24">
    335.               <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>
    336.             </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked"><svg id="svg--543707" slot="icon" viewBox="0 0 24 24">
    337.                 <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>
    338.               </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><zg-button data-focusable="" slot="action" action="batcheditsave" hidden="" role="button" dir="ltr" aria-label="batcheditsave" tabindex="-1"><zg-icon name="batcheditsave" slot="icon"><svg id="svg--407286" slot="icon" viewBox="0 0 24 24">
    339.               <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
    340.             </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked"><svg id="svg--683260" slot="icon" viewBox="0 0 24 24">
    341.                 <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>
    342.               </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><zg-button data-focusable="" slot="action" action="batcheditcancel" hidden="" role="button" dir="ltr" aria-label="batcheditcancel" tabindex="-1"><zg-icon name="batcheditcancel" slot="icon"><svg id="svg--476762" slot="icon" viewBox="0 0 24 24">
    343.               <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>
    344.             </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked"><svg id="svg--629781" slot="icon" viewBox="0 0 24 24">
    345.                 <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>
    346.               </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><zg-text id="unsaved" slot="message" hidden=""></zg-text></zg-control-bar></zg-header><zg-colgroup id="gridcolgroup" slot="gridcolgroup"><zg-column type="text" index="Date"></zg-column><zg-column type="number" index="Close"></zg-column></zg-colgroup><zg-footer slot="footer"></zg-footer><zg-status slot="status"></zg-status><zg-tooltip slot="tooltip" role="tooltip" hidden=""></zg-tooltip><zg-cell-overflow slot="celloverflow" hidden=""></zg-cell-overflow><zg-filter-menu slot="filtermenu" hidden="" role="menu"></zg-filter-menu><zg-frozen-colgroup id="zing-grid-freeze-style-left" slot="freeze-left-columns" hidden=""></zg-frozen-colgroup><zg-frozen-colgroup id="zing-grid-freeze-style-right" slot="freeze-right-columns" hidden=""></zg-frozen-colgroup><zg-batch-edit id="zing-grid-batch-edit" slot="batch-edit" hidden=""></zg-batch-edit><zg-load-mask slot="loadmask" hidden=""></zg-load-mask><zg-dialog internal="" slot="dialogInternal"></zg-dialog><zg-watermark slot="watermark"></zg-watermark><zg-menu id="columnMenu" hidden="" role="menu"><zg-menu-item role="menuitemcheckbox" tabindex="-1"><zg-button action="checkbox" role="button" hastext="" dir="ltr"><zg-icon hidden="" name="checkbox" slot="icon"><svg id="svg--434706" slot="icon" viewBox="0 0 24 24"></svg></zg-icon><zg-checkbox checked="" slot="checkbox" action="checkbox"><zg-icon slot="zgicon" name="checked"><svg id="svg--792969" slot="icon" viewBox="0 0 24 24">
    347.                 <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>
    348.               </svg></zg-icon></zg-checkbox><span class="label" slot="label">Date</span></zg-button></zg-menu-item><zg-menu-item role="menuitemcheckbox" tabindex="-1"><zg-button action="checkbox" role="button" hastext="" dir="ltr"><zg-icon hidden="" name="checkbox" slot="icon"><svg id="svg--721484" slot="icon" viewBox="0 0 24 24"></svg></zg-icon><zg-checkbox checked="" slot="checkbox" action="checkbox"><zg-icon slot="zgicon" name="checked"><svg id="svg--209365" slot="icon" viewBox="0 0 24 24">
    349.                 <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>
    350.               </svg></zg-icon></zg-checkbox><span class="label" slot="label">Close</span></zg-button></zg-menu-item></zg-menu></zing-grid>
    351.  
    352.   <script>
    353.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    354.   </script>
    355. </body>
    356.  
    357. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid Demo</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8. </head>
    9.  
    10. <body class="zg-body">
    11.  
    12.   <!--
    13.       Original Markup: 
    14.  
    15.       <zing-grid 
    16.         caption="Amazon Stock Data"
    17.         search
    18.         height="1000"
    19.         src="https://cdn.zinggrid.com/datasets/amzn-stock-data.json">
    20.       </zing-grid> 
    21. 	-->
    22.  
    23.  
    24.   <!-- 
    25. 		SSR renderered markup... 
    26.  
    27. 		ADDED server-rendered="true" attribute for this markup, the
    28. 		rest of the markup is just output from the browser when ZG
    29. 		is rendered.
    30. 	-->
    31.  
    32.   <zing-grid server-rendered caption="Amazon Stock Data" search="" height="1000" src="https://cdn.zinggrid.com/datasets/amzn-stock-data.json" tabindex="0" static-scroll="" role="grid" viewport="desktop" loadingupdate="true" style="--zg-max-height: 1000px; --grid-columns: 1fr 1fr; --zg-head-cell-height: 40px; --grid-rows: repeat(64, max-content) 1fr;">
    33.     <zg-table slot="table" tabindex="-1" height="" aria-rowcount="64" aria-colcount="2" style="visibility: visible;" class=""><zg-head id="mainhead" slot="gridhead" role="rowgroup" internal-height=""><zg-row frozen-top="" aria-rowindex="1" role="row" internal-height=""><zg-head-cell cellindex="0" role="columnheader" aria-colindex="1" data-focusable="" data-field-index="Date" icon-position="left" title="" depth="1" type="text" class="" style="inset-block-start: 0px;"><zg-icon class="zg-head-details-icon" slot="right"></zg-icon><zg-icon class="zg-head-icon" slot="left"></zg-icon><zg-icon class="zg-header-user-icon" slot="left" position="left"></zg-icon><zg-button action="filter" slot="right" class="zg-filter-menu" role="button" internal-cell="" dir="ltr" aria-label="filter"><zg-icon name="filter" slot="icon"><svg id="svg--762163" slot="icon" viewBox="0 0 24 24">
    34.                   <path d="M10.333 16v-1.667h3.334V16h-3.334ZM7 11.833v-1.666h10v1.666H7ZM4.5 7.667V6h15v1.667h-15Z"></path>
    35.                 </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked"><svg id="svg--597401" slot="icon" viewBox="0 0 24 24">
    36.                     <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>
    37.                   </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button>
    38.             <div data-field-index="Date"><span>Date</span></div>
    39.           </zg-head-cell><zg-head-cell cellindex="1" role="columnheader" aria-colindex="2" data-focusable="" data-field-index="Close" icon-position="left" last="" title="" depth="1" type="number" class="" style="inset-block-start: 0px;"><zg-icon class="zg-head-details-icon" slot="right"></zg-icon><zg-icon class="zg-head-icon" slot="left"></zg-icon><zg-icon class="zg-header-user-icon" slot="left" position="left"></zg-icon><zg-button action="filter" slot="right" class="zg-filter-menu" role="button" internal-cell="" dir="ltr" aria-label="filter"><zg-icon name="filter" slot="icon"><svg id="svg--415879" slot="icon" viewBox="0 0 24 24">
    40.                   <path d="M10.333 16v-1.667h3.334V16h-3.334ZM7 11.833v-1.666h10v1.666H7ZM4.5 7.667V6h15v1.667h-15Z"></path>
    41.                 </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked"><svg id="svg--414082" slot="icon" viewBox="0 0 24 24">
    42.                     <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>
    43.                   </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button>
    44.             <div data-field-index="Close"><span>Close</span></div>
    45.           </zg-head-cell><zg-row-details hidden=""></zg-row-details></zg-row></zg-head><zg-body id="mainbody" slot="gridbody" role="rowgroup" viewport="desktop"><zg-row aria-rowindex="2" role="row" internal-height="" internal-top="" class=""><zg-cell aria-colindex="1" role="gridcell" value="2-Mar-17" type="text" data-field-index="Date" class="">
    46.             <div data-field-index="Date">2-Mar-17</div>
    47.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="848.91" type="number" data-field-index="Close" last="" class="">
    48.             <div data-field-index="Close">848.91</div>
    49.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="3" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="1-Mar-17" type="text" data-field-index="Date" class="">
    50.             <div data-field-index="Date">1-Mar-17</div>
    51.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="853.08" type="number" data-field-index="Close" last="" class="">
    52.             <div data-field-index="Close">853.08</div>
    53.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="4" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="28-Feb-17" type="text" data-field-index="Date" class="">
    54.             <div data-field-index="Date">28-Feb-17</div>
    55.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="845.04" type="number" data-field-index="Close" last="" class="">
    56.             <div data-field-index="Close">845.04</div>
    57.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="5" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="27-Feb-17" type="text" data-field-index="Date" class="">
    58.             <div data-field-index="Date">27-Feb-17</div>
    59.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="848.64" type="number" data-field-index="Close" last="" class="">
    60.             <div data-field-index="Close">848.64</div>
    61.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="6" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="24-Feb-17" type="text" data-field-index="Date" class="">
    62.             <div data-field-index="Date">24-Feb-17</div>
    63.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="845.24" type="number" data-field-index="Close" last="" class="">
    64.             <div data-field-index="Close">845.24</div>
    65.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="7" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="23-Feb-17" type="text" data-field-index="Date" class="">
    66.             <div data-field-index="Date">23-Feb-17</div>
    67.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="852.19" type="number" data-field-index="Close" last="" class="">
    68.             <div data-field-index="Close">852.19</div>
    69.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="8" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="22-Feb-17" type="text" data-field-index="Date" class="">
    70.             <div data-field-index="Date">22-Feb-17</div>
    71.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="855.61" type="number" data-field-index="Close" last="" class="">
    72.             <div data-field-index="Close">855.61</div>
    73.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="9" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="21-Feb-17" type="text" data-field-index="Date" class="">
    74.             <div data-field-index="Date">21-Feb-17</div>
    75.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="856.44" type="number" data-field-index="Close" last="" class="">
    76.             <div data-field-index="Close">856.44</div>
    77.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="10" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="17-Feb-17" type="text" data-field-index="Date" class="">
    78.             <div data-field-index="Date">17-Feb-17</div>
    79.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="845.07" type="number" data-field-index="Close" last="" class="">
    80.             <div data-field-index="Close">845.07</div>
    81.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="11" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="16-Feb-17" type="text" data-field-index="Date" class="">
    82.             <div data-field-index="Date">16-Feb-17</div>
    83.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="844.14" type="number" data-field-index="Close" last="" class="">
    84.             <div data-field-index="Close">844.14</div>
    85.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="12" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="15-Feb-17" type="text" data-field-index="Date" class="">
    86.             <div data-field-index="Date">15-Feb-17</div>
    87.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="842.7" type="number" data-field-index="Close" last="">
    88.             <div data-field-index="Close">842.7</div>
    89.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="13" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="14-Feb-17" type="text" data-field-index="Date" class="">
    90.             <div data-field-index="Date">14-Feb-17</div>
    91.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="836.39" type="number" data-field-index="Close" last="">
    92.             <div data-field-index="Close">836.39</div>
    93.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="14" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="13-Feb-17" type="text" data-field-index="Date" class="">
    94.             <div data-field-index="Date">13-Feb-17</div>
    95.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="836.53" type="number" data-field-index="Close" last="">
    96.             <div data-field-index="Close">836.53</div>
    97.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="15" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="10-Feb-17" type="text" data-field-index="Date" class="">
    98.             <div data-field-index="Date">10-Feb-17</div>
    99.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="827.46" type="number" data-field-index="Close" last="">
    100.             <div data-field-index="Close">827.46</div>
    101.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="16" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="9-Feb-17" type="text" data-field-index="Date" class="">
    102.             <div data-field-index="Date">9-Feb-17</div>
    103.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="821.36" type="number" data-field-index="Close" last="">
    104.             <div data-field-index="Close">821.36</div>
    105.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="17" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="8-Feb-17" type="text" data-field-index="Date" class="">
    106.             <div data-field-index="Date">8-Feb-17</div>
    107.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="819.71" type="number" data-field-index="Close" last="">
    108.             <div data-field-index="Close">819.71</div>
    109.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="18" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="7-Feb-17" type="text" data-field-index="Date" class="">
    110.             <div data-field-index="Date">7-Feb-17</div>
    111.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="812.5" type="number" data-field-index="Close" last="">
    112.             <div data-field-index="Close">812.5</div>
    113.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="19" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="6-Feb-17" type="text" data-field-index="Date" class="">
    114.             <div data-field-index="Date">6-Feb-17</div>
    115.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="807.64" type="number" data-field-index="Close" last="">
    116.             <div data-field-index="Close">807.64</div>
    117.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="20" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="3-Feb-17" type="text" data-field-index="Date" class="">
    118.             <div data-field-index="Date">3-Feb-17</div>
    119.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="810.2" type="number" data-field-index="Close" last="">
    120.             <div data-field-index="Close">810.2</div>
    121.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="21" role="row" internal-height="" class=""><zg-cell aria-colindex="1" role="gridcell" value="2-Feb-17" type="text" data-field-index="Date" class="">
    122.             <div data-field-index="Date">2-Feb-17</div>
    123.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="839.95" type="number" data-field-index="Close" last="">
    124.             <div data-field-index="Close">839.95</div>
    125.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="22" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="1-Feb-17" type="text" data-field-index="Date">
    126.             <div data-field-index="Date">1-Feb-17</div>
    127.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="832.35" type="number" data-field-index="Close" last="">
    128.             <div data-field-index="Close">832.35</div>
    129.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="23" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="31-Jan-17" type="text" data-field-index="Date">
    130.             <div data-field-index="Date">31-Jan-17</div>
    131.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="823.48" type="number" data-field-index="Close" last="">
    132.             <div data-field-index="Close">823.48</div>
    133.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="24" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="30-Jan-17" type="text" data-field-index="Date">
    134.             <div data-field-index="Date">30-Jan-17</div>
    135.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="830.38" type="number" data-field-index="Close" last="">
    136.             <div data-field-index="Close">830.38</div>
    137.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="25" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="27-Jan-17" type="text" data-field-index="Date">
    138.             <div data-field-index="Date">27-Jan-17</div>
    139.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="835.77" type="number" data-field-index="Close" last="">
    140.             <div data-field-index="Close">835.77</div>
    141.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="26" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="26-Jan-17" type="text" data-field-index="Date">
    142.             <div data-field-index="Date">26-Jan-17</div>
    143.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="839.15" type="number" data-field-index="Close" last="">
    144.             <div data-field-index="Close">839.15</div>
    145.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="27" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="25-Jan-17" type="text" data-field-index="Date">
    146.             <div data-field-index="Date">25-Jan-17</div>
    147.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="836.52" type="number" data-field-index="Close" last="">
    148.             <div data-field-index="Close">836.52</div>
    149.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="28" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="24-Jan-17" type="text" data-field-index="Date">
    150.             <div data-field-index="Date">24-Jan-17</div>
    151.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="822.44" type="number" data-field-index="Close" last="">
    152.             <div data-field-index="Close">822.44</div>
    153.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="29" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="23-Jan-17" type="text" data-field-index="Date">
    154.             <div data-field-index="Date">23-Jan-17</div>
    155.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="817.88" type="number" data-field-index="Close" last="">
    156.             <div data-field-index="Close">817.88</div>
    157.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="30" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="20-Jan-17" type="text" data-field-index="Date">
    158.             <div data-field-index="Date">20-Jan-17</div>
    159.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="808.33" type="number" data-field-index="Close" last="">
    160.             <div data-field-index="Close">808.33</div>
    161.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="31" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="19-Jan-17" type="text" data-field-index="Date">
    162.             <div data-field-index="Date">19-Jan-17</div>
    163.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="809.04" type="number" data-field-index="Close" last="">
    164.             <div data-field-index="Close">809.04</div>
    165.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="32" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="18-Jan-17" type="text" data-field-index="Date">
    166.             <div data-field-index="Date">18-Jan-17</div>
    167.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="807.48" type="number" data-field-index="Close" last="">
    168.             <div data-field-index="Close">807.48</div>
    169.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="33" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="17-Jan-17" type="text" data-field-index="Date">
    170.             <div data-field-index="Date">17-Jan-17</div>
    171.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="809.72" type="number" data-field-index="Close" last="">
    172.             <div data-field-index="Close">809.72</div>
    173.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="34" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="13-Jan-17" type="text" data-field-index="Date">
    174.             <div data-field-index="Date">13-Jan-17</div>
    175.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="817.14" type="number" data-field-index="Close" last="">
    176.             <div data-field-index="Close">817.14</div>
    177.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="35" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="12-Jan-17" type="text" data-field-index="Date">
    178.             <div data-field-index="Date">12-Jan-17</div>
    179.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="813.64" type="number" data-field-index="Close" last="">
    180.             <div data-field-index="Close">813.64</div>
    181.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="36" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="11-Jan-17" type="text" data-field-index="Date">
    182.             <div data-field-index="Date">11-Jan-17</div>
    183.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="799.02" type="number" data-field-index="Close" last="">
    184.             <div data-field-index="Close">799.02</div>
    185.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="37" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="10-Jan-17" type="text" data-field-index="Date">
    186.             <div data-field-index="Date">10-Jan-17</div>
    187.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="795.9" type="number" data-field-index="Close" last="">
    188.             <div data-field-index="Close">795.9</div>
    189.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="38" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="9-Jan-17" type="text" data-field-index="Date">
    190.             <div data-field-index="Date">9-Jan-17</div>
    191.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="796.92" type="number" data-field-index="Close" last="">
    192.             <div data-field-index="Close">796.92</div>
    193.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="39" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="6-Jan-17" type="text" data-field-index="Date">
    194.             <div data-field-index="Date">6-Jan-17</div>
    195.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="795.99" type="number" data-field-index="Close" last="">
    196.             <div data-field-index="Close">795.99</div>
    197.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="40" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="5-Jan-17" type="text" data-field-index="Date">
    198.             <div data-field-index="Date">5-Jan-17</div>
    199.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="780.45" type="number" data-field-index="Close" last="">
    200.             <div data-field-index="Close">780.45</div>
    201.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="41" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="4-Jan-17" type="text" data-field-index="Date">
    202.             <div data-field-index="Date">4-Jan-17</div>
    203.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="757.18" type="number" data-field-index="Close" last="">
    204.             <div data-field-index="Close">757.18</div>
    205.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="42" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="3-Jan-17" type="text" data-field-index="Date">
    206.             <div data-field-index="Date">3-Jan-17</div>
    207.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="753.67" type="number" data-field-index="Close" last="">
    208.             <div data-field-index="Close">753.67</div>
    209.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="43" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="30-Dec-16" type="text" data-field-index="Date">
    210.             <div data-field-index="Date">30-Dec-16</div>
    211.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="749.87" type="number" data-field-index="Close" last="">
    212.             <div data-field-index="Close">749.87</div>
    213.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="44" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="29-Dec-16" type="text" data-field-index="Date">
    214.             <div data-field-index="Date">29-Dec-16</div>
    215.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="765.15" type="number" data-field-index="Close" last="">
    216.             <div data-field-index="Close">765.15</div>
    217.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="45" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="28-Dec-16" type="text" data-field-index="Date">
    218.             <div data-field-index="Date">28-Dec-16</div>
    219.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="772.13" type="number" data-field-index="Close" last="">
    220.             <div data-field-index="Close">772.13</div>
    221.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="46" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="27-Dec-16" type="text" data-field-index="Date">
    222.             <div data-field-index="Date">27-Dec-16</div>
    223.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="771.4" type="number" data-field-index="Close" last="">
    224.             <div data-field-index="Close">771.4</div>
    225.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="47" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="23-Dec-16" type="text" data-field-index="Date">
    226.             <div data-field-index="Date">23-Dec-16</div>
    227.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="760.59" type="number" data-field-index="Close" last="">
    228.             <div data-field-index="Close">760.59</div>
    229.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="48" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="22-Dec-16" type="text" data-field-index="Date">
    230.             <div data-field-index="Date">22-Dec-16</div>
    231.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="766.34" type="number" data-field-index="Close" last="">
    232.             <div data-field-index="Close">766.34</div>
    233.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="49" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="21-Dec-16" type="text" data-field-index="Date">
    234.             <div data-field-index="Date">21-Dec-16</div>
    235.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="770.6" type="number" data-field-index="Close" last="">
    236.             <div data-field-index="Close">770.6</div>
    237.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="50" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="20-Dec-16" type="text" data-field-index="Date">
    238.             <div data-field-index="Date">20-Dec-16</div>
    239.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="771.22" type="number" data-field-index="Close" last="">
    240.             <div data-field-index="Close">771.22</div>
    241.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="51" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="19-Dec-16" type="text" data-field-index="Date">
    242.             <div data-field-index="Date">19-Dec-16</div>
    243.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="766" type="number" data-field-index="Close" last="">
    244.             <div data-field-index="Close">766</div>
    245.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="52" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="16-Dec-16" type="text" data-field-index="Date">
    246.             <div data-field-index="Date">16-Dec-16</div>
    247.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="757.77" type="number" data-field-index="Close" last="">
    248.             <div data-field-index="Close">757.77</div>
    249.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="53" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="15-Dec-16" type="text" data-field-index="Date">
    250.             <div data-field-index="Date">15-Dec-16</div>
    251.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="761" type="number" data-field-index="Close" last="">
    252.             <div data-field-index="Close">761</div>
    253.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="54" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="14-Dec-16" type="text" data-field-index="Date">
    254.             <div data-field-index="Date">14-Dec-16</div>
    255.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="768.82" type="number" data-field-index="Close" last="">
    256.             <div data-field-index="Close">768.82</div>
    257.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="55" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="13-Dec-16" type="text" data-field-index="Date">
    258.             <div data-field-index="Date">13-Dec-16</div>
    259.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="774.34" type="number" data-field-index="Close" last="">
    260.             <div data-field-index="Close">774.34</div>
    261.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="56" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="12-Dec-16" type="text" data-field-index="Date">
    262.             <div data-field-index="Date">12-Dec-16</div>
    263.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="760.12" type="number" data-field-index="Close" last="">
    264.             <div data-field-index="Close">760.12</div>
    265.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="57" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="9-Dec-16" type="text" data-field-index="Date">
    266.             <div data-field-index="Date">9-Dec-16</div>
    267.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="768.66" type="number" data-field-index="Close" last="">
    268.             <div data-field-index="Close">768.66</div>
    269.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="58" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="8-Dec-16" type="text" data-field-index="Date">
    270.             <div data-field-index="Date">8-Dec-16</div>
    271.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="767.33" type="number" data-field-index="Close" last="">
    272.             <div data-field-index="Close">767.33</div>
    273.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="59" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="7-Dec-16" type="text" data-field-index="Date">
    274.             <div data-field-index="Date">7-Dec-16</div>
    275.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="770.42" type="number" data-field-index="Close" last="">
    276.             <div data-field-index="Close">770.42</div>
    277.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="60" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="6-Dec-16" type="text" data-field-index="Date">
    278.             <div data-field-index="Date">6-Dec-16</div>
    279.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="764.72" type="number" data-field-index="Close" last="">
    280.             <div data-field-index="Close">764.72</div>
    281.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="61" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="5-Dec-16" type="text" data-field-index="Date">
    282.             <div data-field-index="Date">5-Dec-16</div>
    283.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="759.36" type="number" data-field-index="Close" last="">
    284.             <div data-field-index="Close">759.36</div>
    285.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="62" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="2-Dec-16" type="text" data-field-index="Date">
    286.             <div data-field-index="Date">2-Dec-16</div>
    287.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="740.34" type="number" data-field-index="Close" last="">
    288.             <div data-field-index="Close">740.34</div>
    289.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="63" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="1-Dec-16" type="text" data-field-index="Date">
    290.             <div data-field-index="Date">1-Dec-16</div>
    291.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="743.65" type="number" data-field-index="Close" last="">
    292.             <div data-field-index="Close">743.65</div>
    293.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row><zg-row aria-rowindex="64" role="row" internal-height=""><zg-cell aria-colindex="1" role="gridcell" value="30-Nov-16" type="text" data-field-index="Date">
    294.             <div data-field-index="Date">30-Nov-16</div>
    295.           </zg-cell><zg-cell aria-colindex="2" role="gridcell" value="750.57" type="number" data-field-index="Close" last="">
    296.             <div data-field-index="Close">750.57</div>
    297.           </zg-cell><zg-row-details hidden=""></zg-row-details></zg-row></zg-body><zg-foot id="mainfoot" slot="gridfoot"></zg-foot><zg-editor-row id="bodyeditorrow" slot="bodyeditorrow"></zg-editor-row><zg-selector-mask slot="bodygridselectmask"></zg-selector-mask><zg-focus slot="bodygridfocus" hidden=""></zg-focus><zg-no-data class="default" slot="gridnodata"><span class="default-message">There are no records to display.</span></zg-no-data></zg-table><zg-header slot="header"><zg-caption slot="caption">
    298.         <div id="zg-caption-user-text">Amazon Stock Data</div><zg-button data-focusable="" slot="tool" action="removerecord" hidden="" role="button" dir="ltr" aria-label="removerecord" tabindex="-1"><zg-icon name="removerecord" slot="icon" internal-caption=""><svg id="svg--512383" slot="icon" viewBox="0 0 24 24">
    299.               <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>
    300.             </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked" internal-caption=""><svg id="svg--811755" slot="icon" viewBox="0 0 24 24">
    301.                 <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>
    302.               </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><zg-search slot="tool"><zg-button slot="button" action="search" data-focusable="" role="button" dir="ltr" aria-label="search" tabindex="-1"><zg-icon name="search" slot="icon" internal-caption=""><svg id="svg--413331" slot="icon" viewBox="0 0 24 24">
    303.                 <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>
    304.                 <path d="M0 0h24v24H0z" fill="none"></path>
    305.               </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked" internal-caption=""><svg id="svg--986536" slot="icon" viewBox="0 0 24 24">
    306.                   <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>
    307.                 </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><input slot="input" type="search" placeholder="Search" aria-label="Search" tabindex="-1"></zg-search><zg-button data-focusable="" slot="tool" action="fixedmenu" hidden="" role="button" dir="ltr" aria-label="fixedmenu" aria-haspopup="true" tabindex="-1"><zg-icon name="fixedmenu" slot="icon" internal-caption=""><svg id="svg--405199" slot="icon" viewBox="0 0 24 24">
    308.               <path d="M0 0h24v24H0z" fill="none"></path>
    309.               <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
    310.             </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked" internal-caption=""><svg id="svg--283447" slot="icon" viewBox="0 0 24 24">
    311.                 <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>
    312.               </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><zg-button data-focusable="" slot="tool" action="menu" hidden="" role="button" dir="ltr" aria-label="menu" aria-haspopup="true" tabindex="-1"><zg-icon name="menu" slot="icon" internal-caption=""><svg id="svg--61537" slot="icon" viewBox="0 0 24 24">
    313.               <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>
    314.             </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked" internal-caption=""><svg id="svg--237548" slot="icon" viewBox="0 0 24 24">
    315.                 <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>
    316.               </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button>
    317.       </zg-caption><zg-control-bar slot="control-bar" hidden=""><zg-separator slot="cardaction" hidden="" id="afterselect"></zg-separator><zg-button data-focusable="" slot="action" action="createrecord" hidden="" role="button" dir="ltr" aria-label="createrecord" tabindex="-1"><zg-icon name="createrecord" slot="icon"><svg id="svg--589970" slot="icon" viewBox="0 0 24 24">
    318.               <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>
    319.             </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked"><svg id="svg--265842" slot="icon" viewBox="0 0 24 24">
    320.                 <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>
    321.               </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><zg-separator slot="action" hidden="" id="beforeedit"></zg-separator><zg-text id="label" slot="action">Edit Records (Batch):</zg-text><zg-button data-focusable="" slot="action" action="batchedit" hidden="" role="button" dir="ltr" aria-label="batchedit" tabindex="-1"><zg-icon name="batchedit" slot="icon"><svg id="svg--813759" slot="icon" viewBox="0 0 24 24">
    322.               <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>
    323.             </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked"><svg id="svg--543707" slot="icon" viewBox="0 0 24 24">
    324.                 <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>
    325.               </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><zg-button data-focusable="" slot="action" action="batcheditsave" hidden="" role="button" dir="ltr" aria-label="batcheditsave" tabindex="-1"><zg-icon name="batcheditsave" slot="icon"><svg id="svg--407286" slot="icon" viewBox="0 0 24 24">
    326.               <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"></path>
    327.             </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked"><svg id="svg--683260" slot="icon" viewBox="0 0 24 24">
    328.                 <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>
    329.               </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><zg-button data-focusable="" slot="action" action="batcheditcancel" hidden="" role="button" dir="ltr" aria-label="batcheditcancel" tabindex="-1"><zg-icon name="batcheditcancel" slot="icon"><svg id="svg--476762" slot="icon" viewBox="0 0 24 24">
    330.               <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>
    331.             </svg></zg-icon><zg-checkbox slot="checkbox" action="checkbox" hidden=""><zg-icon slot="zgicon" name="unchecked"><svg id="svg--629781" slot="icon" viewBox="0 0 24 24">
    332.                 <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>
    333.               </svg></zg-icon></zg-checkbox><span class="label" slot="label"><span class="label" slot="label"></span></span></zg-button><zg-text id="unsaved" slot="message" hidden=""></zg-text></zg-control-bar></zg-header><zg-colgroup id="gridcolgroup" slot="gridcolgroup"><zg-column type="text" index="Date"></zg-column><zg-column type="number" index="Close"></zg-column></zg-colgroup><zg-footer slot="footer"></zg-footer><zg-status slot="status"></zg-status><zg-tooltip slot="tooltip" role="tooltip" hidden=""></zg-tooltip><zg-cell-overflow slot="celloverflow" hidden=""></zg-cell-overflow><zg-filter-menu slot="filtermenu" hidden="" role="menu"></zg-filter-menu><zg-frozen-colgroup id="zing-grid-freeze-style-left" slot="freeze-left-columns" hidden=""></zg-frozen-colgroup><zg-frozen-colgroup id="zing-grid-freeze-style-right" slot="freeze-right-columns" hidden=""></zg-frozen-colgroup><zg-batch-edit id="zing-grid-batch-edit" slot="batch-edit" hidden=""></zg-batch-edit><zg-load-mask slot="loadmask" hidden=""></zg-load-mask><zg-dialog internal="" slot="dialogInternal"></zg-dialog><zg-watermark slot="watermark"></zg-watermark><zg-menu id="columnMenu" hidden="" role="menu"><zg-menu-item role="menuitemcheckbox" tabindex="-1"><zg-button action="checkbox" role="button" hastext="" dir="ltr"><zg-icon hidden="" name="checkbox" slot="icon"><svg id="svg--434706" slot="icon" viewBox="0 0 24 24"></svg></zg-icon><zg-checkbox checked="" slot="checkbox" action="checkbox"><zg-icon slot="zgicon" name="checked"><svg id="svg--792969" slot="icon" viewBox="0 0 24 24">
    334.                 <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>
    335.               </svg></zg-icon></zg-checkbox><span class="label" slot="label">Date</span></zg-button></zg-menu-item><zg-menu-item role="menuitemcheckbox" tabindex="-1"><zg-button action="checkbox" role="button" hastext="" dir="ltr"><zg-icon hidden="" name="checkbox" slot="icon"><svg id="svg--721484" slot="icon" viewBox="0 0 24 24"></svg></zg-icon><zg-checkbox checked="" slot="checkbox" action="checkbox"><zg-icon slot="zgicon" name="checked"><svg id="svg--209365" slot="icon" viewBox="0 0 24 24">
    336.                 <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>
    337.               </svg></zg-icon></zg-checkbox><span class="label" slot="label">Close</span></zg-button></zg-menu-item></zg-menu></zing-grid>
    338.  
    339. </body>
    340.  
    341. </html>
    1. .zg-body {
    2.   background: #e6e6e6;
    3. }
    4.  
    5. zing-grid {
    6.   overflow: hidden;
    7. }
    1.