7

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

current action col

Michal Levý
  • 33,064
  • 4
  • 68
  • 86
Matthew Speicher
  • 93
  • 1
  • 6

1 Answers1

14
  1. Define a new column in a columns array
columns: [
  // ... other columns
  { name: 'actions', label: 'Action' }
]
  1. 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

Michal Levý
  • 33,064
  • 4
  • 68
  • 86
  • ty sir! exactly what i needed. we're simultaneously going from vue2 / bootstrap to vue3 / quasar / typescript. well worth the time and effort, but... it's a lot at once – Matthew Speicher Sep 30 '21 at 15:57
  • Can you please clarify what exactly `:props="props"` does ? I did not find answer in you codepen either. `` does not recieve any kind of props – Georgy Martynovich Aug 21 '23 at 13:20
  • `` renders `q-td` while passing the `body-cell-actions` [slot props](https://vuejs.org/guide/components/slots.html#scoped-slots) (ie. object ) into a `q-td` prop specially designed just for that – Michal Levý Aug 21 '23 at 18:58