Dynamic columns not supported.

[dzliergaard]

Came here because of this issue in paper-datatable: David-Mulder/paper-datatable#78

I have a datatable that I want to populate with different data based on user selection of what table they are looking at. Unfortunately the headers for the first table loaded don't seem to update when they select a different table. (Note that if the second one has more columns than the first, the new columns do appear with the correct headers, but any columns that were already loaded don't update, despite the property pulling the correct item property in the rows).

However, I can't use a <template is="dom-repeat"...> element to create dynamic columns with paper-datatable-api, because the element doesn't observe the columns, it just sets them in the element's "attached" method.

Calling _setColumns manually to reload the columns works, but does not fire an update event so I would have to manually do that as well.

[RoXuS]

Hi @dzliergaard,

Could you provide me a simple example to illustrate your issue ?

[dzliergaard]

Hi, thanks for the quick response.

Here's some basic code - sorry I don't have time to put together a working interactive demo atm.

<paper-datatable id="datatable" data="{{tableContent.entries}}">
<paper-datatable-column header="ID" property="id"> <!-- static column -->
<template>
<span>{{value}}</span>
</template>
</paper-datatable-column>
<template is="dom-repeat" items="{{tableContent.columns}}" as="column">
<paper-datatable-column header="{{column.header}}" property="{{column.property}}">
<template>
<span>{{value}}</span>
</template>
</paper-datatable-column>
</template>
</paper-datatable>

Say that the bound tableContent's headers are initially
[
{ header: 'Name', property: 'name' },
{ header: 'Address', property: 'address' }
]

Then later, the user clicks a different table about job descriptions. The columns become

[
{ header: 'Name', property: 'name' },
{ header: 'Employer', property: 'employer' },
{ header: 'Job Title', property: 'title' }
]

The way that paper-datatable works, the headers of the columns at this point will be:

ID | Name | Address | Job Title

However, the "Address" column (which should be called "Employer") will still have the correct data (the entries employers), so the property is still being read correctly, just the column title does not update.

Unfortunately, the way that paper-datatable-api is written, all the dynamic columns will not be considered at all, because in paper-datatable-api.js, the element initializes its columns with a call to _setColumns during its "attached" callback, and never calls it again. So the only column to appear regardless is "ID."

If I manually call datatable._setColumn after the tableContent has changed, then at this point the columns would be

ID | Name | Address

As there is some delay in the update to its effective children.

[H3dz]

How many variations can you have?

Seems to me that the easiest solution would be to create more than one table and display the correct one when the data changes.

Another solution would be to create one table that contains all the columns and hide/show the columns when the data is updated. That's what I currently do to use the same table in a different context.

[dzliergaard]

The hiding/unhiding columns I hadn't thought of, that might be OK. Yes I could create a different element for each individual table, but that doesn't feel consistent with the ideology of Polymer and data-binding in general.

The page is going to be a resource for RPG game-runners to lookup all the tables available in a particular rulebook, and roll randomly on any given one. There will likely be a couple hundred by the time I have them all transcribed. I'd rather not have multiple table columns for every single one.

[RoXuS]

Hi @dzliergaard,

I added the support of dynamic headers.

You can see an example in demo : https://github.com/RoXuS/paper-datatable-api/blob/master/demo/dynamic-headers-demo.html and in live demo : https://roxus.github.io/paper-datatable-api/components/paper-datatable-api/#paper-datatable-api.

The only limitation is that you have to set the the headers to empty (like in demo this.headers = [];) before set the new headers because the Polymer observeNodes is able to see add and remove node but not the change. If you change column without add or remove columns the observeNode will not launch the callback to generate the new table. I still asked the question to Polymer team but in the meantime we have to do this.

I close this issue, if you have other questions don't hesitate to reopen it.

Thx.

[dzliergaard]

Thanks for following up, and for the instructions on how to make it work. I will see about updating my site and how it works!

[dzliergaard]

You can solve that observeNodes issue by using the Polymer builtin set('headers', [...]). That should update views correctly.

[RoXuS]

@dzliergaard It does not work, it is ok for you with my demo ??

[dzliergaard]

I later found that that only works when the number of columns has changed. If the number stays the same, then none of the repeated fields show. I feel like this has something to do with how the observer is added manually using a querySelector instead of just using the 'observers' attribute of the polymer base, but i haven't tested that theory.