Ember-table: fails when used in a hidden div (workarounds welcome!)

Question

I'm trying to use ember-table inside a Bootstrap tab, but apparently if the table is contained in a tab that is initially display: none, the table layout doesn't work: everything is mis-sized and stuck in the upper-left of the table container.

I've narrowed the problem down by making a manually display-toggled div and it exhibits the same behavior.

I have a couple of ideas of how to workaround this, but I'm interested in others' ideas.

Also, should I file this as a bug? Seems like a common use case.

Answer 1

You can resize the table when you open the tab.

this.get('tableController').set('_width',820);

Answer 2

I had a similar situation, albeit not exactly the same. I initially show the ember-table component in a 'light' view, with one width, but the user can toggle between that and a 'full' view, with a larger width (as implied by its container). The toggle to larger width would size the container correctly but the portion of the ember-table not visible in the light view would contain only blank space, not cell contents nor borders, nor column headers. It's as if it never re-rendered after the container's dimensions changed.

The solution I found was to force a re-render of the table manually on the basis of an external property I would change when this light/full mode was toggled by the user. To achieve this, I extended the table component as shown:

export default Ember.Table.EmberTableComponent.extend({

  // exposes a hook to resize (i.e. rerender) the table when it would otherwise
  // not have been detected
  resizeTriggered: function() {
    this.handleWindowResize();
  }.observes('resizeTrigger')
});

Since I'm using ember-cli, I saved the above under components/my-table-component.js.

Having done this, I would then include the table in my template like this:

{{my-table-component
  columnsBinding="columns"
  contentBinding="content"
  resizeTrigger=resizeTriggerProperty
}}

Now, I simply update the controller's resizeTriggerProperty to any (new) value every time I want to ensure that the table re-renders. In my case, I would set it in the course of an action (e.g. MyRouteController):

actions: {
  triggerResize: function() {
    this.set('resizeTriggerProperty', new Date().getTime());
  }
}

Answer 3

This may be a little late, but I am using Ember Table 0.4.1 (latest), and I found that ember table redraws on window resizes, so I used this to make the tab show the table when the tab changes:

$(window).resize();

and this did the trick, ember table redraws itself whenever I change the tab.