Any support Vuetify

Any support Vuetify

klymov.inekonklymov.inekon Posts: 31Questions: 6Answers: 0

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

  • allanallan Posts: 64,843Questions: 1Answers: 10,733 Site admin

    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

  • allanallan Posts: 64,843Questions: 1Answers: 10,733 Site admin

    That's super helpful - thank you. When the Vuetify component is used the error in the console says:

    Uncaught Error: [Vuetify] Could not find defaults instance

    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

  • klymov.inekonklymov.inekon Posts: 31Questions: 6Answers: 0

    From my researches in datatables.net-vue3.mjs row 112

    function b(t){
    ...
     return document.createElement(div), _(d, u[s]))
    }
    

    or DataTable.vue row 117

    function createRenderer(slot:any){
    ...
    render(content, elements[key]
    

    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

    No, this element is not reactive from Vue's perspective.
    
    What happens:
    
    You create a VNode using h('div', ...), then mount it into a plain DOM element via render(content, elements[key]).
    The returned elements[key] is just a regular DOM element, which DataTables inserts into the table.
    Vue reactivity (updates on prop/slot/state changes) only works inside the component tree managed by Vue.
    In this case:
    
    If the original props/slots change, Vue will NOT automatically update this DOM element—it is "detached" from the reactive tree.
    If you want to update the content, you must manually recreate/remount the element via render whenever the data changes.
    Summary:
    
    This is not a reactive Vue element, but just a DOM element with a VNode mounted once.
    For true reactivity, the element must be part of Vue's component tree (e.g., rendered via v-for in a template).
    Recommendation:
    If you need to update the content when data changes, delete elements[key] and recreate it with render each time the data changes.
    

    I am a beginner in vue, so my conclusions can be wrong.

  • klymov.inekonklymov.inekon Posts: 31Questions: 6Answers: 0

    Update: funny thing
    if I import like this - it doesn't work

    import DataTables from 'datatables.net-vue3' 
    

    if I import this way - all works fine

     import DataTables from 'datatables.net-vue3/src/DataTable.vue'
    

    Maybe some error in dist folder

  • klymov.inekonklymov.inekon Posts: 31Questions: 6Answers: 0

    My mistake. This not helped

  • allanallan Posts: 64,843Questions: 1Answers: 10,733 Site admin

    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 to h or render or somewhere around there, or for its own to be used.

    Allan

  • klymov.inekonklymov.inekon Posts: 31Questions: 6Answers: 0

    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

  • allanallan Posts: 64,843Questions: 1Answers: 10,733 Site admin

    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

Sign In or Register to comment.