saulis / iron-data-table Goto Github PK

When enabling selection and listen to selected row:

• selection-enabled attribute
• on-selected-item-changed listener

the event is propagated 3 times and only if clicking outside row cell text.

Using shady dom the behavior is correct, only one event and propagate the event when clicking in row cell text, maybe it is an iron-list bug...

Include the script in filtering.html and click on row cell text:

    <script>
                window.Polymer = window.Polymer || {};
                window.Polymer.dom = 'shadow';
    </script>
  <!-- Using webcomponents-lite.js here to support vaadin-combo-box -->
  <script type="text/javascript" src="../../webcomponentsjs/webcomponents-lite.js"></script>

Tested on Chrome 48

I have a project where I would like to have a dynamic number of columns as determined by the data. For example, given two inter-related data sets, call them A and B, that together form a two-dimensional matrix. I'd like the header row to be taken from A, the first column from B, and the intersection from the matrix.

It seems that I need a repeated template in order to include columns 2..n but I can't seem to get it to work. In the following example, column 1 is fully rendered but columns 2..n are not.

<iron-data-table items="{{A}}">
  <!-- column 1 { -->
  <data-table-column>
    <template is="header">
      <div class="right" title="Add B" on-click="addB">B<i class="icon add circle"></i></div>
      <div class="left" title="Add A" on-click="addA"><i class="icon add circle"></i>A</div>
    </template>
    <template>
      <ui-A-card item="{{item}}"></ui-A-card>
    </template>
  </data-table-column>
  <!-- column 1 } -->
  <!-- columns 2..n { -->
  <template is="dom-repeat" items="{{B}}" as="bItem" index-as="bdex>
    <data-table-column>
      <template is="header">
        <ui-B-card item="{{bItem}}"></ui-B-card>
      </template>
      <template>
        <ui-AB-card item="{{ getItem(item, bItem) }}"></ui-AB-card>
      </template>
    </data-table-column>
  </template>
  <!-- columns 2..n } -->
</iron-data-table>

Does iron-data-table not allow repeat templates when laying out the columns??

I have a component that wraps iron-data-table and passes in the data-table-columns like so:

<dom-module id="custom-grid">
  <iron-data-table>
    <content select="data-table-column"></content>
  </iron-data-table>
</dom-module>

When i try setting row details, however, the click handler for iron-data-table is consistently not being able to recognize the row-detail template passed in alongside data-table-columns (this.rowDetails is always null in line 1086 of iron-data-table.html even when I set it myself in the ready callback of the wrapper component).

With a null value in one of my columns (not intentionally, its in the data source), the filter crashes when it hits it.. in _filter

            if (value.toString().toLowerCase().indexOf(filter[i].filter.toString().toLowerCase()) === -1) {
              return false;
            }

Fails on the "toString()"

A fix is.

            if (!value || value.toString().toLowerCase().indexOf(filter[i].filter.toString().toLowerCase()) === -1) {
              return false;
            }

Good work on the table, I like using it better than the simple one I created a while back..

Given the following table, values update only when the inputs in the first column are touched.

  <iron-data-table id="table" items='["foo", "bar"]'>
      <data-table-column name="Two-Way Binding Title">
        <template>
          <paper-input value="{{title2}}"></paper-input>
        </template>
      </data-table-column>
      <data-table-column name="Two-Way Binding Title">
        <template>
          <paper-input value="{{title2}}"></paper-input>
        </template>
      </data-table-column>
    </iron-data-table>

Might be related with #8

I recently began using this element and I find it to be pretty awesome but I found a couple of issues while trying to use the built in sort features:

• The first one is a rather simple one I guess, the sort causes an error if the value of that column is undefined on a row.
• The biggest one though is what I mentioned in the title, using the sort feature on a column which is editable with two-way data-binding sometimes generates a weird behavior in which the values of several rows (if not all) end up synchronizing...

That last behavior is somewhat random but to trigger it you should trigger the sort and edit the values of different rows and then repeat those two steps several times (sometimes sorting multiple times before editing).

From what I've observed, this behavior happens no matter what column of the table is sorted as long as one of the columns is editable.

Hi,

i have very strange bug - when the data-table is on init stage line 723 :

 this.set('_cachedItems.' + index, item);

is causing following error TWICE:

polymer.html:3912 Uncaught TypeError: Cannot read property '0' of undefined

from

(anonymous function)    @   iron-data-table.html:723

Seems that iron-data-table is trying to interact with its FOR for all 50 elements and get some error

I have 3 instances od iron-data-table on page and every single one does the same.

Need help, trying to resolve it for a couple of hours...

Full func code:

 for (var i = 0; i < this.pageSize; i++) {
              var index = start + i;
              var item = items[i];

              this.set('_cachedItems.' + index, item);

              // TODO: send an issue/pr to iron-list, that makes sure the internal
              // collection stays up-to-date when `items` change.
              this.$.list._collection.store[index] = item;
              if (item && typeof item == 'object') {
                this.$.list._collection.omap.set(item, index);
              } else {
                this.$.list._collection.pmap[item] = index;
              }
            }

The two-way binding on the demo page in Internet Explorer 11 doesn't seem to be working. When I update a cell in the "first name" column and then push enter I am getting a console error: Object doesn't support property or method 'startsWith' and the "first name also" column doesn't update. I tried with both the lite version and the full version of webcomponents.

Currently, iron-data-table supports filtering by one value. But sometimes we need way for filter by list of options, for example: we have list of statuses, like 'Open', 'Closed', 'In Progress', etc, and only 'Open' and 'Closed' should be showed in datable.

When typing at a resonable speed on a filter, selecting those items will start to give the error

elements.html:25147 Uncaught TypeError: should be a valid item

If I type slower this doesn't happen.

A debounce is needed so that the filter is not updated on every key press, the iron-list can not handle the contents being changed so fast..

At line 111 or iron-data-table.html, I believe the height should be set to 'auto' instead of '400px', as follows:

:host { display: block; height: auto; position: relative; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }

This fits the height of the element to the encapsulating element. I didn't think this merited a pull request though ;)

By the way, I do want to mention how ridiculously excited I am about this element. Keep up the great work, and I will contribute where I can!

Thanks!

Since column headers have only a single element, it's not necessary to use templates. Using content injection should make things more straight-forward and improve binding support also on other frameworks. Should also fix #8

I have an application on polymer plataform , but for operational reasons, need to run plenty cellular and tables telephones , for which migrate over cordova apache, the problem that arises is that when I run emulating a cell the compononente not work for me without shed any error.
If I run the same application without touching any code emulating a browser works perfectly , you could guide me to solve the problem in advance thank you very much .

Tested on <iron-list> 1.2.4

I am running iron-data-table on polymer comfortably.

Recently I was trying to port my code to the newly released App Toolbox architecture of polymer. I am having a strange problem now.

Getting the following console error on line 781 of iron-data-table.html:
Cannot read property 'item' of undefined

I have checked both (my previous code and the new) have the same versions and everything else is same. It must be because of PRPL pattern introduced in this App Toolbox, i.e. lazy loading elements. Because that is the only difference I see. If thats right, what is the right way to do it?

If you need any more info on the problem, let me know.

Thanks!

Currently, this doesn't work:

<template is="dom-bind">
<paper-input value="{{filter}}"></paper-input>
 <iron-data-table>
  <data-table-column>
    <template is="header">
      <paper-input value="{{filter}}"></paper-input>
    </template>
   <template>
     [[item.data]]
   </template>
  </data-table-column>
</iron-data-table>
</template>

filter only propagates from parent to the header, but not in the other direction. Weirdly, if filter is also bound to row templates, it's starts working properly.

using Polymer.
I don't know the structure of my table upfront, so i need to create it dynamicly.
Right now i can make the columns dynamicly, but then inside the template
<iron-data-table items="[[recordList]]" >
<template is="dom-repeat" items="[[columnList]]" as="column">
<data-table-column name="[[column.label]]" >
<template>[[item.name.first]]</template>
</data-table-column>
</template>
</iron-data-table>
How can i 'link' the item to the columnName ? I can't just do
<template>[[item[column.labe]l]]</template>

Of the missing features this is the one most likely to block our adoption across the board for our projects.

If you have plans or ideas on how you wanted to achieve this, happy to give an attempt at implementing that. Just don't want to step on existing plans or conflict w/potential existing designs plans.

Hi! This looks really promising. I hope I can use it in my project.

I would like to be able to dynamically add elements using this.push, etc. When I do this, it does not display the newly added elements, as it does with iron-list. I may be doing something wrong. Here is what I am trying:

https://gist.github.com/kzahel/5b86054e42a9ecd898fc

Is there any config to disable a particular row in the table? Or if some config is added for the same, will that be useful?

Running polylint on my webapp, gives a couple of linting warnings on the data table..

$ polylint
Behavior Byutv.behaviors.Jsonp not found when mixing properties into byutv-jsonp!
app/bower_components/iron-data-table/iron-data-table.html:193:5
    The expression [[!loading]] bound to the attribute 'hidden' should use $= instead of =.
app/bower_components/iron-data-table/data-table-column-filter.html:14:5
    The expression [[hidden]] bound to the attribute 'hidden' should use $= instead of =.

I so often get these wrong too, polylint is helpful like that..

:)

When column count is 10-20 and above, <content> element distribution in Polymer will start taking huge amounts of time to load. Measured startup times up to 30s on a MBP.

Tried removing the content distribution and it takes the startup time down to few hundred ms.

Hello, newbie using iron-data-table like below, all works fine but the iron-data-table header invades the left drawer panel with the menu selection so you don't see the 'home' option when squeezing the page to cellphone format. With the other page divs (or sections) this works fine. Where need I look to correct the behaviour? Cheers, Karl

    <paper-drawer-panel>

      <paper-header-panel drawer class="fit"> 

        <paper-toolbar>
          <div>role</div>
        </paper-toolbar>

        <paper-menu class="content fit" selected="{{page}}" attr-for-selected="data-route">

          <a href="/" tabindex="-1">
            <paper-item raised>home</paper-item>
          </a>

          <paper-item on-tap="getAllList" data-route="list" label="list" raised>list</paper-item>

          <paper-item data-route="create" label="create" raised>create</paper-item>

          <paper-item data-route="update" label="update" raised>update</paper-item>

          <paper-item data-route="delete" label="delete" raised>delete</paper-item>

        </paper-menu>

      </paper-header-panel>

      <paper-header-panel main class="fit">

        <paper-toolbar>
          <paper-icon-button icon="menu" paper-drawer-toggle></paper-icon-button>
          <div class="flex">www.xyz.com</div>
        </paper-toolbar>

        <iron-pages selected="{{page}}" attr-for-selected="data-route">

          <div data-route="list">
              <iron-data-table dataSource="[[dataSource]]" size="[[size]]"id="fromSocket" >
               <data-table-column name="#" width="50px" flex="0">
                  <template>[[index]] of [[size]]</template>
                </data-table-column>
                <data-table-column name="PID">
                  <template>[[item.pid]]</template>
               .......and so on
              </iron-data-table>
          </div>

          <div data-route="create">
             <h1>create role view</h1>
              <div>
              pid     :
              <input autofocus
                     type="text"
               .....and so on
              </div>
          </div>

      </paper-header-panel>
    </paper-drawer-panel>

``

Hi there,
when using iron-data-table like this:

<dom-module id="sample-comp">
 <template>
  <style>
    .div1 { @apply(--layout-vertical); }
    .tbl { @apply(--layout-flex); }
  </style>
  <div class="div1">
     <div>title</div>
     <iron-data-table class="tbl"> ... </iron-data-table>
     <paper-button>button</paper-button>
   </div>
 </template>
</dom-module>

No vertical scroll bar will ever be shown. The intent is to let the table occupy all the available space and leave the button below and the title above. I've tryied wrapping the iron-data-table inside a div with an overflow set to auto but then the scroll bar will appear but event the header will scroll away.

The only way I've found to make the scroll bar appear correctly so far is to set a fixed height, but this is not the desired behavior.

Following the example with https://saulis.github.io/iron-data-table/demo/columns.html the "show/hide" seems only to work with Shady-DOM but not Shadow-DOM

works: window.Polymer = {lazyRegister: true};
doesn't work: window.Polymer = { dom: 'shadow', lazyRegister: true};

<paper-checkbox style="margin: 20px" checked="{{checked}}">more info</paper-checkbox>
...
<data-table-column name="Foo" sort-by="foo" hidden="[[!checked]]">
...
Polymer({
    // ...
    properties: {
      checked: Boolean, 

(I use iron-data-table inside a custom element of mine, and not in the main html page with dom-bind, maybe thats a difference.)
Chrome 49, Chrome 50 (Windows 10)

In iron-data-table sortOrder can be an array to allow multiple sort columns but in data-table-column-sort is handled as plain object. Also sort arrows are not accessible, why just not use paper-icon-button?

Here is a patch allowing configure the sort position in the sortOrder and change div by paper-icon-button to make #sortIcon accessible (only need to configure aria-label, need change iron-data-table also); also allow clear state up-down-newClick sequence -> direction must be reset and propagated to the UI:

Index: x-app-polymer/src/main/polymer-starter-kit-1.2.3/app/bower_components/iron-data-table/data-table-column-sort.html
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
--- x-app-polymer/src/main/polymer-starter-kit-1.2.3/app/bower_components/iron-data-table/data-table-column-sort.html   (revision )
+++ x-app-polymer/src/main/polymer-starter-kit-1.2.3/app/bower_components/iron-data-table/data-table-column-sort.html   (revision )
@@ -10,38 +10,43 @@
         margin: 4px;
       }

-      #sortIcon {
+      paper-icon-button {
-        position: relative;
+          position: relative;
-        width: 24px;
-        height: 24px;
+          opacity: .16;
       }

-      iron-icon {
-        fill: rgba(0, 0, 0, .16);
-        cursor: pointer;
-        padding: 0px;
+      paper-icon-button[active], paper-icon-button:hover, paper-icon-button[focused] {
+          opacity: .84;
+      }
+
+      paper-icon-button ::content iron-icon {
+        padding: 0;
         --iron-icon-width: 24px;
         --iron-icon-height: 24px;
         transition: all .2s;
       }

-      iron-icon[active], iron-icon:hover {
-        fill: rgba(0, 0, 0, .87);
+      paper-icon-button[direction='desc'][active] ::content iron-icon {
+        transform: rotate(-180deg);
       }

-      paper-ripple {
-        color: rgba(0, 0, 0, .54);
+      paper-icon-button[direction]:after {
+        content: attr(sort-order);
+        font-size: 9px;
+        font-weight: bold;
+        position: absolute;
+        right: 4px;
+        bottom: 8px;
       }
-
-      #sortIcon[direction='desc'] iron-icon[active] {
-        transform: rotate(-180deg);
-      }
     </style>

-    <div id="sortIcon" on-tap="_sort" hidden="[[hidden]]" direction$="[[direction]]">
-      <iron-icon active$="[[_isActive(path, sortOrder)]]" icon="arrow-upward"></iron-icon>
-      <paper-ripple class="circle" center></paper-ripple>
-    </div>
+    <paper-icon-button id="sortIcon"
+                       on-tap="_sort"
+                       hidden="[[hidden]]"
+                       icon="arrow-upward"
+                       active="[[_isActive(path, sortOrder)]]"
+                       direction$="[[direction]]"
+                       sort-order$="[[_computeSortOrder(path, sortOrder)]]"></paper-icon-button>

   </template>
   <script>
@@ -49,7 +54,10 @@
       is: 'data-table-column-sort',

       properties: {
-        direction: String,
+        direction: {
+            type: String,
+            notify: true
+        },
         hidden: Boolean,
         path: String,
         sortOrder: {
@@ -59,13 +67,45 @@
       },

       _isActive: function(path, sortOrder) {
+        if(Array.isArray(sortOrder)) {
+          return sortOrder.find(function(item) {
+            return item.path == path;
+          }) !== undefined;
+        }
         return path === sortOrder.path;
       },

       _sortOrderChanged: function(sortOrder) {
+        if(Array.isArray(sortOrder)) {
+          var path = this.path;
+          var sort = sortOrder.find(function(item) {
+            return item.path == path;
+          });
+          if(sort) {
+            this.direction = sort.direction;
+          } else {
+            this.direction = null;
+          }
+        } else {
-        if (sortOrder.path === this.path) {
-          this.direction = sortOrder.direction;
+          if (sortOrder.path === this.path) {
+            this.direction = sortOrder.direction;
+          } else {
+            this.direction = null;
-        }
+          }
+        }
+      },
+
+      _computeSortOrder: function(path, sortOrder) {
+        if(Array.isArray(sortOrder)) {
+          var sort = sortOrder.find(function(item) {
+            return item.path == path;
+          });
+          return sort && sort.order ? sort.order: null;
+        }
+        if (path === sortOrder.path) {
+          return sortOrder.order ? sortOrder.order : null;
+        }
+        return null;
       },

       _sort: function() {

Related with #16

Even though they don't render any content themselves, it's better to have them for better React support.

When hidden change on parent element, the width does not change.

Given a custom element:

<dom-module id="x-foo">
  <template>
    <iron-data-table items='["foo", "bar"]'>
      <data-table-column name="First">
      <template>
        <div>[[item]]</div>
      </template>
    </data-table-column>
    <data-table-column name="Second">
    <template>
      <div>[[item]]</div>
    </template>
  </data-table-column>
    </iron-data-table>
  </template>
</dom-module>

Due to the large-scale changes to DOM structure in v1.0.0-alpha5 table fails to render the rows inside a nested element.

Issue was originally reported by @davitykale and a fix is currently pending: 0084018

Given

<dom-module id="x-foo">
  <template>
     <iron-data-table>      
          ...
    </iron-data-table>
  </template>
</dom-module>

data-table-cell elements are not given x-foo and other style scope related classes. All instances of data-table-row have the classes though. Seems like only the first row has cells rendered in the DOM when it gets reapplied under the light DOM and those cells do get the styles correctly.

Shadow DOM works just fine.

The header drop shadow is incorrectly rendered on first paint, when the scroll position is at the top. Scrolling down and back up correctly removes the shadow.

The shadow should also only be applied when scrollTop is bigger than 0, in other words not when the scrollTop is zero or negative (which can happen when over scrolling):

https://github.com/Saulis/iron-data-table/blob/master/iron-data-table.html#L695

The only styling option you have is to pass in an element with the classes you want in the template... this is a very excessive route to styling a row for example based on some value in the row...

It would be nice if there was a row/cell hook that allowed class names to be applied directly to the row/cell elements avoiding the costly overhead of 1 function per cell just to style a row (not to mention the added overhead of wrapper elements to make it happen.

When using the dataSource property, noticed that function is getting triggered twice for each page. Also noticed the same thing on the demo page, https://saulis.github.io/iron-data-table/demo/.

Couldn't quite figure out what the reason is. I saw that the _loadPage function is debounced, but it still gets triggered an extra time unnecessarily.

I have a data table with multiselect. It's ok for chrome but not for other browsers. Can be observed as well on the demopage. In my app I see an error in the console - in the demo there is no error, but the row is not being selected either:
[Error] TypeError: undefined is not an object (evaluating 'Polymer.dom(e).event.path.filter') _selectionHandler (data:text/javascript;charset=utf-8,%0A…%0A:255) handler (data:text/javascript;charset=utf-8,Pol…%0A:496) dispatchEvent fire (data:text/javascript;charset=utf-8,Pol…%0A:1252) fire (data:text/javascript;charset=utf-8,Pol…%0A:833) forward (data:text/javascript;charset=utf-8,Pol…%0A:1123) click (data:text/javascript;charset=utf-8,Pol…%0A:1108) handleNative (data:text/javascript;charset=utf-8,Pol…%0A:723)

Seems like on-selected-items-changed is not fired.

Any ideas? Thanks for checking.

Hi,

when items object holds numbers there is a bug for filtering it on iron-data-table on line 592 which says that "value.toLowerCase() is not bla bla" - because it can do the numeric lowercase so to fix it simply add ".toString()" on line 592 in _filter function :

so i just changed

if (value.toLowerCase().indexOf(filter[i].filter.toLowerCase()) === -1) {
    return false;
}

to

if (value.toString().toLowerCase().indexOf(filter[i].filter.toLowerCase()) === -1) {
    return false;
}

OR we can do this between lines 591/592:

if(typeof value == "numeric") value = value.toString();

Hope i helped a lil bit :)

It appears like when an item is selected or unselected, the item is properly placed in the selectedItems array, but that no event is fired. The only time an event is fired is when all items are unselected using the checkbox in the header.

Ideas?