Very wide table with FixedColumns and ColVisGroup performance issue

dougyBrown

Link to test case: http://live.datatables.net/modowobu/1/edit
Debugger code (debug.datatables.net): https://debug.datatables.net/ovasax
Error messages shown: Not errors as such but Chrome logs [Violation] Forced reflow while executing JavaScript took and [Violation] '' handler took and poor performance
Description of problem: This is a very, very wide table, the actual table is wider!

A significant number of columns will be hidden after initialisation with the user able to toggle the visibility if required. Current number of rows is ~ 100 max rows in the near future will be ~500. Max number of columns ~ 100.

Loading the page and then profiling the Show indicates that the FixedColumns timer fires with calls to FixedColumns._addStyles x + 2 times where x is the number of columns hidden in this case x = 60

I've reworked this to use colvisGroup to rule out my dodgy column toggle code. Making use of buttons-processing also highlights that the toggle takes a long time to be considered complete.

The Show button shows the columns pretty quickly but if you scroll horizontally then it's quite lumpy until the processing is complete.

So finally my questions:

1. I understand that FixedColumns is heavy on the calculations but there doesn't appear to be a way to disable or postpone the calculations whilst I'm fiddling with the column visibility or have I missed this in the documentation?
2. Am I abusing FixedColumns with hiding sooo many columns i.e. would it be better to have two versions and ditch the toggle on column visibility?
3. Any suggestions on how to fix or improve this situation? Currently the DataTable is initialised from the DOM would moving to data help?

I've stripped this table down to the bare minimum to show the issue, the performance issue is much worse on the full table with all the extra columns, data and even more DataTable extensions! By initialising FixedColumns after hiding the columns I can have a decent load time but toggling the visibility is still slow.

Any ideas, suggestions gratefully received!

Doug

allan

Hi Doug,

Many thanks for flagging this up and the test case! The styles should only be adjusted for the fixed columns when the column width are being recalculated. I've just made a commit for that and it makes a very significant difference to your example. The nightly will be up to date with that change soon.

The other thing you can do to help improve performance is enable paging. Adding and removing elements to and from the document is always a slow process. The more rows there are, the more cells that need to be added and removed.

Allan

dougyBrown

Excellent, thanks Allan I'll pick up the nightly build and have a play!

Regarding paging, I will try again to impress upon the users that paging is a good thing however they're pretty insistent on 'seeing' all the rows even if that is via a scrollbar...

Each time I work with DataTables I find yet another gem, its a seriously good piece of tech!

Thanks once again and I'll back once I've had a play.

allan

Thank you

dougyBrown

Have incorporated the nightly into my build and it works like a charm!

So thank you once again!