Fix for FixedColumns + FixedHeader without scrolling

Fix for FixedColumns + FixedHeader without scrolling

Nick HopeNick Hope Posts: 48Questions: 12Answers: 1

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?

Replies

  • allanallan Posts: 63,482Questions: 1Answers: 10,467 Site admin

    Hi Nick,

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

    Allan

  • Nick HopeNick Hope Posts: 48Questions: 12Answers: 1

    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;
    }
    
  • allanallan Posts: 63,482Questions: 1Answers: 10,467 Site admin

    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 HopeNick Hope Posts: 48Questions: 12Answers: 1

    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 HopeNick Hope Posts: 48Questions: 12Answers: 1

    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?

  • allanallan Posts: 63,482Questions: 1Answers: 10,467 Site admin

    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 HopeNick Hope Posts: 48Questions: 12Answers: 1

    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.

  • allanallan Posts: 63,482Questions: 1Answers: 10,467 Site admin

    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

Sign In or Register to comment.