How to add sticky header to table

[Ivcast20]

Pleaseee I want to Know if there's a way to make a Sticky header to a datatable.

[lrljoe]

What do you mean by Sticky Header?

[Ivcast20]

I'm using bootstrap

[lrljoe]

I'll have to take a look over next few days for BS.

In theory you just need to pass "sticky top-0" to the thead and its tr element(s). How bootstrap will behave is not my specialism so I'll need to take a look.

[lrljoe]

Yeah, you'll need to pass the correct classes to make a table header sticky using:
setTableAttributes
setTheadAttributes
and
setThAttributes

I'll put a quick example together, but you'll need to tweak it to get it looking exactly how you'd like it.

[Ivcast20]

Please if you can help me with an example I will apreciate it.

[lrljoe]

Then in your configure do something like the following:

$this->setTableWrapperAttributes([
      'default' => false,
      'class' => '',
    ])
  ->setTableAttributes([
      'class' => 'w-full border',
  ])
  ->setTheadAttributes([
      'class' => 'sticky-top',
  ]);

That will set your table to be full-width, and for the Thead to be sticky. You'll need to style it appropriately, as otherwise you'll notice that it won't have a decent background. Not sure how it'll work responsively, but it gives you a good starting point.

Tailwind is a much easier learning curve by the way!