QTable grid undefined

reath

I have this <q-table>

 <q-table
      :grid="$q.screen.xs"
      :title="showTitle ? 'Payables' : ''"
      :data="payables"
      :columns="columns"
      :visible-columns="visibleColumns"
      :rows-per-page-options="[5,10,15]"
      row-key="id"
      :pagination.sync="pagination"
      :loading="loading"
      @request="request"
    >
      <template v-slot:body-cell-from="props">
        <q-td :props="props">
          <template v-if="props.row.fromAccount">
            <router-link :to="{name:'account', params: {accountId: props.row.fromAccount.id}}">
              {{ props.row.fromAccount.name }}
            </router-link>
          </template>
          <template v-if="props.row.fromPartner">
            <router-link :to="{name: 'partner', params: {partnerId: props.row.fromPartner.id}}">
              {{ props.row.fromPartner.name}}
            </router-link>
          </template>
        </q-td>
      </template>

      <template v-slot:body-cell-to="props">
        <q-td :props="props">
          <template v-if="props.row.toAccount">
            <router-link :to="{name:'account', params: {accountId: props.row.toAccount.id}}">
              {{ props.row.toAccount.name }}
            </router-link>
          </template>
          <template v-if="props.row.toPartner">
            <router-link :to="{name: 'partner', params: {partnerId: props.row.toPartner.id}}">
              {{ props.row.toPartner.name}}
            </router-link>
          </template>
        </q-td>
      </template>
    </q-table>

columns: [
          {
            name: 'id',
            field: 'id',
            label: 'Id',
            sortable: false,
            align: 'left'
          },
          {
            name: 'orderId',
            field: 'orderId',
            label: 'Order ID',
            sortable: false,
            align: 'left',
            format: (val) => `${val.substr(0, 8)}...`
          },
          {
            name: 'from',
            field: obj => obj,
            label: 'From',
            sortable: false,
            align: 'left',
          },
          {
            name: 'to',
            field: obj => obj,
            label: 'To',
            sortable: false,
            align: 'left',
          },
          {
            name: 'fromAmount',
            field: obj => obj,
            label: 'From Amount',
            sortable: true,
            align: 'left',
            format: (val, row) => `${row.fromAmount} ${row.fromCurrency}`
          },
          {
            name: 'toAmount',
            field: obj => obj,
            label: 'To Amount',
            sortable: true,
            align: 'left',
            format: (val, row) => `${row.toAmount} ${row.toCurrency}`
          },
          {
            name: 'type',
            field: 'type',
            label: 'Type',
            align: 'left',
          },
          {
            name: 'createdAt',
            field: 'createdAt',
            label: 'Created',
            sortable: true,
            align: 'left',
            format: (val) => new Date(val).toLocaleString()
          }
        ],
        visibleColumns: ['orderId', 'from', 'to', 'fromAmount', 'toAmount', 'type', 'createdAt']

As you can see, I alter some of the columns by the format property, but for from and to I use the v-slot:body-cell-[name] slot for customization. The problem is when I activate grid, the columns which are customized using v-slot:body-cell-[name] show as undefined:

Is there a way to use the same slot for both table and grid mode? I know I can customize the whole item slot which is used for grid, but I was wondering if there’s an easier way.

metalsadman

cell are different slot than item which will be used for grid view. you will have to use the item slot if you want customization in it same like how you do on a normal table view.