Updating reactive data breaks row state (like selection)

Hi DataTables Team, Hi Allan

I have bashed my head against an issue, which I was able to sort of solve with a setTimeout, but it was far from satisfactory, and I could smell a bug somewhere.

My use case is the following:

Update some data inside a cell or row, but keep selection state.

I first suspected it is something in the reactivity of my page component, however upon debugging the code, it turns out the data tables component clears all data every time some data changes. This behaviour completely defeats the purpose of the rowId property.
A bug repro StackBlitz can be found here: https://stackblitz.com/edit/datatables-net-vue3-reactive-koymdx?file=src%2FApp.vue
And here is the older (working as expected) StackBlitz example (from which I forked): https://stackblitz.com/edit/datatables-net-vue3-reactive-xkdadh?file=src%2FApp.vue

This bug was introduced in commit c5307598f73111a78b6db349dd64a0f905d00574 - New: Support for column templates, providing the ability to use Vue c… .

I have solved the bug by adding the following code to the build datatables.net-vue3.mjs starting at line 73 in method setup():

const table = e;
const data = t;

const rowId = table.context[0].rowId;
// If no row id set clear table then add all new data
if (!rowId)
{
  e.clear(), e.rows.add(t).draw(!1);
  return;
}

var key = table.context[0].rowId,
    dataKeys = data.map(function (item) { return item[key]; });

// remove obsolete rows
table.rows(function (idx, rowData) { return !dataKeys.includes(rowData[key]); }).remove();

// update existing rows
var updatedKeys = [];
table.rows().every(function ()
{
    var oldData = this.data(),
        newData = data.find(function (x) { return x[key] === oldData[key]; });
    this.data(newData);
    updatedKeys.push(newData[key]);
    this.invalidate();
});

// add missing rows
table.rows.add(data.filter(function (x)
{
    return updatedKeys.find(function (k) { return k === x[key]; }) === undefined;
}));
table.draw();

If you like, I can create a pull request with my changes. Let me know.

Regards Lukas

Start with src/App.vue in the current and older StackBlitz reproductions, then inspect the reactive-data handling in datatables.net-vue3.mjs setup() around line 73 and commit c5307598f73111a78b6db349dd64a0f905d00574. Verify that updating row data preserves selection and other row state when rowId is set, while additions and removals still synchronize correctly.