QTable with multiple selection and QPopupEdit

[metalsadman]

It’s a qtable feature. Pls refer to the docs it’s filled with examples https://quasar.dev/vue-components/table#Example--Multiple-selection-and-custom-selected-rows-label.

[eoinom]

Thanks metalsadman but I was already aware of that and implemented it in the code above and in my script, but it’s not working when I try to combine it with the example for having editable fields using QPopupEdit. There doesn’t seem to be any example in the docs that I can find for this case.

[metalsadman]

@eoinom there is (well not literally) but see this example https://quasar.dev/vue-components/table#Example--Expanded-row-and-custom-selector, then change the q-toggle to a checkbox ie. <q-checkbox v-model="props.selected" /> https://q306jwnjx6.csb.dev/vuex-data-table. quasar components can be mixed and matched with other components.

[eoinom]

Ah yes that’s what I needed, thanks for that.

[Mak-NOAA]

@eoinom @metalsadman I had the same situation and I got the checkboxes to show up however all the checkboxes are prechecked (with the dash icon) and I can’t uncheck them. I already had another variable called “selected” so for the purpose of the example, I renamed “selected” to “rowSelected” so my getSelectedString changed to:

private getSelectedString() {
    return this.rowSelected.length === 0
      ? ''
      : `${this.rowSelected.length} record${
          this.rowSelected.length > 1 ? 's' : ''
        } rowSelected of ${this.data.length}`;
  }

any thoughts ?

For my column, I had put the checkbox as such:

<q-td auto-width>
                    <q-checkbox dense v-model="props.rowSelected" />
                  </q-td>

[metalsadman]

@Mak-NOAA your rowSelected property must be initiated first on your data array. ie. ... data:[ { ..., // your other fields rowSelected: false } ]. I suggest not using selected tho, since it’s being used internally by QTable.

[Mak-NOAA]

@metalsadman I tried to add
trip.rowSelected = false
below the following line (where I retrieve the data):
https://github.com/nwfsc-fram/boatnet/blob/master/apps/obs-web/src/views/DebrieferTrips.vue#L402

however the boxes are still checked. I’m sure there’s an obvious bug there, can you please have a look?

I was using “selected” to figure out which column cells were selected as I have a dialog box that needs to allow the user to edit the cells selected.

[metalsadman]

@Mak-NOAA
just change your checkbox.

<q-td auto-width>
   <q-checkbox dense v-model="props.selected" />
</q-td>

selected is exposed by your slot’s props in your case the body https://quasar.dev/vue-components/table#QTable-API you can check the full properties there.
when a row is selected, then it will be stored in your rowSelected array and be sure that what you passed in your QTables prop row-key="id" is a prop in your row (does id exist in your row and is it unique?).

[Mak-NOAA]

@metalsadman I changed the checkbox to <q-checkbox dense v-model=“props.selected” /> but what happened was that all rows get selected now if I select any checkbox.

Are you saying for my own array for column cell selection, I should not use “selected” as it’s reserved by the framework?

[metalsadman]

@Mak-NOAA i think the issue here is the row-key, try giving it the __index ie row-key="__index".

[Mak-NOAA]

@metalsadman yes that fixed it, thank you!

Sorry I’m new to Quasar but can you explain more about what just happened?

[lucasfernog]

@Mak-NOAA

https://quasar.dev/vue-components/table#Selection

its a good idea to read the doc page of the component you are trying to use, so you can learn what he can do and how you should do it.

https://quasar.dev/vue-components/table#QTable-API

[lucasfernog]

By the way __index is not so good because it is private (everything starting with __ is private), its better if your data has an unique value such as id

[Mak-NOAA]

Thanks @lucasfernog looks like row-key=“key” was needed as that was my unique identifier