[Solved] v0.15 QTable Custom Cell Not Working

[snowdrop]

I’m trying to convert my code from v0.14.9 QDataTable to v0.15.1 QTable but it seems that custom cell rendering does not work. Here is my sample of my code:

<q-table
    :data="data"
    :columns="table.columns">
    <q-td slot="body-cell-address" slot-scope="props" :props="props">
        Custom Text: {{props.value}}
    </q-td>
</q-table>

The table works as expected, but if want to display custom data on the addresscolumn by adding a slot with name body-cell + column-name, the Custom Text: is not rendered. Am i doing something wrong with <q-td>...</q-td> component?

[Heisenberg]

In quasar.conf.js make sure you have entered QTd

framework: {
    components: [
        'QTable',
        'QTd'
    ]
}

and try change tyour code in

<q-td slot="body-cell-address" slot-scope="props" :props="props">
    <span>Custom Text: {{props.value}}</span>
</q-td>

[snowdrop]

@Heisenberg, yes I’ve done that before I’ve posted it. Anyway, the problem was fixed by adding name field in my table.columns value like this:

{
    label: 'Address',
    field: 'address',
    name: 'address', // adding this line fixed it
    type: 'string'
}

I’ve read the docs and the definition is kind of vague for me on the topic about custom cell rendering.

[carueda]

Thank you @snowdrop, I was having the same issue with no much luck from the docs, until I found your solution here!

[snowdrop]

@carueda You’re welcome. I was about to ask this on Discord but decided to put it up here so that anyone with the same problem could still look it up.