Skip to content
Fix Code Error

DataTable draw daterange from vaadin-date-picker in polymer

May 6, 2021 by Code Error
Posted By: Anonymous

I am try to implements datatables filter inside polymer from this link https://jsfiddle.net/bindrid/2bkbx2y3/6/

But when I apply into polymer I found some issue when push to datatables a plugin method. in polymer I use vaadin-date-picker as datepicker, and here’s my code :

  1. HTML

    <template>
    <form class="form-inline m-b">
        <div class="form-group form-group-sm">
            <vaadin-date-picker id="min" placeholder="Start"></vaadin-date-picker>
            <vaadin-date-picker id="max" placeholder="End"></vaadin-date-picker>
        </div>
    </form>
    <table id="mainTable" class="table table-condensed table-striped table-bordered" style="width: 100%">
        <thead>
            <tr>
                <th>STAD</th>
            </tr>
        </thead>
    </table>
    

  2. Script :

    class DataTableD extends Polymer.Element {
        static get is() {
            return 'data-table-d';
        }
    
        ready() {
            super.ready();
    
            var min     = this.$.min;
            var max     = this.$.max;
    
            //push method into search
            $.fn.dataTable.ext.search.push(function (settings, data, dataIndex) {
                alert("min . ." + min) //min . .[object HTMLElement]
                var startDate = new Date(data[0].replace( /(d{2})-(d{2})-(d{4})/, "$2/$1/$3"));
                if (min == null && max == null) {alert("startDate . ." + startDate);}
                if (min == null && startDate <= max) {alert("startDate . ." + startDate);}
                if (max == null && startDate >= min) {alert("startDate . ." + startDate);}
                if (startDate <= max && startDate >= min) {alert("startDate . ." + startDate);}
    
                return false;
    
            });
            // Event listener to the two range filtering inputs to redraw on                                
            min.addEventListener('value-changed', function() {
                window.setTimeout(function() {
                    max.value = min.value;
                    max.open();
                }, 500);
    
                this.$.mainTable.draw();
            });
    
        }
    
        _initializeDatatable() {
            if ( ! this.$mainTable) {
                // Make the jQuery object of the mainForm and arrivalTable.
                this.$mainTable = $(this.$.mainTable);
            }
    
            this._dataTable = this.$mainTable.DataTable({
            });
        }
    }
    window.customElements.define(DataTableD.is, DataTableD);
    

hope someone can share the idea to make it works, thx

===========================

Solution

Here below I tried to illustrate another way to filter :

DEMO

_x000D_

_x000D_

HTMLImports.whenReady( ()=> {_x000D_
  _x000D_
class DataTableD extends Polymer.Element {_x000D_
    static get is() {_x000D_
        return 'data-table-d';_x000D_
    }_x000D_
    static get properties() {_x000D_
       return {_x000D_
          minDate:{type:String },_x000D_
          maxDate:{type:String }_x000D_
    }}_x000D_
    static get observers(){_x000D_
       return ['_checkMinMaxDate(minDate, maxDate)']_x000D_
    }_x000D_
    ready() {_x000D_
        super.ready();_x000D_
    }_x000D_
_x000D_
_x000D_
  _checkMinMaxDate(min,max) {_x000D_
    console.log("Min-max:", min,max, this.items, this.xitems);_x000D_
    var minn = min==="" ? "1000/01/01":min;_x000D_
    var maxx = max==="" ? "2050/01/01":max;_x000D_
    var newItems =  this.items.filter( (el)=> {_x000D_
         return el.Startdate <= maxx &&_x000D_
         el.Startdate >= minn ;_x000D_
});_x000D_
    this.set('xitems', newItems);_x000D_
    _x000D_
  }_x000D_
}_x000D_
window.customElements.define(DataTableD.is, DataTableD)_x000D_
_x000D_
})

_x000D_

<head>_x000D_
  <script_x000D_
  src="https://code.jquery.com/jquery-3.3.1.min.js"></script>_x000D_
  <base href="https://cdn.rawgit.com/download/polymer-cdn/2.6.0.2/lib/">_x000D_
  <script src="webcomponentsjs/webcomponents-lite.js"></script>_x000D_
  <link rel="import" href="polymer/polymer.html">_x000D_
  <link rel="import" href="https://cdn-origin.vaadin.com/vaadin-core-elements/master/vaadin-date-picker/vaadin-date-picker.html">_x000D_
  <link rel="import" href="https://cdn-origin.vaadin.com/vaadin-core-elements/master/vaadin-grid/all-imports.html">_x000D_
 _x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<data-table-d id="tableDat" items="{{items}}"></data-table-d>_x000D_
  _x000D_
<dom-module id="data-table-d">_x000D_
<template>_x000D_
<style>_x000D_
     vaadin-grid{_x000D_
         height: 100%;_x000D_
         font-size: 14px;_x000D_
     }_x000D_
     vaadin-grid:hover {_x000D_
        cursor: pointer;_x000D_
     }_x000D_
</style>_x000D_
        <vaadin-date-picker id="min" placeholder="Start" value="{{minDate}}" on-change="_checkMinMaxDate"></vaadin-date-picker>_x000D_
        <vaadin-date-picker id="max" placeholder="End" value={{maxDate}}  on-change="_checkMinMaxDate"></vaadin-date-picker><br><br><br><br>_x000D_
  _x000D_
         <vaadin-grid aria-label="Companies" items="[[xitems]]" multi-sort>_x000D_
_x000D_
               <vaadin-grid-column>_x000D_
                 <template class="header">_x000D_
                   <vaadin-grid-filter path="Name"> </vaadin-grid-filter>_x000D_
                   <vaadin-grid-sorter path="Name">Name</vaadin-grid-sorter>_x000D_
                 </template>_x000D_
_x000D_
                <template>[[item.Name]]</template>_x000D_
               </vaadin-grid-column>_x000D_
           _x000D_
               <vaadin-grid-column>_x000D_
                <template class="header">_x000D_
                   <vaadin-grid-filter path="Position"> </vaadin-grid-filter>_x000D_
                   <vaadin-grid-sorter path="Position">Position</vaadin-grid-sorter>_x000D_
                 </template>_x000D_
_x000D_
                <template>[[item.Position]]</template>_x000D_
               </vaadin-grid-column>_x000D_
           _x000D_
              <vaadin-grid-column>_x000D_
                <template class="header">_x000D_
                   <vaadin-grid-filter path="Office"> </vaadin-grid-filter>_x000D_
                   <vaadin-grid-sorter path="Office">Office</vaadin-grid-sorter>_x000D_
                 </template>_x000D_
_x000D_
                <template>[[item.Office]]</template>_x000D_
               </vaadin-grid-column>_x000D_
           _x000D_
               <vaadin-grid-column>_x000D_
                <template class="header">_x000D_
                   <vaadin-grid-filter path="Age"> </vaadin-grid-filter>_x000D_
                   <vaadin-grid-sorter path="Age">Age</vaadin-grid-sorter>_x000D_
                 </template>_x000D_
_x000D_
                <template>[[item.Age]]</template>_x000D_
               </vaadin-grid-column>_x000D_
                    _x000D_
               <vaadin-grid-column>_x000D_
                <template class="header">_x000D_
                   <vaadin-grid-filter path="Startdate"> </vaadin-grid-filter>_x000D_
                   <vaadin-grid-sorter path="Startdate">Start date</vaadin-grid-sorter>_x000D_
                 </template>_x000D_
_x000D_
                <template>[[item.Startdate]]</template>_x000D_
               </vaadin-grid-column>_x000D_
                    _x000D_
               <vaadin-grid-column>_x000D_
                <template class="header">_x000D_
                   <vaadin-grid-filter path="Salary"> </vaadin-grid-filter>_x000D_
                   <vaadin-grid-sorter path="Salary">Salary</vaadin-grid-sorter>_x000D_
                 </template>_x000D_
_x000D_
                <template>[[item.Salary]]</template>_x000D_
               </vaadin-grid-column>           _x000D_
_x000D_
             </vaadin-grid>_x000D_
  _x000D_
</template>_x000D_
</dom-module>_x000D_
  _x000D_
  _x000D_
  _x000D_
<!-- BELOW TABLE JUST FOR DATA TO PASS IN POLYMER -->  _x000D_
<table style="display:none;" width="100%" class="display" id="example" cellspacing="0">_x000D_
        <thead>_x000D_
            <tr>_x000D_
                <th>Name</th>_x000D_
                <th>Position</th>_x000D_
                <th>Office</th>_x000D_
                <th>Age</th>_x000D_
                <th>Startdate</th>_x000D_
                <th>Salary</th>_x000D_
            </tr>_x000D_
        </thead>_x000D_
        <tfoot>_x000D_
            <tr>_x000D_
                <th>Name</th>_x000D_
                <th>Position</th>_x000D_
                <th>Office</th>_x000D_
                <th>Age</th>_x000D_
                <th>Start date</th>_x000D_
                <th>Salary</th>_x000D_
            </tr>_x000D_
        </tfoot>_x000D_
        <tbody>_x000D_
            <tr>_x000D_
                <td>Tiger Nixon</td>_x000D_
                <td>System Architect</td>_x000D_
                <td>Edinburgh</td>_x000D_
                <td>61</td>_x000D_
                <td>2011/04/25</td>_x000D_
                <td>$320,800</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Garrett Winters</td>_x000D_
                <td>Accountant</td>_x000D_
                <td>Tokyo</td>_x000D_
                <td>63</td>_x000D_
                <td>2011/07/25</td>_x000D_
                <td>$170,750</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Ashton Cox</td>_x000D_
                <td>Junior Technical Author</td>_x000D_
                <td>San Francisco</td>_x000D_
                <td>66</td>_x000D_
                <td>2009/01/12</td>_x000D_
                <td>$86,000</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Cedric Kelly</td>_x000D_
                <td>Senior Javascript Developer</td>_x000D_
                <td>Edinburgh</td>_x000D_
                <td>22</td>_x000D_
                <td>2012/03/29</td>_x000D_
                <td>$433,060</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Airi Satou</td>_x000D_
                <td>Accountant</td>_x000D_
                <td>Tokyo</td>_x000D_
                <td>33</td>_x000D_
                <td>2008/11/28</td>_x000D_
                <td>$162,700</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Brielle Williamson</td>_x000D_
                <td>Integration Specialist</td>_x000D_
                <td>New York</td>_x000D_
                <td>61</td>_x000D_
                <td>2012/12/02</td>_x000D_
                <td>$372,000</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Herrod Chandler</td>_x000D_
                <td>Sales Assistant</td>_x000D_
                <td>San Francisco</td>_x000D_
                <td>59</td>_x000D_
                <td>2012/08/06</td>_x000D_
                <td>$137,500</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Rhona Davidson</td>_x000D_
                <td>Integration Specialist</td>_x000D_
                <td>Tokyo</td>_x000D_
                <td>55</td>_x000D_
                <td>2010/10/14</td>_x000D_
                <td>$327,900</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Colleen Hurst</td>_x000D_
                <td>Javascript Developer</td>_x000D_
                <td>San Francisco</td>_x000D_
                <td>39</td>_x000D_
                <td>2009/09/15</td>_x000D_
                <td>$205,500</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Sonya Frost</td>_x000D_
                <td>Software Engineer</td>_x000D_
                <td>Edinburgh</td>_x000D_
                <td>23</td>_x000D_
                <td>2008/12/13</td>_x000D_
                <td>$103,600</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Jena Gaines</td>_x000D_
                <td>Office Manager</td>_x000D_
                <td>London</td>_x000D_
                <td>30</td>_x000D_
                <td>2008/12/19</td>_x000D_
                <td>$90,560</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Quinn Flynn</td>_x000D_
                <td>Support Lead</td>_x000D_
                <td>Edinburgh</td>_x000D_
                <td>22</td>_x000D_
                <td>2013/03/03</td>_x000D_
                <td>$342,000</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Charde Marshall</td>_x000D_
                <td>Regional Director</td>_x000D_
                <td>San Francisco</td>_x000D_
                <td>36</td>_x000D_
                <td>2008/10/16</td>_x000D_
                <td>$470,600</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Haley Kennedy</td>_x000D_
                <td>Senior Marketing Designer</td>_x000D_
                <td>London</td>_x000D_
                <td>43</td>_x000D_
                <td>2012/12/18</td>_x000D_
                <td>$313,500</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Tatyana Fitzpatrick</td>_x000D_
                <td>Regional Director</td>_x000D_
                <td>London</td>_x000D_
                <td>19</td>_x000D_
                <td>2010/03/17</td>_x000D_
                <td>$385,750</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Michael Silva</td>_x000D_
                <td>Marketing Designer</td>_x000D_
                <td>London</td>_x000D_
                <td>66</td>_x000D_
                <td>2012/11/27</td>_x000D_
                <td>$198,500</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Paul Byrd</td>_x000D_
                <td>Chief Financial Officer (CFO)</td>_x000D_
                <td>New York</td>_x000D_
                <td>64</td>_x000D_
                <td>2010/06/09</td>_x000D_
                <td>$725,000</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Gloria Little</td>_x000D_
                <td>Systems Administrator</td>_x000D_
                <td>New York</td>_x000D_
                <td>59</td>_x000D_
                <td>2009/04/10</td>_x000D_
                <td>$237,500</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Bradley Greer</td>_x000D_
                <td>Software Engineer</td>_x000D_
                <td>London</td>_x000D_
                <td>41</td>_x000D_
                <td>2012/10/13</td>_x000D_
                <td>$132,000</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Dai Rios</td>_x000D_
                <td>Personnel Lead</td>_x000D_
                <td>Edinburgh</td>_x000D_
                <td>35</td>_x000D_
                <td>2012/09/26</td>_x000D_
                <td>$217,500</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Jenette Caldwell</td>_x000D_
                <td>Development Lead</td>_x000D_
                <td>New York</td>_x000D_
                <td>30</td>_x000D_
                <td>2011/09/03</td>_x000D_
                <td>$345,000</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Yuri Berry</td>_x000D_
                <td>Chief Marketing Officer (CMO)</td>_x000D_
                <td>New York</td>_x000D_
                <td>40</td>_x000D_
                <td>2009/06/25</td>_x000D_
                <td>$675,000</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Caesar Vance</td>_x000D_
                <td>Pre-Sales Support</td>_x000D_
                <td>New York</td>_x000D_
                <td>21</td>_x000D_
                <td>2011/12/12</td>_x000D_
                <td>$106,450</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Doris Wilder</td>_x000D_
                <td>Sales Assistant</td>_x000D_
                <td>Sidney</td>_x000D_
                <td>23</td>_x000D_
                <td>2010/09/20</td>_x000D_
                <td>$85,600</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Angelica Ramos</td>_x000D_
                <td>Chief Executive Officer (CEO)</td>_x000D_
                <td>London</td>_x000D_
                <td>47</td>_x000D_
                <td>2009/10/09</td>_x000D_
                <td>$1,200,000</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Gavin Joyce</td>_x000D_
                <td>Developer</td>_x000D_
                <td>Edinburgh</td>_x000D_
                <td>42</td>_x000D_
                <td>2010/12/22</td>_x000D_
                <td>$92,575</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Jennifer Chang</td>_x000D_
                <td>Regional Director</td>_x000D_
                <td>Singapore</td>_x000D_
                <td>28</td>_x000D_
                <td>2010/11/14</td>_x000D_
                <td>$357,650</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Brenden Wagner</td>_x000D_
                <td>Software Engineer</td>_x000D_
                <td>San Francisco</td>_x000D_
                <td>28</td>_x000D_
                <td>2011/06/07</td>_x000D_
                <td>$206,850</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Fiona Green</td>_x000D_
                <td>Chief Operating Officer (COO)</td>_x000D_
                <td>San Francisco</td>_x000D_
                <td>48</td>_x000D_
                <td>2010/03/11</td>_x000D_
                <td>$850,000</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Shou Itou</td>_x000D_
                <td>Regional Marketing</td>_x000D_
                <td>Tokyo</td>_x000D_
                <td>20</td>_x000D_
                <td>2011/08/14</td>_x000D_
                <td>$163,000</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Michelle House</td>_x000D_
                <td>Integration Specialist</td>_x000D_
                <td>Sidney</td>_x000D_
                <td>37</td>_x000D_
                <td>2011/06/02</td>_x000D_
                <td>$95,400</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Suki Burks</td>_x000D_
                <td>Developer</td>_x000D_
                <td>London</td>_x000D_
                <td>53</td>_x000D_
                <td>2009/10/22</td>_x000D_
                <td>$114,500</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Prescott Bartlett</td>_x000D_
                <td>Technical Author</td>_x000D_
                <td>London</td>_x000D_
                <td>27</td>_x000D_
                <td>2011/05/07</td>_x000D_
                <td>$145,000</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Gavin Cortez</td>_x000D_
                <td>Team Leader</td>_x000D_
                <td>San Francisco</td>_x000D_
                <td>22</td>_x000D_
                <td>2008/10/26</td>_x000D_
                <td>$235,500</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Martena Mccray</td>_x000D_
                <td>Post-Sales support</td>_x000D_
                <td>Edinburgh</td>_x000D_
                <td>46</td>_x000D_
                <td>2011/03/09</td>_x000D_
                <td>$324,050</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Unity Butler</td>_x000D_
                <td>Marketing Designer</td>_x000D_
                <td>San Francisco</td>_x000D_
                <td>47</td>_x000D_
                <td>2009/12/09</td>_x000D_
                <td>$85,675</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Howard Hatfield</td>_x000D_
                <td>Office Manager</td>_x000D_
                <td>San Francisco</td>_x000D_
                <td>51</td>_x000D_
                <td>2008/12/16</td>_x000D_
                <td>$164,500</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Hope Fuentes</td>_x000D_
                <td>Secretary</td>_x000D_
                <td>San Francisco</td>_x000D_
                <td>41</td>_x000D_
                <td>2010/02/12</td>_x000D_
                <td>$109,850</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Vivian Harrell</td>_x000D_
                <td>Financial Controller</td>_x000D_
                <td>San Francisco</td>_x000D_
                <td>62</td>_x000D_
                <td>2009/02/14</td>_x000D_
                <td>$452,500</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Timothy Mooney</td>_x000D_
                <td>Office Manager</td>_x000D_
                <td>London</td>_x000D_
                <td>37</td>_x000D_
                <td>2008/12/11</td>_x000D_
                <td>$136,200</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Jackson Bradshaw</td>_x000D_
                <td>Director</td>_x000D_
                <td>New York</td>_x000D_
                <td>65</td>_x000D_
                <td>2008/09/26</td>_x000D_
                <td>$645,750</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Olivia Liang</td>_x000D_
                <td>Support Engineer</td>_x000D_
                <td>Singapore</td>_x000D_
                <td>64</td>_x000D_
                <td>2011/02/03</td>_x000D_
                <td>$234,500</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Bruno Nash</td>_x000D_
                <td>Software Engineer</td>_x000D_
                <td>London</td>_x000D_
                <td>38</td>_x000D_
                <td>2011/05/03</td>_x000D_
                <td>$163,500</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Sakura Yamamoto</td>_x000D_
                <td>Support Engineer</td>_x000D_
                <td>Tokyo</td>_x000D_
                <td>37</td>_x000D_
                <td>2009/08/19</td>_x000D_
                <td>$139,575</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Thor Walton</td>_x000D_
                <td>Developer</td>_x000D_
                <td>New York</td>_x000D_
                <td>61</td>_x000D_
                <td>2013/08/11</td>_x000D_
                <td>$98,540</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Finn Camacho</td>_x000D_
                <td>Support Engineer</td>_x000D_
                <td>San Francisco</td>_x000D_
                <td>47</td>_x000D_
                <td>2009/07/07</td>_x000D_
                <td>$87,500</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Serge Baldwin</td>_x000D_
                <td>Data Coordinator</td>_x000D_
                <td>Singapore</td>_x000D_
                <td>64</td>_x000D_
                <td>2012/04/09</td>_x000D_
                <td>$138,575</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Zenaida Frank</td>_x000D_
                <td>Software Engineer</td>_x000D_
                <td>New York</td>_x000D_
                <td>63</td>_x000D_
                <td>2010/01/04</td>_x000D_
                <td>$125,250</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Zorita Serrano</td>_x000D_
                <td>Software Engineer</td>_x000D_
                <td>San Francisco</td>_x000D_
                <td>56</td>_x000D_
                <td>2012/06/01</td>_x000D_
                <td>$115,000</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Jennifer Acosta</td>_x000D_
                <td>Junior Javascript Developer</td>_x000D_
                <td>Edinburgh</td>_x000D_
                <td>43</td>_x000D_
                <td>2013/02/01</td>_x000D_
                <td>$75,650</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Cara Stevens</td>_x000D_
                <td>Sales Assistant</td>_x000D_
                <td>New York</td>_x000D_
                <td>46</td>_x000D_
                <td>2011/12/06</td>_x000D_
                <td>$145,600</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Hermione Butler</td>_x000D_
                <td>Regional Director</td>_x000D_
                <td>London</td>_x000D_
                <td>47</td>_x000D_
                <td>2011/03/21</td>_x000D_
                <td>$356,250</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Lael Greer</td>_x000D_
                <td>Systems Administrator</td>_x000D_
                <td>London</td>_x000D_
                <td>21</td>_x000D_
                <td>2009/02/27</td>_x000D_
                <td>$103,500</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Jonas Alexander</td>_x000D_
                <td>Developer</td>_x000D_
                <td>San Francisco</td>_x000D_
                <td>30</td>_x000D_
                <td>2010/07/14</td>_x000D_
                <td>$86,500</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Shad Decker</td>_x000D_
                <td>Regional Director</td>_x000D_
                <td>Edinburgh</td>_x000D_
                <td>51</td>_x000D_
                <td>2008/11/13</td>_x000D_
                <td>$183,000</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Michael Bruce</td>_x000D_
                <td>Javascript Developer</td>_x000D_
                <td>Singapore</td>_x000D_
                <td>29</td>_x000D_
                <td>2011/06/27</td>_x000D_
                <td>$183,000</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
                <td>Donna Snider</td>_x000D_
                <td>Customer Support</td>_x000D_
                <td>New York</td>_x000D_
                <td>27</td>_x000D_
                <td>2011/01/25</td>_x000D_
                <td>$112,000</td>_x000D_
            </tr>_x000D_
        </tbody>_x000D_
    </table>_x000D_
  _x000D_
  _x000D_
<script>_x000D_
    var myRows = [];_x000D_
    var headersText = [];_x000D_
    var $headers = $("th");_x000D_
_x000D_
    // Loop through grabbing everything_x000D_
    var $rows = $("tbody tr").each(function(index) {_x000D_
      $cells = $(this).find("td");_x000D_
      myRows[index] = {};_x000D_
_x000D_
      $cells.each(function(cellIndex) {_x000D_
        // Set the header text_x000D_
        if(headersText[cellIndex] === undefined) {_x000D_
          headersText[cellIndex] = $($headers[cellIndex]).text();_x000D_
        }_x000D_
        // Update the row object with the header/cell combo_x000D_
        myRows[index][headersText[cellIndex]] = $(this).text();_x000D_
      });    _x000D_
    });_x000D_
    var el = document.getElementById('tableDat')_x000D_
    el.items=myRows;_x000D_
_x000D_
  _x000D_
  </script>_x000D_
</body>

_x000D_

_x000D_

_x000D_

EDIT

How to pass data outside Polymer

_checkMinMaxDate(min,max) {

    this.dispatchEvent(new CustomEvent('date-changed', { bubbles: true, composed: true, detail: {items:this.items, startDate:min, endDate:max }}));
}

outside of the Polymer:

window.addEventListener('date-changed', (e)=> { 
     console.log(e.detail.items) // your items 
     console.log(e.detail.startDate) // Date to start 
     console.log(e.detail.endDate) // Date to end.
})
Answered By: Anonymous

Related Articles

  • How to change the color of vaadin-select-text-field in the…
  • Sort table rows In Bootstrap
  • Active tab issue on page load HTML
  • Can't correctly import external JS into Aurelia application…
  • bootstrap-datepicker in dd/mm/yyyy - selected date is…
  • External library reference works in Webpack but not in JSPM…
  • vaadin combobox load wrong custom style
  • vaadin-grid selection not working
  • HTML table with 100% width, with vertical scroll inside…
  • insert tables in dataframe with years from 2000 to 20018…

Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.

Post navigation

Previous Post:

how to use map.locate with Polymer 1.0 / leaflet-map 1.0

Next Post:

Polymer static variable listener?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

  • Get code errors & solutions at akashmittal.com
© 2022 Fix Code Error