q-table - inser action button for each row (Quasar 2)

Question

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

Answer 1

1. Define a new column in a columns array

columns: [
  // ... other columns
  { name: 'actions', label: 'Action' }
]

2. 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>

Demo