Any support Vuetify
Any support Vuetify

Hello. I try datatables on Vuetify - Vue Component Framework (https://vuetifyjs.com/en/). And I would like to use inner components (v-checkbox in my case) and I've met error
injection "Symbol(vuetify:defaults)" not found. at <VCheckbox model-value=true theme-dark=true >
After digging into the code, I realized that this is because datatables renders cells outside the context of Vuetify and the use of vNode. My question is whether it is possible to support third-party components not through render as html but through virtual dom.
Answers
The DataTables Vue component supports components via slots. Is that how you are attempting to use it? If you could link to a test case on StackBltiz or similar, that would be very useful.
Allan
https://stackblitz.com/edit/vitejs-vite-nrh93lrs?file=src%2FApp.vue
That's super helpful - thank you. When the Vuetify component is used the error in the console says:
I suspect the Vue plugin for DataTables would need to be modified to pass around the Vuetify instance.
There is some discussion along these sorts of lines on SO which might indicate that a new plugin would be required, but I'm not certain.
I'm afraid I don't have an immediate fix for this - I would need to spend some time working with Vuetify to understand what exactly the fix should be. I'd very warmly welcome contributions from the Vuetify community if someone is able to look into it and suggest a patch.
Allan
From my researches in datatables.net-vue3.mjs row 112
or DataTable.vue row 117
Vuetify uses vue functions when render in virtual dom.
The render function returns rawHtml in native dom, so it is not possible to substitute a vuetify component during rendering. In other words, it is not reactive from the perspective of vue.
I ask Github copilot is this function render reactive
I am a beginner in vue, so my conclusions can be wrong.
Update: funny thing
if I import like this - it doesn't work
if I import this way - all works fine
Maybe some error in dist folder
My mistake. This not helped
Thanks for the updates. I'd certainly have been surprised if that fixed it. As copilot says, the
h()
function renders the information into HTML which is what DataTables then displayed. There is a watch to clear the elements out on data change, which is how it handles the reactive data. However, based on the error message, I suspect Vuetify either needs an extra parameter (its instance) passed in toh
orrender
or somewhere around there, or for its own to be used.Allan
I understand, that is a lot a work, but what if rewrite this component into default v-for for rows and use slots for render? Not use render for .dt-scroll-body, but just set ref() for rows.
if serverside - update rows on ajax or axios, if not serverside - update rows from array of data with pagination. v-for in this case would redraw rows.
Is it possible ignore render table body from main package of datatables?
Also could be fine use slots for searchbox, pagination and other control buttons
v-for
wouldn't work with DataTables because then you have both DataTables and Vue trying to control the same DOM elements. Either could make a change to the DOM and the other wouldn't see it - hence the need for the DataTables Vue component.Allan