Use responsive extension with Vue TypeScript

Use responsive extension with Vue TypeScript

aumartinezaumartinez Posts: 8Questions: 2Answers: 1

I am using datatables with Vue and it works fantastic, but now I would like to add the responsive extension to the datatable to support this on mobile devices, however, I have been unable to enable it

I have installed this using NPM

npm install --save datatables.net-dt
npm install --save datatables.net-responsive-dt

and tried the below without luck, maybe you can point me to the right article in the documentation

<script setup lang="ts">
import DataTable from 'datatables.net-vue3'
import 'datatables.net-responsive-dt'


let options = {  
  responsive: true
}
</script>

another try

<script setup lang="ts">
import DataTable from 'datatables.net-vue3'
import Responsive from 'datatables.net-responsive-dt'


let options = {  
  responsive: true
}
</script>

both are returning error messages if try to use as is, if I only enable "responsive: true", it does nothing since the extension is not imported

This question has accepted answers - jump to:

Answers

  • aumartinezaumartinez Posts: 8Questions: 2Answers: 1

    The error I get in the console is:

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

  • aumartinezaumartinez Posts: 8Questions: 2Answers: 1

    supposedly for this line of code in
    var Api = $.fn.dataTable.Api;
    dataTables.responsive.mjs

  • allanallan Posts: 57,699Questions: 1Answers: 9,195 Site admin
    Answer ✓

    What version of DataTables and the Vue3 plug-in are you using? The syntax is slightly different depending on your version. I updated the blog post with the latest syntax recently.

    Allan

  • aumartinezaumartinez Posts: 8Questions: 2Answers: 1

    Thank you Allan, I updated the implementation with an example I found on stackblitz and it is resolved now

  • aumartinezaumartinez Posts: 8Questions: 2Answers: 1
    Answer ✓

    I updated dependencies to:

    "dependencies": {
        ...
        "datatables.net-responsive-dt": "^2.4.0",
        "datatables.net-vue3": "^2.0.0",
        ...
    }
    
Sign In or Register to comment.