Fixed column widths

jayk

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?

allan

An example is always very useful please, particularly when dealing with column widths.

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

jayk

Here is a jsfiddle. It's a messy example but I wanted it to be somewhat accurate to my actual data/columns.

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.

allan

Hi,

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

jayk

Hi Allan, please try again with the following url. I thought running the jsfiddle "saved" it, but apparently not.

http://jsfiddle.net/5JzKr/2/

allan

DataTables 1.10 with auto width enabled: http://jsfiddle.net/5JzKr/3/ . Is that more like what you are looking for?

Allan

jayk

Yes, in my simplified example that seems to work. However, it reminded me of a complexity where I don't want the words in a long cell to wrap, but to cutoff with an ellipsis (or no ellipsis, don't really care about that). So I've added my css for that to a new fiddle

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?

allan

Having DataTables work fully with table-layout: fixed is something on my todo list - it isn't yet quite right as you are seeing.

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

jayk

OK, thanks for the help. I have it almost working by manually setting the width of the grid/table when the columns are added or subtracted.

Great product! Looking forward to future releases.