Using Responsive in a Vue 3 component

Using Responsive in a Vue 3 component

fpl_alejandrofpl_alejandro Posts: 3Questions: 1Answers: 0

I am trying to use Responsive extension for Vue 3 component.

I tried adding import DataTablesResponsive from 'datatables.net-responsive'; and DataTable.use(DataTablesResponsive); with responsive:true option, but no luck.

What am I doing wrong?

I edited the Select extension stackblitz in order to have a slight reproduction:
https://stackblitz.com/edit/datatables-net-vue3-reactive-wme7kg?file=package.json,src%2FApp.vue

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    It looks like an error in the Vue integration I'm afraid. I'm working on a fix :)

    Allan

  • fpl_alejandrofpl_alejandro Posts: 3Questions: 1Answers: 0

    Thank you for the quick response. Is there a timeframe on this perhaps? Also, the docs for extensions say use it like import x from y with DataTable.use(x), but on the examples it is different...

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    Use this example as the starting point.

    I've got my list of tasks on a white board behind me which includes writing full documentation for this component in the main DataTables manual.

    The error that is in the plug-in at the moment is that width="100%" isn't being applied to the table. I'm not actually sure why not yet. I hope to resolve it later today / tomorrow.

    Allan

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    Answer ✓

    Hi,

    I've just released datatables.net-vue3 2.1.0 which addresses this issue. Here is the updated example showing Responsive being used with DataTables.

    Allan

  • rschnablrschnabl Posts: 3Questions: 0Answers: 0

    Hi Allan,

    I have tried version 2.1.0 but I cannot get the options.select.style to work - typescript is is throwing an error message - 2.0.0 is working fine. Are there any changes in the types ?

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    Yes, the types were completely rewritten with DataTables 1.13 and friends (which include Scroller 2.1.0). That will be the root of the type issue, but why it isn't working for you, I'm not sure. I've tried it in a plain TS project and it works okay.

    Are you able to update the blitz to show the issue or give me instructions on how to reproduce the error?

    Allan

  • rschnablrschnabl Posts: 3Questions: 0Answers: 0

    you see it when you run "npm run build" in the terminal

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    An update to datatables.net-responsive to fix a typing error there, and using let dt: Api<any>; for the dt variable creation appears to allow it to compile without warnings.

    Allan

  • rschnablrschnabl Posts: 3Questions: 0Answers: 0

    it is working with the new updates.

    thank you for the fast answer and for datatables.

  • fpl_alejandrofpl_alejandro Posts: 3Questions: 1Answers: 0

    A peculiar thing has happened since this - on Nuxt 3, that onMounted table.value.dt() is not needed anymore, it actually does not work with it...

Sign In or Register to comment.