How to make expansion on dynamic column datatable



  • 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


Log in to reply