Using Responsive in a Vue 3 component

fpl_alejandro

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

allan

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

Allan

fpl_alejandro

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

allan

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

allan

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

rschnabl

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 ?

allan

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

rschnabl

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

allan

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

rschnabl

it is working with the new updates.

thank you for the fast answer and for datatables.

fpl_alejandro

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