scrollX: true generates an additional row instead of a scrollbar

RoloTomasi

Hi all,
since it is obviously not that easy to combine multi search filters with responsive tables, I decided to make the table scrollable.
But if scrollX: true is added, the table gets an additional row header instead of a horizontal scroll bar. Is there something missing? What do I do wrong?
https://jsfiddle.net/RoloTomasi/w2espo8z/14/

Thanks in advance

rf1234

fixed header isn't compatible with scrollX right now.
https://datatables.net/extensions/fixedheader/

But of course there could be other issues as well.

RoloTomasi

I have commented out fixedHeader: true for testing. But the result remains the same. Does anyone have any other suggestions?
https://jsfiddle.net/RoloTomasi/w2espo8z/15/

rf1234

I am out, sorry. I also use scroll x and it works. Can't see why it doesn't work in your case. I am sure that @allan, @colin or @kthorngren will be able to help you tomorrow!

kthorngren

I believe scrollX clones the header, hides the original and displays the clone to handle the scrolling. Looks like if you create the header inputs and click event before initializing Datatables it will clone those too.
https://jsfiddle.net/r2ekvm31/

Also you can look at this FixedHeader example:
https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html

Kevin

allan

It might also be worth considering using SearchPanes as that works well with a Responsive table.

Allan