[Vuejs]-Double footer on vue-boostrap table component

by

6👍

✅

You can use the custom-foot slot. This slot will render directly into the tfoot of the table, so you have free control to structure the foot however you want using tr and td

new Vue({
  el: '#app',
  data() {
      return {
        fields: [
          // A column that needs custom formatting
          { key: 'name', label: 'Full Name' },
          { key: 'age', label: 'Age' },
          { key: 'sex', label: 'Sex' }
        ],
        items: [
          { name: { first: 'John', last: 'Doe' }, sex: 'Male', age: 42 },
          { name: { first: 'Jane', last: 'Doe' }, sex: 'Female', age: 36 },
          { name: { first: 'Rubin', last: 'Kincade' }, sex: 'Male', age: 73 },
          { name: { first: 'Shirley', last: 'Partridge' }, sex: 'Female', age: 62 }
        ]
      }
    }
})
<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.3.0/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.3.0/dist/bootstrap-vue.js"></script>

<div id="app">
  <b-table :fields="fields" :items="items">
    <template v-slot:cell(name)="data">
      {{ data.value.first }} {{ data.value.last }}
    </template>
    
    <template v-slot:custom-foot>
      <!-- You can customize this however you want, this is just as an example -->
      <tr>
        <th v-for="field in fields" :key="field.key">
          {{ field.label }}
        </th>
      </tr>
      <tr>
        <td class="bg-dark text-white" :colspan="fields.length">
          This is my second footer
        </td>
      </tr>
    </template>
  </b-table>
</div>
👤Hiws

Leave a comment