QTable with multiple selection and QPopupEdit

[eoinom]

I’m wondering is it possible to create a qtable with multiple selection (so that you can then click a single button to delete all selected at once) and with q-popup-edit for the row fields to allow editing of the row values?

I’ve tried the following without success:

          <q-table
            title="AccountValues"
            :data="bankAccountValuesByAccountId( selectedAccountId() )"
            :columns="tableColumns()"
            row-key="date"            
            :filter="filter"
            :loading="loading"
            :pagination.sync="pagination"
            :selected-rows-label="getSelectedString"
            selection="multiple"
            :selected.sync="selected"
            >
            <template v-slot:top>
              <q-btn flat dense color="primary" :disable="loading" label="Add row" @click="addRow" />
              <q-btn class="on-right" flat dense color="primary" :disable="loading" label="Remove row" @click="removeRow" />
              <q-space />
              <q-input borderless dense debounce="300" color="primary" v-model="filter">
                <template v-slot:append>
                  <q-icon name="search" />
                </template>
              </q-input>
            </template>            

            <template v-slot:body="props">
              <q-tr :props="props">
                <q-td key="date">
                  {{ props.row.date }}
                  <q-popup-edit v-model="props.row.date">
                    <q-date
                      v-model="props.row.date"
                      mask="YYYY-MM-DD"
                    />
                  </q-popup-edit>
                </q-td>

                <q-td key="value" :props="props">
                  {{ props.row.value }}
                  <q-popup-edit v-model="props.row.value" title="Update value" buttons>
                    <q-input 
                      type="number" 
                      v-model="props.row.value" 
                      dense 
                      autofocus />
                  </q-popup-edit>
                </q-td>                
              </q-tr>              
            </template>
          </q-table>

[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

[cynderkromi]

@metalsadman This worked for me thanks!