[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 wasselection="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 } } })
