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

Draconic

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

Shonna

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 – Draconic

Can you please clarify what exactly :props="props" does ? I did not find answer in you codepen either. <q-table> does not recieve any kind of props – Jalisajalisco

<q-td :props="props"> renders q-td while passing the body-cell-actions slot props (ie. object ) into a q-td prop specially designed just for that – Rodi

By plain words - imagine that your slot content is a function (and in fact, this is how it's implemented in Vue) . You are giving the q-table component a function the component will use in it's own rendering process at specific time/place (in this case when rendering actions column content). Your function needs to know which row is currently rendered, if that row is selected and many more useful info your slot rendering logic can use. This is slot props - pieces of data the component decides to pass into your slot render function... – Rodi