Polymer 1.x: How to use dataSource function to filter iron-data-table?

Question

Here is the Plunk.

I want to implement the dataSource filtering function for <iron-data-table as described in the accepted answer to this SO question. My problem is the docs here do not give an example of how to accomplish this.

Eventually, I will want to have a complex set of filters (think: control panel) on a large data set of items.

I have tried copying the approach employed by dom-repeat described in the docs here but without success.

http://plnkr.co/edit/cGykY65HWnK4pIQ0qx8O?p=preview

<iron-data-table
    items="[[users.results]]"
    data-source="source(item)">
...
    source: function(item) {
      return item.user.name.first.length > 6;
    },

How do I correctly implement the dataSource property function to filter the items of <iron-data-table?

Answer 1

The dataSource property takes a function as a value, so the most straight-forward way is to define a function property in your parent element and use normal Polymer bindings to pass that down.

The function signature isn't unfortunately very well defined, but there are some examples in the iron-data-table demo pages: http://saulis.github.io/iron-data-table/demo/ (remote data example)

I've updated your Plunkr accordingly: http://plnkr.co/edit/VWIAvWAnuf2aiCjJjCdI?p=preview

Answer 2

For completeness, the code in the accepted answer is as follows:

http://plnkr.co/edit/VWIAvWAnuf2aiCjJjCdI?p=preview

<base href="https://polygit.org/polymer+:master/iron-data-table+Saulis+:master/components/">
<link rel="import" href="polymer/polymer.html">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>

<link rel="import" href="iron-ajax/iron-ajax.html">
<link rel="import" href="paper-button/paper-button.html">

<link rel="import" href="iron-data-table/iron-data-table.html">

<dom-module id="content-el">
    <template>
        <style></style>

    <iron-ajax
      auto
      url="https://saulis.github.io/iron-data-table/demo/users.json" 
      last-response="{{users}}">
    </iron-ajax>
    <iron-data-table
        data-source="[[dataSource]]">
      <data-table-column name="Picture" width="50px" flex="0">
        <template>
          <img src="[[item.user.picture.thumbnail]]">
        </template>
      </data-table-column>
      <data-table-column name="First Name">
        <template>[[item.user.name.first]]</template>
      </data-table-column>
      <data-table-column name="Last Name">
        <template>[[item.user.name.last]]</template>
      </data-table-column>
      <data-table-column name="Email">
        <template>[[item.user.email]]</template>
      </data-table-column>
    </iron-data-table>

    </template>

  <script>
    (function() {
      'use strict';
      Polymer({
        is: 'content-el',

        properties: {
          users: Array,
          dataSource: Function
        },

        observers: ['_usersChanged(users)'],

        _usersChanged: function(users) {
          this.dataSource = function(params, callback) {
            var filteredUsers = users.results.filter(function(item) {
              return item.user.name.first.length > 6;
            });

            callback(filteredUsers, filteredUsers.length);   
          };
        }
      });
        })();
  </script>
</dom-module>