Data table



  • Hi. Can you tell me please. I can not place action buttons (edit, delete) on each rows?



  • You must use slots. Can you please post code showing what you have tried?



  • @benoitranque

                   <q-data-table
                                :data="items"
                                :config="{}"
                                :columns="[
                                    {
                                        label: 'Commission (%)',
                                        field: 'commission'
                                    },
                                    {
                                        label: 'From',
                                        field: 'wallet',
                                        format (value, row) {
                                            return '<b>' + value.data.paymentSystem.data.name + ', ' + value.data.prefix + '</b>' + ' ' + (value.data.account.length > 25 ? value.data.account.substring(0, 25) + '...' : value.data.account)
                                        }
                                    },
                                    {
                                        label: 'To',
                                        field: 'paymentSystem',
                                        format (value, row) {
                                            return '<b>' + value.data.name
                                        }
                                    },
                                    {
                                        label: 'Currency',
                                        field: 'prefix'
                                    }
                                ]"
                        >
                            <!-- Custom renderer for "source" column -->
                            <template slot="col-source" scope="cell">
                                {{cell.data}}
                            </template>
                            <!-- Custom renderer for "action" column with button for custom action -->
                            <template slot="col-action" scope="cell">
                                <q-btn color="primary" @click="goToEditCommission(cell)">Edit</q-btn>
                                <q-btn color="primary" @click="openDeleteDialog(cell)">Delete</q-btn>
                            </template>
                        </q-data-table>
    
    

    result (no actions)
    0_1516796089710_2018-01-24_15-14-13.png



  • You do not have an action column, so there is no col-action slot. Add this item to your column definition:

    {
      label: '',
      field: 'action'
    }
    

    It does not matter if your data does not contain an action field



  • @benoitranque

    thanks! i can not find this in documentation …


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.