How to make expansion on dynamic column datatable

[gaggs]

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: