Double footer on vue-boostrap table component

Question

I would like to implement a double footer for a bootstrap-vue table.

<b-table
    striped hover
    :items="items"
    :fields="visibleFields"
    :sort-compare="sortCompare"
    :sort-by.sync="sortBy"
    foot-clone
    selectable
    select-mode="single"
    @row-selected="onRowSelected"
    :tbody-tr-class="rowClass"
    >

    <!-- Footers total nutritional values -->
    <template v-slot:foot(serving)="data">
        <span>Total:</span>
    </template>
</b-table>

The table looks like this :

Bootstrap vue documentation only provides this to create a footer :

<!-- Footers total nutritional values -->
<template v-slot:foot(serving)="data">
    <span>Total:</span>
</template>

The problem is I don't see how can I add a second footer with this. Another way to do this would be to add a div just below the table and to display what I want but I think there is a cleaner way to do this.

Hiws · Accepted Answer · 2020-02-11T13:59:00.923

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>

Double footer on vue-boostrap table component

1 Answers1