Table switches to classic view if the containing UI has no size on load

Describe the bug Fiddle: https://jsfiddle.net/seedante/ukL47r1x/37/

When creating a tabulator table the row manager forces “classic” rendering on init if the table has no size. This causes elements that get their size later (from code, perhaps) to no longer take advantage of virtual rendering, which can crash pages with larger tables.

Modern presentation frameworks often create/destroy/show/hide elements based on some code execution (React, Angular, etc.). They also apply styles based on runtime states, which may developers use as sizing/positioning.

Offending line: https://github.com/olifolkerd/tabulator/blob/3b2ca3c83e80a381d3e187052bd6dd3e570e3223/src/js/row_manager.js#L1139

Tabulator Info Version: 4.1.5

To Reproduce

1. Load, it chooses “virtual” correctly.
2. Click “Hide Table” and “Show Table”.
3. The render type switches to “classic”, despite the element having size.
4. Clicking “redraw” does not fix this issue.

Note that calling table.rowManager.setRenderMode(); inside the “refreshTable” example will correctly re-draw as virtual, since the table as size. This is not a valid solution since Tabulator does an initial draw as classic mode, which actualizes each row.

Expected behavior When the table is set to virtual, it always renders as virtual. Even if that produces no rows.

Desktop (please complete the following information): Chrome Version 72.0.3626.96 (Official Build) (64-bit)

[c-dante]

After updating the fiddle, I think the problem is fixed when I ask the row manager to set its render style on when I set the data – if the table is instantiated hidden, the row manager never updates the render style (even if it gets its size later).

I do still hold that where the RowManager determines its render style (and it being detached from the actual render code) can be thought of as a bug. Since the lifecycle of the table and the decision on render style don’t really align. 100% the resize observer makes this a non-issue, if you consider:

renderStyle = observe(table.elt.size) => (height && virtual) ? virtual : classic

I’m A-OK with that being the design decision, so no need to really change that. I think the unexpected thing for me is when element pop in and out of existence, that state can change without being told to update. Closing the issue.

[c-dante]

This fiddle shows the issue I’m hitting, and I’m 100% okay with that use case not being supported by tabulator. https://jsfiddle.net/seedante/ukL47r1x/69/

The flow is: On load, table has a height, everything virtualizes nice. If you show/hide the element (even with redraw when hidden), everything is still nice.

If you create the table while hidden, the table get set to classic – showing the element after, even having it redraw after it is shown and has height, will never get out of classic mode.

So, in that fiddle, you would do: Remote table, hide element, create table

My question (since this is definitely not an issue/bug, as the docs are very clear about it) is: why?

If I’m able to create the virtualized table with a height, hide it (so, no longer has a height), and set data or redraw, there’s no problem. But if I happen to make the table instance with no element height, it gets forced into classic mode.