How to add a Custom Footer to a Bootstrap-Vue table

Question

I have a table with data that I want to add a footer to in order to add up and display the Total of an int value in each row.

I have tried the following code.

I have the table as follows:

<b-table
  id="myTable"
  hover
  striped
  :items="myItems"
  :fields="myFields"
  show-empty
  empty-text:"No items to display"
  :foot-clone="true"
>
  <template slot="FOOT_row" slot-scope="data">
    <td>TOTAL<td>
    <td/><td/>
    <td><CurrencyFormatingComponent :Currency="data.Currency" :amount="this.CustomTotalFromData" class="pull-right"/></td>
  </template>
</b-table>

My Vue data

  myItems:[
    { Col1: "stuff", Col2: "otherStuff", Col3: "moreStuff", Col4: 12},
    { Col1: "stuffer", Col2: "otherStuffer", Col3: "moreStuffer", Col4: 10}
  ],
  myFields:[ 'Name', 'NickName', 'FavoriteMovie', 'netWorth' ]

What I'm getting right now is just a footer that mirrors the header.

This is following the Bootstrap-Vue custom header documentation, but is very skimpy on details and gives no real information how to add truly custom information. I just want my template to show in the footer.

EDIT: Okay, so I did figure out the following. Still not what I want.

I realized that the way Bootstrap-Vue has this set up that you are cloning the header, and then you are replacing the data within each column.

so using this template:

  <template slot="FOOT_Name" >
    Don't render "Name".
  </template>

It will replace the "Name" text in the footer for the "Name" column with the text I typed; Don't render"Name".

I'd Have to repeat this template for every slot that I want different. In my case, I have 6 columns so I'd have to have 5 blank templates in between the first to say Total and the last to display that total in currency notation.

What I may need to do is just put in a <div/> that mimics the footer I want and butt it up to the bottom of the table.

I ended up just creating a <div></div> that contained the information I needed under the table ensuring there was no padding between the table and this div. This also allowed the element to be reactive to smaller screen sizes when bootstrap removes the header and footer, stacks all the columns in a row on top of one another with the added header label to each column data point. So a row ends up in a column view where each line is "Column1Label: Col1Data". Then my footer <div> keeps the format I desire and i still at the bottom. — jeffcodes

Troy Morehouse Troy Morehouse · Accepted Answer · 2019-07-09T07:30:12

The v-model of b-table provides an array of the currently displayed items.

You can use this data, along with the scoped footer slots to generate a summation of your displayed rows.

Just create a few computed props that iterate over the value supplied by the v-model to generate the sums that you need.

<template>
  <b-table :items="items" :fields="fields" v-model="visibleRows" foot-clone>
    <template slot="FOOT_a" slot-scope="scope">
      {{ aTotal }}
    </template>
    <template slot="FOOT_b" slot-scope="scope">
      {{ bTotal }}
    </template>
  </b-table>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { a: 1, b: 2 },
        { a: 3, b: 4 },
        { a: 1.5, b: 3 }
      ],
      fields: ['a', 'b'],
      // b-table will populate this array with the visible rows in the table
      visibleRows: []
    }
  },
  computed: {
    aTotal() {
      return this.visibleRows.reduce((accum, item) => { return accum + item.a }, 0.0)
    },
    bTotal() {
      return this.visibleRows.reduce((accum, item) => { return accum + item.b }, 0.0)
    }
  }
}
</script>

How to add a Custom Footer to a Bootstrap-Vue table

1 Answers