No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    QTable grid undefined

    Framework
    2
    2
    464
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • R
      reath last edited by

      I have this <q-table>
      545e861d-2912-436d-9432-449075a34ab6-image.png

       <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:
      e4ccf09c-4148-466e-91cd-7f2c187538f1-image.png

      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.

      1 Reply Last reply Reply Quote 0
      • metalsadman
        metalsadman last edited by

        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.

        1 Reply Last reply Reply Quote 0
        • First post
          Last post