Bootstrap Vue Dynamic table templating

If you're using version 2.0.0 or newer of bootstrap-vue you need to change the slot names as they've changed, and the old vue slot has also been deprecated in favor for v-slot.

I changed the accepted answers fiddle to work with the new naming and v-slot

new Vue({
  el: "#app",
  data: {
    fields: [{
      key: "id",
      label: "Id",
      colType: "span"
    }, {
      key: "name",
      label: "Name",
      colType: "button"
    }, {
      key: "uhh",
      label: "uhh..",
      colType: "idk"
    }],
    items: [{
      id: 0,
      name: "Test 0"
    }, {
      id: 1,
      name: "Test 1"
    }, {
      id: 2,
      name: "Test 2"
    }]
  }
});
<link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>


<div id="app">
  <b-table :items="items" :fields="fields">
    <template v-for="(field, index) in fields" v-slot:[`cell(${field.key})`]="data">
      <div v-if="field.colType === 'button'">
        <h5>{{data.item.name}}</h5>
        <b-button>Am Button</b-button>
      </div>
      <div v-else-if="field.colType === 'span'">
        <h5>{{data.item.name}}</h5>
        <span>Am Span</span>
      </div>
      <div v-else>
        <h5>{{data.item.name}}</h5>
        Am Confused
      </div>
    </template>
  </b-table>
</div>


Here's a jsfiddle showing dynamic columns with a b-table: https://jsfiddle.net/nardnob/wvk6fxgt/

new Vue({
	el: "#app",
	data: {
   fields: [{
     key: "id",
     label: "Id",
     colType: "span"
   }, {
     key: "name",
     label: "Name",
     colType: "button"
   }, {
     key: "uhh",
     label: "uhh..",
     colType: "idk"
   }],
   items: [{
   	id: 0,
    name: "Test 0"
   }, {
   	id: 1,
    name: "Test 1"
   }, {
   	id: 2,
    name: "Test 2"
   }]
	}
});
<div id="app">
  <b-table :items="items" :fields="fields">
    <template v-for="(field, index) in fields" :slot="field.key" slot-scope="data">
      <div v-if="field.colType === 'button'">
        <h5>{{data.item.name}}</h5>
        <b-button>Am Button</b-button>
      </div>
      <div v-else-if="field.colType === 'span'">
        <h5>{{data.item.name}}</h5>
        <span>Am Span</span>
      </div>
      <div v-else>
        <h5>{{data.item.name}}</h5>
        Am Confused
      </div>
    </template>
  </b-table>
</div>