Fixed column widths
Fixed column widths
jayk
Posts: 5Questions: 0Answers: 0
I am trying to make a grid with columns of an exact width where the width of the columns never changes (unless a user resizes the column). I've had some success creating the grid, but after the grid is initialized, if I hide columns within the grid, the remaining columns expand past their sWidth settings to take up the new space available in the grid. I'd like them to stay at exactly the sWidth that I specify in the aoColumns. Is there a setting to tell dataTables to never auto adjust the width of the columns? Alternately, a setting that tells it to set the width of the table to the exact width of the sum of all sWidths of the visible columns?
Thanks. If it helps I can try to create an jsfiddle or just an example to illustrate. But there is a lot of stuff going on in my actual code so it is difficult to boil down to the useful bits for this question.
A little more information :
I have
"bAutoWidth": false,
"sScrollX": "100%",
If I remove sScrollX things seem to work as expected, meaning that when I hide the columns the remaining columns maintain their original width. However, the header row does not scroll left-right with the data. In other words, when I drag the horizontal scrollbar to the right, the data moves with it, but the header stays where it is. So after scrolling, the header and data columns are no longer in sync.
If I put sScrollX back to 100%, the header row scrolls correctly, but when I hide columns, the other columns expand.
Edit 2 :
It seems to work exactly as I'd like if I do
"sScrollX": "100%",
"sScrollXInner": "100%",
Though I can't say exactly why it works or changes auto resize behavior :) If I remove the sScrollXInner the columns auto adjust.
Is there a better way to do this or did I stumble onto the answer?
Thanks. If it helps I can try to create an jsfiddle or just an example to illustrate. But there is a lot of stuff going on in my actual code so it is difficult to boil down to the useful bits for this question.
A little more information :
I have
"bAutoWidth": false,
"sScrollX": "100%",
If I remove sScrollX things seem to work as expected, meaning that when I hide the columns the remaining columns maintain their original width. However, the header row does not scroll left-right with the data. In other words, when I drag the horizontal scrollbar to the right, the data moves with it, but the header stays where it is. So after scrolling, the header and data columns are no longer in sync.
If I put sScrollX back to 100%, the header row scrolls correctly, but when I hide columns, the other columns expand.
Edit 2 :
It seems to work exactly as I'd like if I do
"sScrollX": "100%",
"sScrollXInner": "100%",
Though I can't say exactly why it works or changes auto resize behavior :) If I remove the sScrollXInner the columns auto adjust.
Is there a better way to do this or did I stumble onto the answer?
This discussion has been closed.
Replies
Generally I would suggest avoiding the use of sScrollXInner - it is going to be undocumented in 1.10.
If you want pixel perfect control you have to use `table-layout:fixed` in your CSS. IT is the only want of getting pixel perfect control. But it should be possible to get most of the control you want with the default parameters. As I say, a test case would allow me to identify what is going on.
Allan
http://jsfiddle.net/5JzKr/
If you run the example and look at the width of the 10xxxx column, then click on the "toggle columns" button, and re-check the 10xxxx column, you should see that the width is larger when the columns are toggled off. If you toggle them back to "on", the columns will be compressed again to their original size.
If you add
"sScrollXInner": "100%",
to the table definition, it will be compressed correctly with the columns toggled either on or off. But I suspect that it isn't a good way to accomplish this as I get warnings in the console. Also, in IE8 things get wacky with sScrollXInner.
FWIW - My goal is to be able to remove some columns from the grid so the columns to the right of the removed columns slide to the left. Since the table is so wide, this would make those columns visible. However, it completely defeats the purpose if all of the columns expand when the columns are hidden because the additional columns are still not visible. The columns don't need to be "pixel perfect" but I would like them to not auto adjust depending on the rest of the columns.
Thanks for linking to a test case. I'm afraid I'm not seeing any columns or data in the table you link to though?
Allan
http://jsfiddle.net/5JzKr/2/
Allan
http://jsfiddle.net/5JzKr/5/
This sets table-layout:fixed in order to force the columns not to expand to the width of the text in them.
Note that with the table-layout:fixed the column widths change with bAutoWidth enabled. With it disabled the headers do not line up with the columns. I suspect table-layout:fixed breaks bAutoWidth, is there any other way to cutoff the text in the column at the intended sWidth of the column?
I think the best that can be done at the moment is to wrap the inner content in a div which has the properties and width required set.
Allan
Great product! Looking forward to future releases.