Search code examples
polymerpolymer-1.0plunkeriron-data-tablepolymer-1.x

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

How do I add a filter attribute to <iron-data-table? (Please post a plunk demo.)

I forked this plunk. Then I tried to add a filter by adding the following line:

<iron-data-table
  ...
  filter="['item.user.name.first.length', '< 5']">

Which broke the plunk. Here is the new (now broken) plunk.

The documentation here describes the filter attribute as follows:

filter An array containing path/filter value pairs that are used to filter the items.

But it lacks an example of how to use it.

How do I add a filter attribute to <iron-data-table? (Please post a plunk demo.)

Solution

  • This isn't a very well documented feature:

    Normally, you would go about using filter-by and filter-value properties in <data-table-column> elements, but you can also access the filter property directly.

    When it comes to filtering items data source, there is only "contains" kind of filtering available. So, you pretty much can't do filtering based on string length like in your Plnkr with those. For more custom filtering functionality, you need to go using a function dataSource where you can do anything you want using the filters provided as arguments for the data source function.

    Anyways, in case you want still to access filter directly and for example provide a default filtering value, you need to set the value to be an array of objects, which have a path and filter property:

    this.filter = [{path: 'user.name.first', filter: 'donna'}];

    Here's an example: http://plnkr.co/edit/KIefwLNHeinkOgERWOvZ?p=preview