david-mulder / paper-datatable Goto Github PK

See Polymer/polymer#3094

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

I have this mixin:

paper-datatable {
      --paper-datatable-column-header: {
        color: red;
      };
}

It works fine on selectable table:

But it doesn't apply style to non-selectable table:

Did I miss out something? Thanks!

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

1. The columns need to register (attach) before table generation can start
2. But <th> are located inside the generated table

so 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.

If you use Firebase, then when editing rows in the table after the first editing, breaks "focus" or "binding"

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

Migrated from #39 @NamTThai

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>:

1. Show a progressbar
2. Fixate header width.

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.