Despite using Responsive Plugin Datatable is Scrollable
Despite using Responsive Plugin Datatable is Scrollable
Pichutan
Posts: 4Questions: 1Answers: 0
Hello there,
I am using a DataTable with Bootstrap 5 and simple initialization:
<div class="table-responsive" style="border-top: 1px solid transparent;">
<table id="tableExample" class="table table-striped table-hover dataTable dtr-column collapsed" style="width: 100%;">
</div>
</div>
and (coffeescript ahead)
pageLength: -1
responsive:
details:
type: 'column'
columnDefs: [
{
targets: 'dt-name-responsive'
className: 'dtr-control dt-no-export'
data: null
defaultContent: ''
orderable: false
}
]
inside the table i have multiple columns with the data-priority=attribute to define which columns shouldnt be visible. But since the datatable is somehow scrollable, it seems like it doesnt hide the columns.
I checked with the debugger for common problems but everything seems to be fine.
Do I miss something to make the responsive plugin work with BS5 and Datatables 2?
Kind Regards,
Pichutan
This question has an accepted answers - jump to answer
Answers
You have
divwith thetable-responsiveclass which I believe is Bootstrap's responsive table mechanism. You can see the behavior here of BS enabling scrolling of the table. Remove that and that should allow Datatables responsive to hide columns.Kevin
Hey Kevin,
Thank you for your answer, i removed it but now the table overflows the container sadly.
But maybe I am mistaken but...shouldnt responsive hide columns if the space of the parentcontainer is not enough? - Or is it taking the viewport?
I created a jsonfiddle: https://jsfiddle.net/Pichutan/a2pdLqn7/11/
Thanks for any help
That is what should be happening, and I'm not yet sure why that isn't happening in your example. Responsive is hiding some columns, but not enough of them. I'll need to do a deeper dive into what is going wrong.
Allan
Thank you for checking out and your help!
Just been looking into this and it due to the use of the Bootstrap
d-noneon some columns. That means that they aren't getting displayed in the calculation table and it is throwing off the calculations. Removing that class allows it to work as expected: https://jsfiddle.net/chqnt39b/ . There is still a margin causing a small scroll, but I don't think that will be an issue in a real world use case. It is coming from the bootstrap container.Allan
Hey @allan,
Thank you for your answer and time! I checked out your example, removed all of the
d-none. Sadly nothing fixed it until I found out, that you are using already Datatables 2.1.0. Then I updated it in my fiddle and it seems to work even with the classd-noneSo it seems to be fixed
Hurrah! Thanks for letting me know. If it is working with the latest releases, we'll take that
Allan