Wrapping b-table in a child component

I’m trying to reduce boilerplate code by wrapping a b-table in a component (including filter, pagination, etc.).

Utilising this wrapper component, I want to still be able to make use of named slots to do some formatting on the fields of the table.

However, the naive approach of ‘elevating’ the slots to the parent component doesn’t seem to work.

See this jsfiddle for an example on what 'm trying to accomplish.

VueJS documentation on use of named/scoped slots doesn’t seem to cover this use-case.

How should I approach this best using bootstrap-vue?

[emersoncpaz]

It works for me:

In child component:

<template>
  <b-table striped hover bordered small responsive="sm" :id="idTable" 
      :items="items"
      :fields="fields"
      <template v-for="field in fields" :slot="field.key" slot-scope="data">
        <slot :name="field.key" v-bind="data">{{ data.item[field.key] }}</slot>
      </template>
    </b-table>
</template>

export default {
    props: {
      idTable: {
        type: String,
        default: 'appTable'
      },
      items: {
        type: Array
      },
      fields: {
        type: Array
      }
    }
}

In parent component

<template>
    <app-table idTable="tblPlaces"
      :items="dataItems" /* from an api request */
      :fields="fields"
      <template slot="actions" slot-scope="data">
        <i class="fa fa-info-circle fa-lg icon-button" title="Detail" @click.stop="showId(data.item.placeId)"></i>
        <i class="fa fa-edit fa-lg icon-button" title="Update" @click.stop="showId(data.item.placeId)"></i>
      </template>
    </app-table>
</template>

<script>
import TableComponent from './TableComponent'

export default {
  data: function () {
    return {
      dataItems: [],
      fields: [
       {
          key: 'placeId',
          label: 'Id'
        },
        {
          key: 'placeName',
          label: 'Place Name',
          sortable: true
        },
        {
          key: 'placeTag',
          label: 'Place Tag',
          sortable: true
        },
        {
          key: 'telephoneNumber',
          label: 'Telephone'
        },
        {
          key: 'actions',
          label: 'Actions'
        }
      ]
    }
  },
  methods: {
    showId(id) {
      alert(id)
    }
  }
  components: {
    appTable: TableComponent
  }
}
</script>

[chrisb-c01]

For future reference: I was revisiting this issue after the change to v-slot syntax and found a thread discussing this as well on SO. Perhaps it is of use to anyone.