ScrollY causes column resize with ColVis

halh

I am trying to revamp my DataTables deployment after a number of the users complained about the performance. Right now to keep the column widths from stretching out I currently capture the column toggle and then destroy and recreate the table with a new sScrollXInner width. When the table gets large with them adding more rows it can take some time to destroy and recreate. I would like to do this with ColVis entirely. My problem is similar to this guys problem but I am not using JqueryUI. I am however trying to use Fixed Columns and no paging with a scroll window. Having played around with the JSBin system I have found that any scrollX or scrollYbeing present in the options will cause the system to begin resizing data columns to fit the width of the screen/table rather than use a fixed column width.

Here is an example that I put together on the live system. This shows the behavior I do want as the columns really do not change format (there are some slight resizings going on but I am ok with that). Here is what happens when I turn on scrollY to 400px and you can see with this version the columns immediately revert to their resizing ways. This also happens with scrollX set to true or any other value (example of that here).

So this leads to 2 questions: 1) Is this the intended behavior or is this a bug? 2) Is there a way to force ColVis to keep column widths as defined with either the columns.width system or by some other method?

Also is there some standard method for setting the widths of columns rather than allowing the system to set the width? I am trying to keep the system from word wrapping things and causing multi-line rows.

halh

Ok. So I may have figured something out how to fix this. By setting the table view to fixed in my CSS file

table-layout: fixed;

then defined every width in the table headers, and ENABLING autoWidth got the table to render with the columns correctly. The size collapses gracefully as they are turned off. I was even able to set scrollX:true and scrollY:px size with scrollCollapse:true and it is still working as I was wanting. Even FixedColum works here. Here is the JSBin for how I have things configured now: new working with FixedColum

At this point I can now get rid of the crazy hackaround I used in the old version which has improved responsiveness dramatically so far. Any reason this is not the default CSS view?

allan

I am trying to keep the system from word wrapping things and causing multi-line rows.

Add the class nowrap to your HTML table's classes. Updated example with that (and auto width re-enabled and width:auto removed from the table).

Is that what you are looking for?

Allan

halh

Hey Allan thanks for the reply. Yes that did fix it. I was able to use your example and get things cleaned up a bit. And that "nowrap" fixed another issue I was having with Fixed Columns. Now this new rewrite is getting really close to done. Thanks.