Updating reactive data breaks row state (like selection)

[LukasWillin]

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

[LukasWillin]

Another solution could be to remember any state like row selection and reapply that afterwards, though I would assume this could break a lot of plugins relying on custom row state in the future

[AllanJard]

Hi Lukas - many thanks for flagging this up. I think I undersand the issue, but I'm not 100% clear on how the test case demonstrates it. Could you possibly give me step by step instructions for it (there is a good chance I'm just being daft and havn't context switched to the Vue stuff properly from what I was doing 10 minutes ago, but, steps would be great - thanks!).

From your description, I suspect it is here that is the issue? It just nukes the whole lot if one gets updated. I'm not clear on how your patch would apply? A diff or a PR would be useful so I can see the exact proposed changes.

[LukasWillin]

Thank you for your reply.

My apologies for not adding the exact repro-steps, and no worries, you aren't daft. I know how it is, switching between projects.

The repro-steps in the StackBlitz example is as follows:

1. Select a Row.
2. Click the Update Button.
   
3. The row data is updated.
4. Behaviour:
   a. Expected: Row should stay selected (blue).
   b. Is: Row is being deselected (no colour)
   

The issue actually happens slightly below your linked code lines.

Vue/src/DataTable.vue

Lines 77 to 78 in 06d92e0

	api.clear();
	api.rows.add(newVal).draw(false);

By calling clear() as far as I understand we remove all rows together with their state. My understanding is, in order to preserve their state, we have to update all rows individually.

I will create a PR after lunch asap.

[LukasWillin]

As promised.
#34

There may be a better solution to this. If there is, let me know.

[LukasWillin]

Something else that just came to my mind is that this solution does not account for nested data or as you call it in the docs "Orthogonal data". So I would need to come up with a solution for that.
At least I think it does not

The old solution seems to handle this much more generically and may be a better fit, though it's also the solution you initially removed. So I'm not sure at this point, since I don't fully understand what the issue was back then that you tried to address. (Perhaps because it only compared by reference instead of an ID?)

Vue/src/datatables.net-vue.vue

Lines 54 to 77 in 3978a68

	(newVal) => {
	let known = dt.value?.data().toArray();
	// Find any new rows
	for (let n of newVal) {
	if (!known?.includes(n)) {
	dt.value?.row.add(n);
	}
	}
	// Remove any old rows
	if (typeof known !== 'undefined') {
	for (let k of known) {
	if (!newVal.includes(k)) {
	dt.value?.row((_idx: any, d: any) => d === k).remove();
	}
	}
	}
	// Data in other rows might have changes, so we need to invalidate the rows
	dt.value?.rows().invalidate().draw(false);
	saveOld(newVal);
	},