tabulator: setHeight + redraw Seem to Break Virtual Dom Rendering
Hi again @olifolkerd,
TL;DR: I have actually solved (worked around?) my issue, but would appreciate your feedback on what I have documented below. Thanks again for all the support you provide.
Being new to tabulator I’m still getting my head around the inner workings of the code. I’m loving what I’ve been able to learn in just a couple of days using the product so thanks for it and the awesome support you provide!
I’m now running into issues when dynamically setting the table height which I realise needs to be set for the Virtual DOM to function.
- The docs state “…it can be set to any valid height css value.” EG:
$("#example-table").tabulator({
height:"100%", //set the table height option
});
However, this appears to render the table height to 100% of the DATA, not the available screen height like it would in CSS. Is this the correct functionality or is something going wrong? Also, only the first 20 rows have been populated…
- To get around the problems I was having with 1 above, I used the following:
$("#example-table").tabulator("setHeight", $(window).height() - 250);
$("#example-table").tabulator("redraw", true);
I tried using it in place of the height assignment above, but cannot use setHeight until the table has been constructed. So I moved it outside of the table constructor and thought my issues had been resolved… BUT, the Virtual DOM still did not update and my table only populated 50 rows this time.
- Leaving 2 in place I can set height: to anything >0 (1px, 800px, 100%) and all my problems go away… Why? 😃
Thanks again
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Comments: 27 (15 by maintainers)
UPDATE: Clearing the cache in Chrome seems to have fixed all my height problems.
After a cache clear, setting the size of the table in px worked without needing to set html and body to 100% in CSS.
html and body need to be set to 100% to use
height: calc(100% - 250px)in CSS.I’m not sure if it is something I did wrong or if tabulator or Chrome is caching some things they shouldn’t be. I have run into the same problem a few times and clearing the cache always resolves the issue. I can’t seem to reproduce it myself though unfortunately.
In summery, I’m happy to call this resolved! Yay! I’m currently using Tabulator 3.4.2, have removed my setHeight, redraw and require functions completely, and am only using one jQuery-ui library 😃. After clearing the cache on Chrome and refreshing my page, all tables are now working perfectly.
Thanks so much for all of your time on this issue @olifolkerd, I really appreciate it. The quick start example still mentions setting the height in the table constructor, but I notice you have updated it a lot since I last looked. So is that still OK to do, or should it be in CSS?