[Vuejs]-How to add custom row on the end of the table (b-table)

4👍

I can think of two possibilities on how you could achieve this:

  • Using the footer slot.
  • Using a computed property to append an extra item to your items array which will represent your custom row.

Using the footer slot

You can check Buefy’s documentation for the table component in the “Footer” section (I’m unable to link it directly).

<template slot="footer">
  <!-- Your custom last row goes here -->
</template>

Computed array with extra item

Add a computed property inside your component which returns the items array and appends an extra item.

computed: {
  itemsWithTotal() {
    return [
      ...this.items,
      { /* data for your last row */ }
    ];
  }
}

Remember to change the items prop of b-table to the new computed property. You will also have to differentiate between regular items and your custom last row item inside the column templates.

I’d recommend using the footer slot as you can avoid mixing your items array with a custom extra item.

👤Marc

Leave a comment