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

souljack

Hi Allan,

im latching onto this question

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.

I hope thats okay.
I'm getting the same error. The error started occuring after an upgrade from responsive-dt@3.0.0 to responsive-dt@3.0.2.

I have made a demo on stackblitz, but the problem does not exist there / everything works fine. Ive gone through the changes on github between the versions and I could not find anything suspicious. What Info could I provide you with to maybe help me understand why this problem occurs?

Additionally after the upgrade, in a different vue component im getting an alert saying "Uknown feature: buttons". Problem did not exist before the update ( from buttons 3.0.0 to 3.0.2 ).

Thank you in advance!

allan

Difficult to debug it if it working in StackBltiz .

The error suggests that Responsive hasn't been imported. What happens if you try:

import 'datatables.net-responsive';
import 'datatables.net-responsive-bs5';

The Buttons error suggests that you are using Buttons in your layout, but have not imported Buttons.

Allan

souljack

Difficult to debug it if it working in StackBltiz .
I know.

I've tried your suggestion, but it unfortunately is also not working.

import DataTableVue from "datatables.net-vue3";
import DataTablesCore from "datatables.net-bs5"
import 'datatables.net-datetime'
import 'datatables.net-responsive';
import 'datatables.net-responsive-bs5';

Whats really annoying is that there were no changes done to the code other than the upgrade. Which means, responsive worked aswell as buttons.

I'm assuming now that laravel mix is bundling files in the wrong way and will work in that direction. When that also fails, I'll just revert to 3.0.0 version of responsive and buttons.

Thank you for your help.

Best regards

souljack

Solved! I had a faulty yarn.lock file. Which somehow prevented laravel.mix to use the dependencies properly.
In the end I only had to remove the yarn.lock and reinstall the dependencies....

So sorry for taking your time Allan but I do hope this saves someone else their time.

Best regards

allan

Ah! Thanks for posting back. Good to hear you got to the bottom of it.

Allan