Vue slots rowdata is not changing after data update

alebat1

Link to test case:
Stackblitz

Description of problem:
Hi,
I am using the datatables.net-vue3 but when I update the data in the table, the columns update correctly (the "Name" column in the test case), but the props data don't change ("Name prop" column). I have seen two similar discussions link1, link2 that are resolved with the 3.0.2 update, but they involve server-side rendering. In my case, it does not work. I don't understand what I'm doing wrong.
I would appreciate your help, thank you.

allan

Hi,

You aren't doing anything wrong, it is just that the Vue integration doesn't support that particular operation at the moment. I'll be perfectly straight, I hadn't considered that particular operation before!

It would require a deep watch on the columns (perhaps indeed all of the configuration properties), and on change destroy the table and reinitialize with the new options. I've added this to my list of things to do.

Regards,
Allan

alebat1

Hi Allan,

Thank you for the clarification. I imagine adding support for this kind of operation could involve some significant changes under the hood. I’m glad to hear it’s something you’re considering for future updates.

In the meantime, I'll explore possible workarounds to handle this on my side. Thanks again for your prompt response and for adding it to your list!

Best regards,
Alessandro

vwuetiometry

Is there a timeframe on the fix for the slot reactivity? thanks

allan

@vwuetiometry - Do you mean dynamic properties (e.g. scrollX) or something else? Slots are supported.

Allan

vwuetiometry

Hi Allan,
I mean the functionality that alebat1 referenced in the original post about the rendering of the slot content not changing after column data updates.
I'm also seeing the slot content stay static after the initial load of the table.

allan

My understanding of the original problem discussed in this thread was that if you change an initialisation property, then that wasn't reflected. Perhaps I misunderstood? Data changing for a slot is certainly supported. Perhaps you can link to an example on Stackbltiz?

Allan

vwuetiometry

I think I'm experiencing the same issue as the stackblitz in the original thread starter post. I'm expecting the 2nd column which uses the render slot 'nameProp' to update to 'Frank' and 'Neil' for row 1 and 2 after the data is updated.
Let me know if this is expected behavior and I'm misunderstanding, but that is the feature I was inquiring about

allan

Right - I'm with you now - apologies.

Use the data property for the DataTable component, rather than passing in data as part of the object.

In this case:

      <DataTable
        id="applications_table"
        ref="datatable"
        class="hover stripe"
        :data="tableData"
        :columns="datatableColumns"
        :options="datatableOptions"
      >

Example: https://stackblitz.com/edit/vitejs-vite-csqugc2c?file=src%2FApp.vue .

The reason for that is that it allows DataTables to "watch" that property for changes. It also means that you don't need to call the API methods that were used in the original - the "watch" does the updating for you.

Allan