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

强颜欢笑 提交于 2020-01-07 05:43:09

问题


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?


回答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




回答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>


来源:https://stackoverflow.com/questions/40250746/polymer-1-x-how-to-use-datasource-function-to-filter-iron-data-table

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!