FixedHeader: freezing top left cell when top and left headers are frozen.

Wodin

I posted about this under the FixedHeader forum, but I suppose it fits better under Feature requests.

I'm using FixedHeader and it's working well, except that the top left cell is not fixed when the top header and left column are fixed. Scrolling vertically works perfectly, but when scrolling horizontally the whole header, including the top left cell, scrolls along with the rest of the table. So the header for the left most column scrolls off the screen instead of staying fixed above the left most column.

What I would like is for the top left cell to be fixed when scrolling vertically or horizontally, whereas the rest of the top header would scroll horizontally and the rest of the left column would scroll vertically with the data in the table.

When the top and left headers are fixed there are two partial clones of the table. In order to fix the top left cell I think a third clone would be needed. I've given this a try, but I have not been able to keep it in the right position. I'm clearly doing something wrong, but am not sure what.

It seems to me that the corner cells should all be fixed depending on whether top, left, right, bottom are fixed. e.g. if bottom and right are fixed, then I think the bottom right corner cell should be fixed for both vertical and horizontal scrolling.

I hope my explanation makes sense.

Here's an animated gif showing the problem: http://i.imgur.com/dktuR.gif

And here's what I've got so far, which isn't working, in case someone can point out what I'm missing:
http://pastebin.com/ux1mC7dK

Thanks.

allan

Hi,

Great suggestion! Thanks for your post and Oroviding the detail for what you are looking for. At the moment you can change if you want to have the column or the row on top using the zindex options ( http://datatables.net/release-datatables/extras/FixedHeader/zIndexes.html ), but having the corner cell(s) floating independently from the others sounds like a really good (and sensible!) idea.

Added to the to-do list :-)

Regards,
Allan

Wodin

Thanks :)

I should have mentioned that I did try the zindex options, but as you say it doesn't give me quite what I'm looking for.

Wodin

Hi again

I know you're very busy. Just wondering if you have a rough time line for getting to this or how many other things are ahead of it on the todo list :)

Thanks.

allan

Its certainly on the back burner at the moment I'm afraid - I've got months worth of to-dos for DataTables and the extras! I will see if I can make some time to promote it up, but I can't promise anything at the moment.

Allan

Wodin

Thanks

Wodin

Can you confirm that the solution, specifically for the top left corner (but would need to be generalised for the other corners) would be to make a third clone of the table (i.e. 1=top, 2=left, and 3=top left corner) containing just the corner cell and then arrange for the scrolling to work like a combination of the top row and left column scrolling code?

I tried to do basically the above in the code referenced in my first message in this thread, but I'm clearly missing something with the scrolling code.

Thanks.

allan

Yes - that's the method that I would implement as well. The "tricky bit" will be the positioning of the element, you could use position:fixed to lock it to the top or to the left, but it would need to be updated for scrolling on the other one (while the cell needs to be floated over the table).

Allan

Wodin

OK, thanks for the hint. I fear that my lack of experience with this stuff will mean it takes me a very long time to figure it out, but hopefully less than the time it takes before you are able to get to it :)

Wodin

Got it working, more or less. It's a bit quick 'n dirty, so not suitable for inclusion as-is. Now I just need to figure out how to get the div, table and cell widths right.

In the following code, from _fnCloneThead that I've copied to my _fnCloneTopLeft, what does "this" refer to? The th element from the source table that is currently being referenced in the loop?

[code]
jQuery("thead>tr th", s.nTable).each( function (i) {
jQuery("thead>tr th:eq("+i+")", nTable).width(jQuery(this).width());
} );
[/code]

Are the widths for the containing div and the table set anywhere?

Thanks.

allan

'this' will refer to the FixedHeader instance (so you can call other functions, properties etc from the instance). Having said that the scope of 'this' will change depending on where in the code it is used - like in a jQuery call back, it is the element being operated on.

> Are the widths for the containing div and the table set anywhere?

Yes, but is best to read them from the DOM as they can be very fiddly (i.e. sometimes wrong). DataTables will set the widths it calculates, but sometimes the browser can override them...

Allan