iron-data-table does not load data nor header styles on first render

Please read full question described here.

http://stackoverflow.com/questions/39951146/polymer-1-x-iron-data-table-does-not-load-data-nor-header-styles-on-first-rende

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

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

Saulis / iron-data-table

iron-data-table does not load data nor header styles on first render #154