II have a problem, I need to make an expansion row so I did something like:
<q-table
:title="title"
:data="driverTable.data"
:columns="driverTable.columns"
:visible-columns="driverTable.visibleCols"
row-key="objectId"
:loading="driverTable.loading"
:filter="driverTable.filter"
>
<template v-slot:body-cell-expandingrow="cellProperties">
<q-td auto-width :props="cellProperties">
<q-btn size="sm" color="accent" round dense @click="cellProperties.expand = !cellProperties.expand" :icon="cellProperties.expand ? 'remove' : 'add'" />
</q-td>
<q-tr v-show="cellProperties.expand" :props="cellProperties">
<q-td colspan="100%">
<div class="text-left">This is expand slot for row above: {{ cellProperties.row.name }}.</div>
</q-td>
</q-tr>
</template>
...
data () {
return {
driverTable: {
filter: '',
loading: false,
columns: [
{
name: 'objectId',
field: row => row.objectId,
format: val => ''
},
{
name: 'name',
label: 'Nom complete',
align: 'left',
field: row => row.name,
format: val => `${val}`,
sortable: true,
classes: 'ellipsis'
},
{
name: 'phone',
required: true,
label: 'Téléphone',
field: row => row.phone,
format: val => `${val}`
},
{
name: 'position',
required: true,
label: 'Position Actuelle',
field: row => `${row.latitude}, ${row.longitude}`,
format: val => `${val}`
},
{
name: 'carName',
required: true,
label: 'Voiture',
field: row => row.carName,
format: val => `${val}`,
sortable: true
},
{
name: 'carSerie',
required: true,
label: 'Série',
field: row => row.carSerie,
format: val => `${val}`
},
{
name: 'carRef',
required: true,
label: 'Référence',
field: row => row.carRef,
format: val => `${val}`
},
{
name: 'carImage',
required: true,
label: 'Image',
field: row => row.carImage,
align: 'center',
format: val => `${val}`
} ],
data: []
Just like quasar documentation but it display the expanding row just like another td on the table.
I know that the problem is when I make the td of btn with the row but as U see I dont use on my html any element jsut q-table to display the data table.
here is the result:
alt text
