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

vwuetiometry

Thanks for the response Allan - this is the issue I am having trouble with. I have a few tables that are already using the 'data' property and I can see that the props are being updated in the table component via the vue dev tools but the rendered content is still not being updated. I'm attempting to reproduce it in a controlled stackblitz environment but can not yet reproduce it.

Is there a way to manually force a re-render of the custom content for a table cell?

allan

Is there a way to manually force a re-render of the custom content for a table cell?

No, if the data is already a ref and you are passing it as that data prop, then Data tables should be updated per my example. Of that isn't happening something unexpected is happening and we need to figure that out.

Allan

vwuetiometry

I found the issue - my package json was pulling in 3.0.3, but there is a change in 3.0.4 that uses table id to create rendered slots in the 'createRenderer' function. Had to grab the most recent version of the component code and I am seeing the correct behavior.

vwuetiometry

this may be corrected already with 3.0.4, but here is the stackblitz reproducing the problem i had (using datatables vue 3.0.3)

https://stackblitz.com/edit/vitejs-vite-h7in8y3n?file=index.html