[Solved] QTable selection option not working when slots are overridden?



  • I had single selection working fine, but wanted to add a row click event handler. Reading the forums here, I learned I needed to override the body slot with my own q-tr’s and q-td’s. After doing both the header and body, only my columns show up. If I remove the header, then a blank header is added on the left but my column data begins filling there, leaving the right-most column blank.

    So it appears either selection isn’t possible, or I need to manually add something for the checkboxes to show up in the modified body. Here is my code:

    <q-table
                :data="patientGrid"
                :columns="singlePatColumns"
                row-key="visits.p3_csn"
                :separator="reportSeparator"
                selection="single"
                :selected.sync="singlePatSelected"
              >
                <q-tr
                  slot="header"
                  slot-scope="props">
                  <q-th
                    v-for="col in props.cols"
                    :key="col.name"
                    :props="props">
                    {{ col.label }}
                  </q-th>
                </q-tr>
                <q-tr
                  slot="body"
                  slot-scope="props"
                  :props="props"
                >
                  <q-td
                    v-for="col in props.cols"
                    :key="col.name"
                    :props="props">
                    {{ props.row[col.field] }}
                  </q-td>
                </q-tr>
              </q-table>
    


  • Can you put together a codepen, using some example data you have?

    Scott



  • Here is a pen: https://codepen.io/anon/pen/aeyZmr?&editable=true&editors=101
    Note that this is a fork of the table from the documentation for popup editing, and all I added to it was

    selection="single"
    :selected.sync="selected"
    

    It has the same issue. The header has an extra blank element on the left, and there are no checkboxes.



  • Since you are overriding the header you should also define qth for the checkbox before your other qth columns.

    ...
    <q-th><q-checkbox class="auto-width" .../></q-th>
    ...your other qths...
    ...
    


  • Yeah, that isn’t working. Can you get the codepen to work? I can’t get either mine or the codepen to work.



  • Got it working for those who might find this:

    <!--
      Forked from:
      https://quasar.dev/vue-components/table#Example--Popup-editing
    -->
    <div id="q-app">
      <div class="q-pa-md">
          <q-table
            title="Treats"
            :data="data"
            :columns="columns"
            row-key="name"
            binary-state-sort
            selection="single" 
            :selected.sync="selected" 
          ><!-- add the two last (selection) lines, above -->
            <template v-slot:body="props">
              <q-tr :props="props">
                <q-td>                                  <!-- add this line -->
                  <q-checkbox v-model="props.selected"/><!-- add this line -->
                </q-td>                                 <!-- add this line -->
                <q-td key="desc" :props="props">
                  {{ props.row.name }}
                  <q-popup-edit v-model="props.row.name">
                    <q-input v-model="props.row.name" dense autofocus counter ></q-input>
                  </q-popup-edit>
                </q-td>
                <q-td key="calories" :props="props">
                  {{ props.row.calories }}
                  <q-popup-edit v-model="props.row.calories" title="Update calories" buttons>
                    <q-input type="number" v-model="props.row.calories" dense autofocus ></q-input>
                  </q-popup-edit>
                </q-td>
                <q-td key="fat" :props="props">
                  <div class="text-pre-wrap">{{ props.row.fat }}</div>
                  <q-popup-edit v-model="props.row.fat">
                    <q-input type="textarea" v-model="props.row.fat" dense autofocus ></q-input>
                  </q-popup-edit>
                </q-td>
                <q-td key="carbs" :props="props">
                  {{ props.row.carbs }}
                  <q-popup-edit v-model="props.row.carbs" title="Update carbs" buttons persistent>
                    <q-input type="number" v-model="props.row.carbs" dense autofocus hint="Use buttons to close" ></q-input>
                  </q-popup-edit>
                </q-td>
                <q-td key="protein" :props="props">{{ props.row.protein }}</q-td>
                <q-td key="sodium" :props="props">{{ props.row.sodium }}</q-td>
                <q-td key="calcium" :props="props">{{ props.row.calcium }}</q-td>
                <q-td key="iron" :props="props">{{ props.row.iron }}</q-td>
              </q-tr>
            </template>
          </q-table>
        </div>
    </div>
    
    new Vue({
      el: '#q-app',
      data () {
        return {
          columns: [
            {
              name: 'desc',
              required: true,
              label: 'Dessert (100g serving)',
              align: 'left',
              field: row => row.name,
              format: val => `${val}`,
              sortable: true
            },
            { name: 'calories', align: 'center', label: 'Calories', field: 'calories', sortable: true },
            { name: 'fat', label: 'Fat (g)', field: 'fat', sortable: true, style: 'width: 10px' },
            { name: 'carbs', label: 'Carbs (g)', field: 'carbs' },
            { name: 'protein', label: 'Protein (g)', field: 'protein' },
            { name: 'sodium', label: 'Sodium (mg)', field: 'sodium' },
            { name: 'calcium', label: 'Calcium (%)', field: 'calcium', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) },
            { name: 'iron', label: 'Iron (%)', field: 'iron', sortable: true, sort: (a, b) => parseInt(a, 10) - parseInt(b, 10) }
          ],
          data: [
            {
              name: 'Frozen Yogurt',
              calories: 159,
              fat: 6.0,
              carbs: 24,
              protein: 4.0,
              sodium: 87,
              calcium: '14%',
              iron: '1%'
            },
            {
              name: 'Ice cream sandwich',
              calories: 237,
              fat: 9.0,
              carbs: 37,
              protein: 4.3,
              sodium: 129,
              calcium: '8%',
              iron: '1%'
            },
            {
              name: 'Eclair',
              calories: 262,
              fat: 16.0,
              carbs: 23,
              protein: 6.0,
              sodium: 337,
              calcium: '6%',
              iron: '7%'
            },
            {
              name: 'Cupcake',
              calories: 305,
              fat: 3.7,
              carbs: 67,
              protein: 4.3,
              sodium: 413,
              calcium: '3%',
              iron: '8%'
            },
            {
              name: 'Gingerbread',
              calories: 356,
              fat: 16.0,
              carbs: 49,
              protein: 3.9,
              sodium: 327,
              calcium: '7%',
              iron: '16%'
            },
            {
              name: 'Jelly bean',
              calories: 375,
              fat: 0.0,
              carbs: 94,
              protein: 0.0,
              sodium: 50,
              calcium: '0%',
              iron: '0%'
            },
            {
              name: 'Lollipop',
              calories: 392,
              fat: 0.2,
              carbs: 98,
              protein: 0,
              sodium: 38,
              calcium: '0%',
              iron: '2%'
            },
            {
              name: 'Honeycomb',
              calories: 408,
              fat: 3.2,
              carbs: 87,
              protein: 6.5,
              sodium: 562,
              calcium: '0%',
              iron: '45%'
            },
            {
              name: 'Donut',
              calories: 452,
              fat: 25.0,
              carbs: 51,
              protein: 4.9,
              sodium: 326,
              calcium: '2%',
              iron: '22%'
            },
            {
              name: 'KitKat',
              calories: 518,
              fat: 26.0,
              carbs: 65,
              protein: 7,
              sodium: 54,
              calcium: '12%',
              iron: '6%'
            }
          ],
          selected: [] // add this line
        }
      }
    })
    

Log in to reply