Column widths
Column widths
peterkronenberg
Posts: 112Questions: 0Answers: 0
How does Datatables determine the column widths? Is it based on the widest content or the header labels? I don't know in advance what content I will have, so I don't want to specify widths. I would like Datatables to take care of it.
This discussion has been closed.
Replies
So yes, DataTables should do this for you automatically.
I did experiment with using DOM width calculations which is a lot more accurate than the strlen (for example 'mmm' is much wider than 'iiii'!), but it was so unbelievably slow in IE that it simply wasn't worth it. I do have the code still available for anyone who does need this level of accuracy, but strlen is normally good enough.
Allan
http://www.nova.org/~pak/test/columnWidth.html
Allan
Allan
I'll take a look at fnAdjust ColumnSizing
Not only did I comment out the hiding, but I added a call to fnAdjustColumnSizing. The style that is applied to the table no longer has a width of 0, but it is still not nearly sufficient. And again, if I change the width in Firebug to 100%, it looks fine. Can you take another look? http://www.nova.org/~pak/test/columnWidth.html
Any thoughts on this? I still can't get the table to use the full width. I'm not hiding the table and I'm calling fnAdjustColumnSizing but some of the fields are still wrapping
Allan
Can you take a look at the css? Maybe you could spot the problem or figure out how Datatables is coming up with the width that it is applying directly.
Allan
Allan
Allan
The temporary table that is created in order to calculate the widths, was using a different font and font size. I wouldn't go so far as to call this a bug, but definitely a design limitation that should be better documented. The problem is that in your css files, you simply use a 'table' selector to describe the table. In my code, I was a little more specific, using table#mainTable. I could certainly see other people using other classes or other selectors. But if 'table' is not used, then the temporary table will not take on the same characteristics as the actual table that is being formatted.
It's late, so I will finish playing with this tomorrow, but I'm sure I'll get this to work.
I think a possible solution, to make DataTables be a little more flexible in this area, is to allow the user to define a class that will be used for the temporary table. Then, I would at least know that my css file needs to be defined as
[code]
table#mainTable, table.class {
}
[/code]
It seems that _fnCalculateColumnWidths is called twice on a single call to DataTables. Why is that?
This wasn't quite as simple as I thought it was, but I'm getting close. I think there is definitely a bug for one case. And the other case, I still can't figure out. I really hope you can take a look at this. The example is at http://www.nova.org/~pak/test/columnWidths.html. I added a bunch of log statements in DataTables. Here is what I'm seeing.
I believe there is a bug in the first part of fnCalculateColumnWidths (line 5329). If the table is not yet rendered, because the data is sent in to DataTables, then this code is just being executed on the columns headers. So each column is as wide as the header. You can see this in my example if you use the drop-down to select the 2nd table (4colTable). If you look at the 3rd column, you can clearly see that the column is only as wide as the header.
If you do this with a table that has a hidden column (3colTable in my example), that triggers the else clause of your code at line 5346. Notice that I am leaving the test table that you create so we can see it. It appears that the test table you create and the actual table are the same width. So you are calculating the width correctly. But if you look at the 1st and 2nd displayed column ('value' and '3rd'), it appears that the 'value' column has a little space added to it and the same amount of space if taken away from the other column. This is what I can't figure out at all. The styles are exactly the same. I can't figure out what is causing that extra space to be added.
thanks so much for your help
Hopefully you are back in town now. I hope you get a chance to look at this. Still trying to solve my column width problem.
Allan
I'd really appreciate it if you could tale a look at this one. It still has me stumped. I made 2 donations in the last two weeks in the hopes that it would help.
thanks
What I believe is happening here is an issue with the CSS styles applied to the table - specifically:
[code]
table thead tr th.sorting {
padding-right: 20px;
}
[/code]
That is applied to the column TH elements which aren't currently being sorted on - while the sorting column TH element only has 1px of padding. Setting them both to be the same should solve the issue. You can see this in action if you click on the first visible column to sort by it - the table is displayed as expected.
Allan
What do you think about the bug that I identified above. I do think there is a bug when passing data in to DataTables, as opposed to it being already in the HTML.
Note that the first table has a hidden column, but it is hidden after DataTables initializes, using fnSetColumnVis and not using the bVisible init flag. I'm letting you know this just in case it makes a difference.
I know that it must be something I'm doing and I'm perfectly prepared to be embarrassed :-)
thanks
Did you have a chance to look at this again?
Allan
Allan