Dependency Error: datatables.net-vue3@2.1.3 is not compatible with datatables.net@2.0.0

[mrorabau]

datatables.net-vue3@2.1.3 (^2.1.3) is not compatible with datatables.net@2.0.0 (^2.0.0). Adding --legacy-peer-deps to npm seems to work, so it could perhaps just be a dependency limitation in the vue3 component.

[mrorabau]

From: https://github.com/DataTables/Vue/blob/main/package.json

[mrorabau]

See PR #30

[AllanJard]

Thanks - I'm not going to pull it in just yet, and I've made changes to the Vue component for DataTables which includes support for components in the table cells, but I'd like to make it more flexible than what it currently is. I've got this thread open with the Vue core to see if there are any options. With that resolved I'll be looking to get this release done.

[gy-jamesb]

I wanted to add a note that the PR #30 will fix but it was causing me frustrating issues. When I added the extension datatables.net-buttons-bs5 to my project I would get an error stating that Datatables.Buttons.default was undefined. In addition to this using the datatables.net-buttons extension worked but broke all the styles, including pagination. When I checked the version of against datatables.net-bs5 and datatables.net I noticed that npm install --save datatables.net-vue3 was pulling in version 1.13.11 for datatables.net and that was throwing off everything. I am sure if I added all these references manually like I have now this would not have been an issue, but the docs site just states run the one install. Again, this will be fixed once the PR is completed but I wanted to let others know if they have a ghost issue trying to use extensions.

[BayBreezy]

Hey @AllanJard , Is the component feature working as yet? If so, is there an example that I can follow?

Trying to use the vue docs but it's not rendering the button for me

[AllanJard]

Yes - use the 3.x release of this package. Documentation for how to work with Vue components is available here.

[BayBreezy]

@AllanJard I did follow the docs.

It works only after passing the columns prop directly to the DataTable component.

If you pass the columns via the options object, the custom component is not displayed.

I am not sure if that can be fixed or it should just be added to the docs.

Thanks for your help ❤️.

P.S: the responsive & select are not in the Cinfig interface that is exported from datatables.net

[AllanJard]

Can you create a test case showing the issue please?

P.S: the responsive & select are not in the Cinfig interface that is exported from datatables.net

No they aren't. They are added by datatables.net-responsive and datatables.net-select respectively.

[BayBreezy]

@AllanJard Here is the link: https://stackblitz.com/edit/nuxt-starter-7llxe7?file=pages%2Fnope.vue

If you loop at the nope.vue file, you see where the columns are passed in via the options object. When done like this, the component in the action slot is not rendered.

[AllanJard]

I see what you mean. Thanks for the clarification.

Fix committed here.

[BayBreezy]

TY!

Btw, this feature is only compatible with v2.x of datatables, correct?

[AllanJard]

Yup, v2 only.

[BayBreezy]

@AllanJard Cool cool.

Looking forward to the release.
I managed to get it working in my UI Thing: https://ui-thing.behonbaker.com/components/datatable#custom-component

I have not studied the whole new layout thing just yet.. But I will get there