[Vuejs]-How to use bootstrap-vue tables with cell templates

by

2👍

✅

bootstrap-vue@latest/dist/bootstrap-vue.min.js is for Vue3 so just switch to version 2 of bootstrap-vue:

Vue.config.productionTip = false;

var app = new Vue({
  el: '#app',
  data: {
    fields: [
      { key: 'age', label: 'Old' },
      { key: 'first_name', label: 'Given Name' },
      { key: 'last_name', label: 'Surname' },
    ],
    items: [
      { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
      { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
      { age: 89, first_name: 'Geneva', last_name: 'Wilson' },
      { age: 38, first_name: 'Jami', last_name: 'Carney' }
    ]
  }
})
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue-icons.min.js"></script>

<div id="app">
  <div>
    <b-table striped small :items="items" :fields="fields">  
    <template #cell(age)="{ item }">
        <h3 class="text-info">The AGE IS: {{ item.age }}</h3>
      </template>
    </b-table>
  </div>
</div>
👤Nikola Pavicevic

1👍

You should have the cell in the fields, ‘name’ doesn’t exist in your fields.

You can use first_name:

<template #cell(first_name)="data">
        <h3 class="text-info">The AGE IS: {{ data.value.age }}</h3>
        
</template>

Or add name to the fields:

fields: [
      { key: 'name', label: 'Name' },
      { key: 'age', label: 'Old' },
      { key: 'first_name', label: 'Given Name' },
      { key: 'last_name', label: 'Surname' },
    ],
👤rebinnaf

Leave a comment