Answers

• allan Posts: 64,834Questions: 1Answers: 10,731 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: 28Questions: 6Answers: 0

  July 29

  https://stackblitz.com/edit/vitejs-vite-nrh93lrs?file=src%2FApp.vue
• allan Posts: 64,834Questions: 1Answers: 10,731 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: 28Questions: 6Answers: 0

  9:12AM

  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.