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 );
       }
 };

endeavour · Accepted Answer · 2023-09-09 01:32:40Z

3

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];
       }
 };

answered Sep 9, 2023 at 1:32

endeavour

6195 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Primevue Datatable Select Row Programmatically in Multiple Mode

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related