search

DataTables / Vue

Vue plugin for DataTables
MIT License
65 stars 13 forks source link

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

Open mrorabau opened 9 months ago

mrorabau commented 9 months ago

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 commented 9 months ago

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

image

mrorabau commented 9 months ago

See PR https://github.com/DataTables/Vue/pull/30

AllanJard commented 9 months ago

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 commented 8 months ago

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 commented 8 months ago

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 commented 8 months ago

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

BayBreezy commented 8 months ago

@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 commented 8 months ago

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 commented 8 months ago

@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 commented 8 months ago

I see what you mean. Thanks for the clarification.

Fix committed here.

BayBreezy commented 8 months ago

TY!

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

AllanJard commented 8 months ago

Yup, v2 only.

BayBreezy commented 8 months ago

@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