CODEWITHSUNDEEP
vue.jstwitter-bootstrap-3bootstrap-vue
Louis Charles
Louis Charles

Reputation: 360

Double footer on vue-boostrap table component

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.

Upvotes: 0

Views: 1946

Answers (1)

Hiws
Hiws

Reputation: 10324

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/[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.10/vue.js"></script>
<script src="https://unpkg.com/[email protected]/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>

Upvotes: 6

Related Questions