data-table-column-filter.html

<link rel="import" href="../paper-input/paper-input.html">

<dom-module id="data-table-column-filter">
  <style is="custom-style">
    :host([hidden]) {
      display: none;
    }

    paper-input {
      --paper-input-container: {
        margin-bottom: 20px;
      };
      --paper-input-container-label: {
        font-size: inherit;
      }
    }
  </style>

  <template>
    <paper-input label="[[label]]" value="[[value]]" on-value-changed="_valueChanged"></paper-input>
  </template>
  <script>
    Polymer({
      is: 'data-table-column-filter',

      properties: {
        label: String,
        value: {
          type: String,
          notify: true
        },
        hidden: Boolean
      },

      _valueChanged: function(e) {
        // store value in a variable, referring to e.detail.value inside the debounce
        // function results in weird outcomes. event object might be reused by Polymer?
        var value = e.detail.value;
        this.debounce('value', function() {
          this.value = value;
        }.bind(this), 250);
      }
    });
  </script>
</dom-module>