not much more to add beyond the title. i'm looking to add a custom column to a quasar q-table (laravel / vue3) that will hold row edit / delete actions
CodePudding user response:
- Define a new column in a
columns
array
columns: [
// ... other columns
{ name: 'actions', label: 'Action' }
]
- Use a
body-cell-name
slot to render the buttons for this new column
<q-table
title="Treats"
:rows="rows"
:columns="columns"
row-key="name"
>
<template v-slot:body-cell-actions="props">
<q-td :props="props">
<q-btn icon="mode_edit" @click="onEdit(props.row)"></q-btn>
<q-btn icon="delete" @click="onDelete(props.row)"></q-btn>
</q-td>
</template>
</q-table>