[Solved] v0.15 QTable Custom Cell Not Working



  • 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?



  • 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>
    


  • @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.



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



  • @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. 🙂