DataTable: Modifying value of expendedRow is not reflected

[bdh92123]

Describe the bug

If only part of the data specified as expandedRows is modified externally, it will not be reflected.

The deep property seems to be false when watching expandedRows. It seems problematic that the entire value must be replaced to be reflected.

Reproducer

https://stackblitz.com/edit/ydc9nq?file=src%2FApp.vue

PrimeVue version

3.48.0

Vue version

3.x

Language

ALL

Build / Runtime

Vite

Browser(s)

No response

Steps to reproduce the behavior

In reproducer, click "Expand black watch" button.

Expected behavior

Black watch row should be expanded.

[TheZlodziej]

I don't think it's primevue problem. Arrays used with vue's reactive system are hard to work with. Essentially, it cannot detect the change unless you reassign the value of the array (and array elements are not the value). For example, if you change the button's callback to this function

function expandBlackWatch() {
  expandedRows.value[1001] = true
  expandedRows.value = [...expandedRows.value]
}

it would work since vue can detect that the value of expandedRows has changed (to the copy of existing array with value at index 1001 changed).

[bdh92123]

@TheZlodziej Why don't you consider using the 'deep' option when watching expandedRows? It is wasteful to always copy the entire array whenever only part of changes.

[TheZlodziej]

@bdh92123 I'm not sure what you mean. Can you provide some links so I can educate myself?

[bdh92123]

@TheZlodziej In document, the 'deep' watcher can detect changes to array elements. However, prime data tables watch the expandedRows property without it, and as you mentioned, we should always change the entire value of the property and there is no reason for that.

[pollna]

@bdh92123 thank you very much for pointing this out - I was confused and have been trying to fix programmatic row expansion for 2 hours straight, before I saw this issue. Otherwise it would take me way more time, I couldn't imagine it is a new DataTable bug 😔

[tugcekucukoglu]

Thanks for the updates. It's a demo bug. The default value of expandedRows should be {}.

Thank you!

[bdh92123]

Thanks for the updates. It's a demo bug. The default value of expandedRows should be {}.

Thank you!

@tugcekucukoglu The difference between {} and [] is whether or not the dataKey attribute is present. It has nothing to do with this issue and is by no means a demo bug. I don't know why you closed the issue without reading my post sincerely. This is an issue that simply requires adding the 'deep' option to true in the part that watches expandedRows of the DataTable.
It is in

primevue/components/lib/datatable/BodyRow.vue

Line 279 in bfcc09e

expandedRows: {