saulis / iron-data-table Goto Github PK
View Code? Open in Web Editor NEWiron-data-table is a Web Component for displaying data as a table or grid. Built on top of iron-list using Polymer.
License: Apache License 2.0
iron-data-table is a Web Component for displaying data as a table or grid. Built on top of iron-list using Polymer.
License: Apache License 2.0
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)
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?
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 hidden change on parent element, the width does not change.
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..
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 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.
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?
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.
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!
When enabling selection and listen to selected row:
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>
Even though they don't render any content themselves, it's better to have them for better React support.
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 .
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>
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 :)
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:
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;
}
}
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.
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:
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..
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
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??
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
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 a component that wraps iron-data-table
and passes in the data-table-column
s 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).
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>
``
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.
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.
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.
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.
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.
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
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
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.