Answers

• allan Posts: 64,978Questions: 1Answers: 10,759 Site admin

  July 29

  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
• klymov.inekon Posts: 31Questions: 6Answers: 0

  July 29

  https://stackblitz.com/edit/vitejs-vite-nrh93lrs?file=src%2FApp.vue
• allan Posts: 64,978Questions: 1Answers: 10,759 Site admin

  July 30

  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.inekon Posts: 31Questions: 6Answers: 0

  July 31

  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.inekon Posts: 31Questions: 6Answers: 0

  July 31

  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.inekon Posts: 31Questions: 6Answers: 0

  August 1

  My mistake. This not helped
• allan Posts: 64,978Questions: 1Answers: 10,759 Site admin

  August 1

  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.inekon Posts: 31Questions: 6Answers: 0

  August 1

  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
• allan Posts: 64,978Questions: 1Answers: 10,759 Site admin

  August 1

  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