Search code examples
polymerpolymer-1.0plunkeriron-data-tablepolymer-1.x

Polymer 1.x: iron-data-table does not load data nor header styles on first render when inside neon-animated-pages

The below screenshot shows how my iron-data-table element looks when it first loads. Notice the data is missing and the headers are not fully formatted (the width seems to be too small to show the column header labels).

enter image description here

However, if I enter a character in the filter fields or click one of the sort buttons, the iron-data-table seems to re-draw itself and it looks fine. The columns and headers render properly and the data populates the table as expected.

This problem started when I added some directories to my file structure nested my iron-data-table inside neon-animated-pages. I double checked and all my imports are loading correctly. But I suspect that, somehow, there is a slight delay in fetching the data and somehow the table might be trying to render before the data arrives and not refreshing after the data arrives.

So I tried to add the following function. But to no avail. There is no render() method for iron-data-table.

<iron-data-table id="grid" ...

....

attached: function() {
  this.async(function() {
    this.$$('#grid').render();
  }.bind(this), 500);
},

What could be causing this behavior? And what should I try next?

Edit

This plunk demonstrates the desired iron-data-table behavior.

This plunk demonstrates my problem behavior. (Not finished yet. Currently in progress.)

The configuration is approximately as follows.

parent-el.html 
<neon-animated-pages>
  ...
  <container-el...>...</container-el>
</neon-animated-pages>
container-el.html 
<child-el ...>...</child-el>
child-el.html 
<iron-data-table ...></iron-data-table>

Edit 2

Based on @SauliTähkäpää's comment, I tried the following fix unsuccessfully.

parent-el.html 
<neon-animated-pages id="animator" ...>
  ...
  <container-el...>...</container-el>
</neon-animated-pages>

...

attached: function() {
  this.async(function() {
    this.$.animator.notifyResize();
  }.bind(this), 50);
},
Solution

  • Not that familiar with neon-animated-pages but by looking at the docs, it should call notifyResize() on selected pages as long as they extend iron-resizable-behavior.

    So I think your options are either to make sure <container-element> and other elements in the tree are extending iron-resizable-behavior OR override the resizerShouldNotify to notify the grid directly. See more here: https://elements.polymer-project.org/elements/neon-animation?active=neon-animated-pages#method-resizerShouldNotify