Fixed Header on Data Table Actionable Instance

[amritraj11]

Hi All,

I have a simple Data Table actionable instance that shows a list of ritms.

Below is the Screenshot:

I want to have the header of this table to be fixed on scroll.The CSS is the same as OOB.

Any ideas how to achieve this. I have tried many things but the alignment gets off every time i try

Please Help

nathanfirth

[Community Alums]

Please let me know if you got solution for this

[Michael223]

Hi there,

I came across the same issue and did it with jQuery. I have embedded the Data Table Widget I needed into a Custom Widget and then I have put the following code into the Client Script. There is still some improvement required (Like putting it into the Link function and stuff like that, but it's working for me at the moment)

Hope this helps!

var maxSearchCount = 10;
var searchCount = 0;

var searchHead = setInterval(function(){
 searchCount++;
 //widgetWrap - This must be the ID of your container for the embedded Widget (Or change the ID)
 var listCont = $("#widgetWrap");
 if(listCont.length >= 1) {
  listCont[0].addEventListener("scroll", function(){
  //55 was my offset Height of the Page Navigation and Burger-Menu
  var move = listCont[0].scrollTop-55;
  if(listCont[0].scrollTop == 0){
   move=0;
  }

  var translate = "translate(0,"+move+"px)";
  this.querySelector("thead").style.transform = translate;
 });
 clearInterval(searchHead);
}
if(searchCount>= maxSearchCount){
 clearInterval(searchHead);
}
}, 100);

[santu889]

Hi Michael. I have the same requirement. Can you share the Link code?