Data table

snezhkois

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

benoitranque

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

snezhkois

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

benoitranque

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

snezhkois

@benoitranque

thanks! i can not find this in documentation …

darksiege23

is this working on version 15.?

iober

does anyone have an answer for that?

s.molinari

@iober - This is a very old thread. You will probably be better off starting a new one describing your problem, possibly referencing this one. However, this was for a very old version of Quasar and is no longer valid either.

Scott

Pratik Patel

Please refer the following codepen @iober .

https://codepen.io/Pratik__007/pen/eYNvvva?editors=1010

No More Posting New Topics!

Data table