Datatables: 'bAutoWidth: false' not working when 'sScrollY' is set

jsrjaput

I am using datatables to reformat the already existing table/DOM after page load. I have defined the column widths in percentages in thead

[code]



GroupName
Grouped By
Count
Download


....

[/code]

JQuery code looks like this.


[code]
oTable = jq("#myTable").dataTable(
{
"bSort" : false,
"bLengthChange" : false,
"bJQueryUI" : true,
"bPaginate" : false,
"sScrollY": "200px",
"bAutoWidth": false // Disable the auto width calculation
}).rowGrouping(
{
bExpandableGrouping : true //group by first column
});
[/code]

Issue is - When sScrolly is set, datatables calculates width automatically and sets equal width for all columns which it shouldn't be doing as bAutoWidth is set to false. On disabling it, columns widths are appropriately set as per percentages. Any suggestions on how to make it work?

Thanks

allan

Can you link to a test case showing the issue please: http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read ?

Allan

jsrjaput

Thanks Allan for looking into it.

I have created a test case on jsfiddle. http://jsfiddle.net/EysLd/

If I uncomment 'sScrollY' line, then column widths are set to default and does not follow percentages I have specified in html. I am using row grouping add on to group rows on basis of first column.

allan

Fantastic - thank you for this! Here is a slightly modified / simplified version of your JSFiddle which shows the problem: http://jsfiddle.net/EysLd/1/ .

I'm not entirely sure what is causing this, but I will take a look tomorrow and see what I can discover.

Allan

allan

Thanks very much for the Fiddle - invaluable to knowing what was going wrong!

I've just committed the fix: https://github.com/DataTables/DataTablesSrc/commit/41dc47b . Basically the fix is to read the `width` and / or `style` attributes of the column headers and apply them - otherwise we run into problems trying to remove previously calculate columns...

An updated fiddle is here: http://jsfiddle.net/EysLd/2/ .

And the DataTables with the fix: http://datatables.net/download/build/nightly/jquery.dataTables.js?_=11 (the `_=11` is just an anti cache, since that resource is cached by CloudFlare...).

Allan

MikeS

[quote]
An updated fiddle is here: http://jsfiddle.net/EysLd/2/ .
[/quote]

Is it just me or does anyone else see that the header widths of the table do not resize correctly when dragging the sizer bar to make the table wider/narrower? I see it in both Chrome and IE 10

allan

Not just you.

fnAdjustColumnSizing or `columns.adjust()` in 1.10 can be used to fix that: http://jsfiddle.net/EysLd/3/ .

Having said that, I thought I'd put that into DataTables core... Need to check that out.

Allan

jsrjaput

That's great Allan.. Thanks a ton for quick resolution.

I notice that when [code]"bAutoWidth": false[/code] line is uncommented (bAutoWidth is set to false), it again starts calculating column width automatically while it should keep preserving the column widths specified in html. and if set to true, it preserves the widths. So kind of behaving opposite to as it should.

My issue is resolved since I can just remove 'bAutoWidth' line now but just in case if I understood the behavior above mentioned correctly and it's a bug.

Thanks again.

allan

Sorry, I was thinking that I should explain what is happening there before I wrote my previous post, and then clean forgot while I was actually writing it!

So what is happening is that the width is not being calculated automatically ('auto width' means that DataTables will compute a "worse case" table and read the widths from that). However, it is applying a pixel value to the column width, which makes it look like it is doing column width calculations - and what I assume you are referring to.

Unfortunately, this is required with scrolling enabled. Because the table is split into two (or three) parts, header and body (+footer optionally), the columns must have a value applied to them to align them correctly. A percentage value doesn't work there - it has to be a pixel value. So what DataTables does is that on each draw, it measures the body, applies it to the header, and to itself, to make the columns align correctly.

That's why it looks calculated - it is, but not 'auto width' in the sense of the DataTables parameter if it is disabled. There is no way around that I'm afraid - the columns simply will not align otherwise (and its hard enough making them align as it is - the border-collapse:collapse for example is simply impossible to get correct, since the browsers use the content of the body to calculate width, which the header table obviously doesn't have!

Column width alignment in tables is a nightmare...

Allan

jsrjaput

I might not have been able to understand exactly but I get the point.
Thanks again.