david-mulder / paper-datatable Goto Github PK
View Code? Open in Web Editor NEWA material design implementation of a data table.
License: GNU General Public License v3.0
A material design implementation of a data table.
License: GNU General Public License v3.0
Can be temporarily fixed by changing line 4195 in Polymer.html to
keys = keys.filter(function (a, i, keys) {
return self._filterFn(c.getItem(a), i, keys);
Per title
<paper-datatable-column sortable="asc">
shoud only allow ascending sort (arrow up)
<paper-datatable-column sortable="desc">
while this should only allow descending order (arrow down)
This would be the coolest resize mode ever! Depends on #39
Hi,
I can't find out how to set the length of a dataSource after I made an ajax request. Could you give me a hint or is this not implemented yet?
I tried
length: function () {
return new Promise( function ( resolve, reject ) {
resolve(500);
} );
}
self.dataSource.length = 500;
self.dataSource.set( 'length', 500 );
self.dataSource.set( 'numberOfItems', 500 );
self.$.datatable._setNumberOfItems( 500 );
Thanks for your help
Greetings Kersten
Set calls can happen at a crazy rate if used in combination with for example a <google-map>
The spec also speaks about having a resize behaviour where overflowing header labels are hidden through overflow rather than a scrollbar. Maybe implementable through https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
Per title
Per title
It would be great to add a filtering option to the component ร la datatables.net. It would probably be an implementation of the native filter(), but it would be nice if paper-datatable-column
had a filterable
attribute that indicated if you wanted to filter on thiat column or not.
When I use
<paper-datatable-column property="isAdmin" header="Administrator">
<template>
<paper-checkbox checked="{{value}}"></paper-checkbox>
</template>
</paper-datatable-column>
It will trigger a set
on my data-source
on initialization
Per title, will make it easier to understand how to implement stuff
This is a lot harder than it sounds, as
<th>
are located inside the generated tableso you get a bit of a paradox, which could be solved by just showing them on top of the th's.
example:
<paper-datatable-column ... format-value="[[formatValue]]" ...> </paper-datatable-column>
Polymer({
is: "xyz",
...
formatValue: function(value){
return (this._isNumeric(value) ? Number(value).toLocaleString("en-US") : value );
}
});
It won't overwrite the default implementation for formatValue in paper-datatable-column.html
.
Not sure what's happening, but since the update to Polymer 1.2 data changes on arrays do not get properly notified upwards as can be seen in the demo/datatable.html
demo at the bottom of the page.
Added a fair number today (enough to make a pretty solid theming demo), but still should add more.
Not sure yet how to do this, but it should get dismissed when you click somewhere else.
Per title, right now changing properties on selectedItem
doesn't get reflected back everywhere neatly.
.splices
doesn't get 'initialized' thus _isRowSelected
doesn't trigger in
_isRowSelected(item, multiSelection, selectedItem, selectedItems.splices)
causing single selection to not work
Per title, really needs far more documentation
This isn't working at all due to Polymer/polymer#3107 , however as soon as that bug is fixed it should magically work. To get it working 80% for now set a placeholder tooltip attribute on every column (and it still won't work on resize).
Right now sort switches on every click... even between columns
Per title
I recently found your project and it looks amazing. Just a question. I have a couple of use case when table overflow data quite easily. So how do you handle overflow in these 2 cases:
- Overflowing vertically: Do you have a feature for freezing table header and only scrolling table body? I know that you have a feature to only display 10/20 rows but sometimes it would be great to show all the rows.
- Overflowing horizontally: Adding too many columns and it no longer fits on viewport. How do you deal with this? Is there a bottom scrollbar for example?
Thanks for the amazing work!
Row selection doesn't work when clicking somewhere randomly, problem is that event.path
apparently isn't cross browser:
TypeError: ev.path is undefined
It's a bit hidden in the material design spec, but on :hover
an indicator should be shown that a column is sortable.
Figured out how to do it in https://github.com/David-Mulder/leather-editable-list , just need to implement it now here.
Edge debugger is super crappy, so not sure what's happening, but:
Unable to get property 'title' of undefined or null reference
Somewhere in paper-datatable.html.js
Cancelling selection requires finding the selected rows now, which sucks in <paper-datatable-card>
's that support multi page selection.
David - thanks so much for building and sharing this element. I've found it extremely helpful in my project.
I'm struggling with implementing one of my usecases... Was hoping you could point me in the right direction.
I have a datatable mapped to an Object "results" which contains an array called "legs". Is there an idiomatic way to create a column for each item in the legs array? My first thought was to do a <dom-repeat>
of <paper-datatable-columns>
with custom <template>
s. However, I haven't figured out how to access the each of the items within the <template>
.
Is there a simple solution that I haven't found? I appreciate the guidance!
Damn, this sucks big time, removal of ids on the <paper-datatable>
level means I can't uniquely identify items easily on a super level anymore.
Initialize template only on-tap
, somewhat in line with the Material Design editable indicator
Per title, problem is that selecting all items would require a new function on the data-source
that requests all ids~ Relatively easy to do when using the ids->getByIds approach, harder with just the get
approach.
Per title, isn't working right now for the most part.
_allChecked(selectedIds.splices, data.splices)
Per title
No idea how to fix this really, binding by default on blur or something might be an idea, but that would be pretty hard I think~
<paper-datatable-column header="My Header" property="myproperty"></paper-datatable-column>
If myproperty is undefined in any row, following TypeError causes all the subsequent rows to be left unrendered.
TypeError: Cannot read property 'toString' of undefined
at paper-datatable-column.Polymer._cast (paper-datatable-column.html:331)
at paper-datatable-column.Polymer._formatValue (paper-datatable-column.html:289)
at paper-datatable.<anonymous> (paper-datatable.html:595)
at Object.Debouncer.complete (polymer.html:1227)
at Object.Polymer.Async._atEndOfMicrotask (polymer.html:1184)
at MutationObserver.window.MutationObserver.observe.characterData (polymer.html:1199)
I believe following code in paper-data-column._formatValue should be moved up before call to _cast.
if(typeof data == 'undefined'){
return '';
}
Per title
Do you support data binding with array index or sub-property? Say I have this data object:
[
{
"id": 1,
"infoArray": [a, b, c],
"infoObject": {
"prop1": "var1"
}
}
]
and I want to build a table like this:
<paper-datatable data="{{data}}">
<paper-datatable-column header="Info Array" property="infoArray.0"></paper-datatable-column>
<paper-datatable-column header="Info Object" property="infoObject.prop1"></paper-datatable-column>
<paper-datatable-column header="Info Array2" property="infoArray[0]"></paper-datatable-column>
</paper-datatable>
Things to do whilst data is loading in <paper-datatable-card>
:
Per title
Per title
The rows should be scrollable by overflow and the table head should not be scrolled
Would be neat to cache items whilst browsing in <paper-datatable-card>
. Sad part is that a real weak cache isn't possible yet in modern browsers, but it looks like this will be coming at some point in the future, so implementing weakCache.js would create a nice basis to have strong caching for now and an easy layer to set up weak caching later.
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.