Materialize data table fixed header with custom scroll

Question

I am using materialize data table in my application, using which I have implemented fixed header functionality. This is working fine for default page scroll bar.

Fixed Header with default scroll bar

HTML Code:

<div id="tblContainer" class="material-table z-depth-3 hoverable">
  <table id="myTable" class="highlight"></table>
</div>

JS Code:

$(document).ready(function(){
 var data2 = {
   "results": [{"Name":"test1", "Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test1", "Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1",
"Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"},
   {"Name":"test 1","Age":"23","Amount":"234944","Profit":"722636","Loss":"6346326","Address":"My test Address"}
   ]
 };

 $('#myTable').dataTable({
         data: data2.results,
        "order": [],
        "bSort": false,
        "bInfo": false,
        "paging": false,
        "searching": false,
        columns: [
          { data: 'Name', title: "Name" },
          { data: 'Amount', title: "Amount" },
          { data: 'Profit', title: "Profit" },
          { data: 'Loss', title: "Loss" },
          { data: 'Age', title: "Age" },
          { data: 'Address', title: "Address"},
          { data: 'Loss', title: "Loss" },
          { data: 'Age', title: "Age" },
          { data: 'Address', title: "Address"}
        ],
        "columnDefs": [
           { "width": "200px", "targets": [0] },
           { "width": "100px", "targets": [1] },
           { "width": "100px", "targets": [2] },
           { "width": "100px", "targets": [3,6] },
           { "width": "100px", "targets": [4,7] },
           { "width": "200px", "targets": [5,8] }
        ],
         "fixedHeader": {
           header: true
         }
    });
});

But when I set width for table and used custom scrolling means fixed header is not changing based on scroll.

Fixed Header with custom scroll bar

In the above code, I changed my HTML part like this and added this css. But fixed header is not working.

HTML Code:

<div class="row">
  <div class="col s8 m5">
    <div id="tblContainer" class="material-table z-depth-3 hoverable">
    <table id="myTable" class="highlight"></table>
  </div>
  </div>
</div>

CSS Code:

#myTable_wrapper {
  overflow-x:auto;
}

I have attached my two example JSFiddle here. How to achieve fixed header for custom scoll bar in materialize data table?

Answer 1

Apparently datatables' fixed header does not support scoll-x at all. I tried one or two moths ago, but couldn't find a solution. Read the topic here

Yet, i managed to solve this by changing my page design. I did not use a fixed header. But put my table at the top of the div, meaning no search box or pagination or anything on top of the table. Just like your first JSFiddle example.

After that, i gave an height to scrollY, and my header became fixed. What i mean is;

get rid of

"fixedHeader": {
           header: true
         }

and put these lines instead.

"ScrollX": true,
"scrollCollapse": true,
"sScrollY": 400

Try this on JSFiddle

Also, you can make the height dynamic, like:

"sScrollY": calcDataTableHeight(),

And function

var calcDataTableHeight = function() {
h = $('#wrapper').height() - 150;
return h;
};

you can play with the numbers, but dont forget to declare the function before initiating it.