qTable with custom actions passed from parent?

[blakeyuk]

Hi all,

I’ve got a custom table component created, that simply wraps a qTable in a qCard, adds some classes etc. The column definition and data is passed in via the parent page, and all is working well.

I now want to replicate that table, but passing in a template for the row “action” buttons, as the actions will vary each time I re-use this tabla, edepending on the data objects being viewed.

Is there any way to pass a template for the cell into the columns definition? I couldn’t see it anywhere in the docs.

The thing I’m thinking of is something like this: https://github.com/njleonzhang/vue-data-tables/blob/master/docs/en-us/actionCol.md

I should add that I’m new to Vue (have used react, angular, etc), so I’m guessing it’s something to do with slots, but I can’t get the thing to work.

Regards,
Andy

[blakeyuk]

My table template is as follows, and it shows BUTTONS GO HERE in the right place. But i can’t work out how to get the template from the parent component.

<template>
<q-card>
<q-card-section>
<div class=“text-h6 text-grey-8 q-gutter-sm”>
{{ tabletitle }}
<q-btn color=“primary” label=“Create” class=“float-right text-capitalize shadow-3” icon=“add” :to=“createPath” />
</div>
</q-card-section>
<q-card-section class=“q-pa-none”>
<q-table :data=“data” :columns=“columns” :no-data-label=“noDataLabel” :no-results-label=“noResultsLabel”>

  <template v-slot:body-cell-Action="props">
    <q-td :props="props">
        <q-item style="max-width: 420px">
            <q-item-section>
                BUTTONS GO HERE
            </q-item-section>
        </q-item>
    </q-td>
  </template>


  <template v-slot:no-data="{ icon, message, filter }">
    <div class="full-width row flex-center text-negative text-h6 q-gutter-sm">
      <span>
        {{ message }}
      </span>
    </div>
  </template>

</q-table>

</q-card-section>
</q-card>
</template>

[metalsadman]

@blakeyuk put this as last element of your q-table, it passes scoped slots to your wrapped q-table.

  <template
        v-for="(_, slot) of $scopedSlots"
        v-slot:[slot]="scope"
      >
        <slot
          :name="slot"
          v-bind="scope"
        />
    </template>

[blakeyuk]

Thanks @metalsadman

I didn’t quite end up doing it the way you said as I still couldn’t get the template to render (my bad, I’m assuming). But in trying to understand what your code does, I got there another way.

For anyone reading this, the generate table is defined as follows:

<template>
<q-card>
<q-card-section>
<div class=“text-h6 text-grey-8 q-gutter-sm”>
{{ tabletitle }}
<q-btn color=“primary” label=“Create” class=“float-right text-capitalize shadow-3” icon=“add” :to=“createPath” />
</div>
</q-card-section>
<q-card-section class=“q-pa-none”>
<q-table :data=“data” :columns=“columns” :no-data-label=“noDataLabel” :no-results-label=“noResultsLabel”>

  <template slot="body-cell-Action" slot-scope="row" >
        <slot name="actions" :item="row"></slot>
  </template>

  <template v-slot:no-data="{ icon, message, filter }">
    <div class="full-width row flex-center text-negative text-h6 q-gutter-sm">
      <span>
        {{ message }}
      </span>
    </div>
  </template>

</q-table>

</q-card-section>
</q-card>
</template>

And the parent table calls it as follows:

<custom-table
class=“q-mt-lg”
tabletitle=“Tags”
v-bind:data=“tags”
v-bind:columns=“columns”
no-data-label=“Please create your first tag”
no-results-label=“No tags found”
create-path="/tags/create"
>

    <template slot="actions" slot-scope="data">
        <q-td class="q-pa-md q-gutter-sm">
            <q-btn :to="'/tags/' + data.item.row.id + '/edit'" round color="primary" icon="edit" />
            <q-btn round color="secondary" icon="visibility" :to="'/tags/' + data.item.row.id"/>
            <q-btn round color="info" icon="archive" :to="'/tags/' + data.item.row.id"/>
            <q-btn round color="info" icon="unarchive" :to="'/tags/' + data.item.row.id"/>
            <q-btn round color="primary" icon="edit" class="float-right" :to="'/tags/' + data.item.row.id + '/edit'"/>
        </q-td>
    </template>
</custom-table>