polymerpolymer-1.0plunkeriron-data-tablepolymer-1.x

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

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?

Solution

  • 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