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

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

eson0519eson0519 Posts: 3Questions: 1Answers: 0

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.

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,628Questions: 1Answers: 10,091 Site admin
    Answer ✓

    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

  • eson0519eson0519 Posts: 3Questions: 1Answers: 0
    edited April 1

    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?

  • eson0519eson0519 Posts: 3Questions: 1Answers: 0

    @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.

  • allanallan Posts: 61,628Questions: 1Answers: 10,091 Site admin

    Are you importing Responsive 3.0.1, or an older version?

    Allan

Sign In or Register to comment.