ColReorder does not work correctly when Vue.js Components are used

[DomasWEB]

It seems that if you use ColReorder + Vue.js components they are not movable with each other. The header moves but the content stays the same.

Findings:

• Simple columns are always movable.
• If you have 1 Vue.js component and other simple columns - all of the are movable.
• If you have 2 Vue.js components they can not switch places with other Vue.js components but they can switch places with other simple columns.

Preview:

<script setup>
const columns = ref([
  {
    data: 'a',
    title: 'One',
    render: '#comp'
  },
  {
    data: 'b',
    title: 'Two Two',
    render: '#comp'
  },
  {
    data: 'c',
    title: 'Three Three Three',
    render: '#comp'
  },
]);

const options = {
  colReorder: true,
};
</script>
<DataTable
      class="display"
      :columns="columns"
      :data="data"
      :options="options"
      ref="table"
    >
      <template #comp="props">{{ props.cellData }} </template>
    </DataTable>

Example: https://stackblitz.com/edit/datatables-net-vue3-reactive-tmmaxz?file=src%2FApp.vue

P.S. I am writing this issue in the https://github.com/DataTables/Vue/ because I think the issue might be in "DataTables/VueJS" side not in "DataTables/ColReorder". Let me know if I should move it to "DataTables/ColReorder"

[AllanJard]

Thank you for raising this. It probably needs this action to happen on the columns-reordered event as well.

I'm tied up with a few other things at the moment, so if you are able to try that (simplying adding columns-reordered.dt to the on event string should do it, and send a PR, that would be most welcome.

[DomasWEB]

@AllanJard the event is called but the result is exactly the same. Added console.log to make sure everything is deleted.

Console:

Any other suggestions I could try?

Thank you

[AllanJard]

Off the top of my head (which is going to be questionable, since I thought that might do the job alone) - you might need to invalidate the data ( https://datatables.net/reference/api/rows().invalidate() ). However, I think I'm going to need to set some time aside at some point to sit down and think this through.

[DomasWEB]

@AllanJard did some more testing with rows().invalidate().draw() but it did not change anything.

If you have any more ideas for me to test let me know. Otherwise I'll wait for your comment, thank you