Fixed header with horizontally scrollable table

Smoenybfan

Hi everyone

I want to have a table where the header and the leftmost column is fixed and the columns can be scrolled horizontally. I tried this:

fixedColumns: true,
fixedHeader: true,
scrollX: true

The problem is when I scroll down so the header stays fixed at top, he expands. He behaves like expected (stays the same size as the table and is horizontally scrollable) when he's not at his fixed position but as soon as you scroll down he expands to his full size.

Is there a way to make this work?

Thanks for your time

kthorngren

I'm not sure about your problem but I can tell you the fixedHeader and fixedColumn are not compatible to be used together. Check out the compatibility matrix:
https://datatables.net/download/compatibility

Also the fixedHeader is not compatible with scrollX, More info regarding compatibility can be seen in the docs:
https://datatables.net/extensions/fixedcolumns/
https://datatables.net/extensions/fixedheader/

Kevin

Smoenybfan

I feared so much, thank you for your quick confirmation.

In this case I'll search another way.

Thanks, have a nice day

sushantraje2000

I am facing similar issue do we have any workaround???
http://jsfiddle.net/xF8hZ/2318/

kthorngren

Still according to the documentation Fixedheader is not compatible with scrollX.

Kevin

hwijaya

Check the solution I put here
https://datatables.net/forums/discussion/47395/fixedheader-and-scrollx

hwijaya

I have read for 2 days about this, so joining all of them together, here's my contribution.

I got it figured out, hopefully this is useful for someone or help in the development as well.

My datatables is in a DIV and horizontal Scrolling enable due to huge table. When fixed header was set it was set as FIXED, and a new table is inserted at the BODY rather than inside the div.

I made it appended to the DIV instead of BODY so that the overflow rule might be inherited.

File:
dataTables.fixedHeader.min.js (search for "appendTo")
From:

e.table().node().cloneNode(!1)).removeAttr("id").append(f).appendTo("body")

To:

e.table().node().cloneNode(!1)).removeAttr("id").append(f).appendTo(".dataTables_scroll")

Now that it's appended to the the datatables-created-div, same level as dataTables_scrollHead, dataTables_scrollBody rather than stranded alone at body, whatever overflow still showing/sticking out.

File:
fixedHeader.bootstrap.min.css
From:

table.dataTable.fixedHeader-floating{position:fixed !important}

To

table.dataTable.fixedHeader-floating{position:absolute !important}

or File:
fixedHeader.dataTables.min.css
From:

table.fixedHeader-floating{position:fixed !important;background-color:white;}

To

table.fixedHeader-floating{position:absolute !important;background-color:white;}

Careful of CACHE of the CSS and JS files.

Now that the floating sticky row has appeared but out of place and overflow in effect.
Have this JS running, detecting when fixedHeader-floating appears, keep adjusting them to follow the horizontal scroll and stick to the top.

setInterval(function(){
  if($('.fixedHeader-floating').is(':visible')){
     var myoffset = Math.round($(window).scrollTop() - $('#Detail2Container').position().top + $('.topbar').height() - 145);
     var positionleft = $('.dataTables_scrollHeadInner').position();
     $('.fixedHeader-floating').css({ 'top': myoffset, 'left': positionleft.left + 10 });
  }
}, 50); //every 50ms

Detail2Container is the DIV that wrap the Datatables.
I couldn't use dataTables_wrapper as reference as there are a few of them in the same page. In my page, I only one table that needs fixedHeader, if I need 2, it will be tough. But I will deal with it when the needs arise.

You could adjust the calculation according to your own design.

2 days for me to figure this out. So I feel like sharing it too.

Potato11

What worked for me is this:

.dataTables_scrollHead {
  position: sticky !important;
  top: 0px;
  z-index: 99;
  background-color: white;
  box-shadow: 0px 5px 5px 0px rgba(82, 63, 105, 0.08);
} 

lvbullock

@Potato11 I am a newby trying to make it . Your code was most helpful. Was struggling for nearly 2 weeks. Finally works. Kept scrollX; removed fixedHeader from js and added Potato11's code above to CSS. Thank you.