Fix for FixedColumns + FixedHeader without scrolling

Nick Hope

FixedColumns has been compatible with FixedHeader since the release of FixedColumns 4. There is an example of the 2 working together, with both header and footer, at https://datatables.net/extensions/fixedcolumns/examples/integration/fixedHeaderFooter.html

However, if you don't also use scrolling (scrollX / scrollY), the cells in the table header and footer are not fixed horizontally.

After many hours I finally figured out how to solve it with this css:

th.dtfc-fixed-left {
  background-color: white;
  top: 0; /* for the header */
  bottom: 0; /* for the footer */
  z-index: 3 !important;
}

Tested in Chrome and Firefox with FixedColumns 4.1.0 and either FixedHeader 3.1.9 or 3.2.3.

Here's a demo: http://live.datatables.net/nujapafu/1/edit

Perhaps this is something that could be incorporated in the Datatables code?

allan

Hi Nick,

Many thanks for flagging that up! I've committed a change for this here.

Allan

Nick Hope

Thank you @allan.

Actually your fix seems to just be for the transparent cell in the footer at the bottom of the fixed column(s), which I think I commented about on https://datatables.net/extensions/fixedcolumns/examples/integration/fixedHeaderFooter.html.

The code in this post is for a slightly different issue, whereby someone wants to fix header/footer and columns but NOT use scrollX/scrollY/scrollCollapse. Your fix obviates the need for the first line, so it's now just 3 lines of css (or 2 without a footer):

th.dtfc-fixed-left {
  top: 0; /* for the header */
  bottom: 0; /* for the footer */
  z-index: 3 !important;
}

allan

Hahah! I'm genuinely surprised that FixedColumns works without scrollX. It wasn't intended to, but Sandy sneaked that one past me (assuming it was intentional - I don't think we've ever tested for that specific case) .

I don't think we'll officially consider this mode supported, but I see no harm in adding the proposed CSS, so have committed that in.

Thanks again,
Allan

Nick Hope

I think it was just me pigheadedly trying everything under the sun (and spending far too much time on StackOverflow) until something worked, because I wanted this behaviour full-screen without scrollbars.

Thanks for incorporating it in the code. Hopefully there are no gotchas.

Nick Hope

Actually, @allan, if someone only wants a fixed column and no fixed header/footer, that new css vertically stickies the header/footer cells that are in the fixed column, which is not what you'd want. So I guess it's best not to add that css after all, unless you also put in some code to check if fixed header/footer is also enabled.

I still think it's worth mentioning in a comment on that example page for someone who wants a full window table with fixed columns and header (without scrollX/scrollY). Or maybe make another example page for it?

allan

Could you show me an example of what you mean please? I've just tried FixedColumns + FixedHeader on the page, with online FixedColumns active, and it looks okay (minus the error in the footer due to no background colour).

Allan

Nick Hope

http://live.datatables.net/zisozipi/2/edit

@allan I'm still talking about full screen, so without the scrollX and scrollY (which I've commented out). And I used the css from my comment above.

But looking at your commit, I see you did it in a slightly different way and it looks like you only changed the css for tfoot and not thead.

So I may well be confused and there may well be no problem.

allan

Right enough - I see the issue in the updated code. Given that the elements are position sticky, I'm not actually sure how that could be resolved. If there was a sticky-x option, similar to overflow-x, then that would do the job, but as far as I am aware, I don't think there is such an option.

I fear the boundary might have been pushed just a touch too far this time

Allan