Use responsive extension with Vue TypeScript

aumartinez

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

aumartinez

The error I get in the console is:

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

aumartinez

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

allan

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

aumartinez

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

aumartinez

I updated dependencies to:

"dependencies": {
    ...
    "datatables.net-responsive-dt": "^2.4.0",
    "datatables.net-vue3": "^2.0.0",
    ...
}