Despite using Responsive Plugin Datatable is Scrollable

Pichutan

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

kthorngren

You have div with the table-responsive class 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

Pichutan

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

allan

But maybe I am mistaken but...shouldnt responsive hide columns if the space of the parentcontainer is not enough?

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

Pichutan

Thank you for checking out and your help!

allan

Just been looking into this and it due to the use of the Bootstrap d-none on 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

Pichutan

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 class d-none

So it seems to be fixed

allan

Hurrah! Thanks for letting me know. If it is working with the latest releases, we'll take that

Allan