Vue 3 Component - Bootstrap 5 styling with Responsive Extension not working as expected.

eson0519

Hi, I'm new here in this forum, but using this DataTables since 2018 as far as I remember. Is the responsive extension for the vue 3 component supposed to work with the bootstrap 5 styling? Based on this forked stackblitz, the bootstrap classes are being removed by the responsive extension, and the structure is also modified by the extension: https://stackblitz.com/edit/datatables-net-vue3-bootstrap5-rffyfz?file=src%2FApp.vue

Does anybody experienced this and found a solution?

Thank you.

allan

Your packages were out of date. Updating to DataTables 2, and v3 for the DataTables/Vue integration helped.

I've also got the import as:

import * as bootstrap from 'bootstrap';
import DataTable from 'datatables.net-vue3';
import DataTablesCore from 'datatables.net-bs5';
import 'datatables.net-responsive-bs5';

DataTable.use(DataTablesCore);
DataTablesCore.Responsive.bootstrap(bootstrap);

which would allow the use of a Bootstrap modal if you wanted to use that, rather than the child row for the details view.

Finally the Responsive import was updated to be datatables.net-responsive-bs5 rather than without the -bs5. Same for the styling.

The updated example is here.

Allan

eson0519

Hi Allan, thanks for the response. I've replicated the example on another Stackblitz fork and was able to do it so. But when I try to use it within the project that I'm currently working on, an error shows (as shown on the screenshot). Any recommendations regarding this?

eson0519

@allan apologies for the separate comment. It seems that when I use the import

import 'datatables.net-responsive-bs5'

this generates the error:

TypeError: Cannot read properties of undefined (reading 'display')

Any idea of what's causing this? Thanks.

allan

Are you importing Responsive 3.0.1, or an older version?

Allan