Primevue Datatable Select Row Programmatically in Multiple Mode

Question

I am using PrimeVue Datatable with multiple selection checkboxes. I need to implement the option to add a new row to the table and then select it automatically after adding it.

My problem is that pushing the added value to the selected rows array is not selecting it.

Template:

<DataTable :rows="10" :value="items" v-model:selection="selectedRows" dataKey="id"
                responsiveLayout="scroll" v-model:filters="filters" @rowSelect="onRowSelect"
                @rowUnselect="onRowUnselect" :row-hover="true">
                <Column selectionMode="multiple" headerStyle="width: 3em"></Column>
                <Column field="label" :header="translation.money.serviceName">
                </Column>
            </DataTable>

Function calling on Item Select and when new Item is added (isNew = true)

const onRowSelect = (event, isNew = false) => {
      const selectedItem = event.data ?? event;
      if (isNew) {
          selectedRows.value.push(selectedItem );
       }
 };

Answer 1

I know its late. But I had the same problem. So posting the resolution here, should it help anyone.

The only way I could make this work was by assigning to the selectedRows instead of pushing data to it. Seems like vue is not able to detect changes when we push the data to an array.

So what works is

const onRowSelect = (event, isNew = false) => {
      const selectedItem = event.data ?? event;
      if (isNew) {
          selectedRows.value = [...selectedRows.value, selectedItem];
       }
 };