I need to add custom row ( different from rows before) to my grid b-table at the end. How can I do that? I have grid with Items | Amounts | Price and in last row i need to count total_amount and total_price of items.

<template>
    <div>
        <b-table
                striped hover :busy="isBusy" :fields="fields" :items="items" :show-empty="true"
                :empty-text="'Nebyly nalezeny žádné záznamy'" class="mb-0"
        >

            <template slot="name" slot-scope="data">
                <div class="form-group">
                    <b-form-input type="text" class="form-control w-100" size="sm" v-model.lazy="data.item.name">
                    </b-form-input>
                </div>
            </template>

            <template slot="unit_price" slot-scope="data">
                <div class="form-group">
                    <b-form-input type="number" class="form-control w-100" size="sm" v-model.number="data.item.unit_price" @change="updatePriceTogether(data.item)">
                    </b-form-input>
                </div>
            </template>

            <template slot="amount" slot-scope="data">
                <div class="form-group">
                    <b-form-input type="number" class="form-control w-100" size="sm" v-model.number="data.item.amount" @change="updatePriceTogether(data.item)">
                    </b-form-input>
                </div>
            </template>

            <div slot="table-busy" class="text-center text-danger my-2">
                <b-spinner class="align-middle"></b-spinner>
                <strong>Načítání...</strong>
            </div>
            <template slot="actions" slot-scope="data">
                <slot name="action-buttons" :data="data"></slot>
            </template>

        </b-table>
    </div>
</template>

<script>
    export default {
        name: "CustomItemGrid",
        props: {
            isBusy: {
                type: Boolean,
                required: true
            },
            fields: {
                type: Array,
                required: true
            },
            items: {
                type: Array,
                required: true
            }
        },
        methods: {
            updatePriceTogether(item){
                item.total_price = (item.unit_price * item.amount).toFixed(2);
            }
        }
    }
</script>

So i need something like this:

Item_name | Price | Amount | total_ price

Item1     | 12€     | 123  | 1400€

Item2     | 12€     | 123  | 1400€

**EMPTY     | Total:  | XXX T| XXXX€**         

how can I add last row (It has to be always on bottom)

I need to add custom row ( different from rows before) to my grid b-table at the end. How can I do that? I have grid with Items | Amounts | Price and in last row i need to count total_amount and total_price of items.

<template>
    <div>
        <b-table
                striped hover :busy="isBusy" :fields="fields" :items="items" :show-empty="true"
                :empty-text="'Nebyly nalezeny žádné záznamy'" class="mb-0"
        >

            <template slot="name" slot-scope="data">
                <div class="form-group">
                    <b-form-input type="text" class="form-control w-100" size="sm" v-model.lazy="data.item.name">
                    </b-form-input>
                </div>
            </template>

            <template slot="unit_price" slot-scope="data">
                <div class="form-group">
                    <b-form-input type="number" class="form-control w-100" size="sm" v-model.number="data.item.unit_price" @change="updatePriceTogether(data.item)">
                    </b-form-input>
                </div>
            </template>

            <template slot="amount" slot-scope="data">
                <div class="form-group">
                    <b-form-input type="number" class="form-control w-100" size="sm" v-model.number="data.item.amount" @change="updatePriceTogether(data.item)">
                    </b-form-input>
                </div>
            </template>

            <div slot="table-busy" class="text-center text-danger my-2">
                <b-spinner class="align-middle"></b-spinner>
                <strong>Načítání...</strong>
            </div>
            <template slot="actions" slot-scope="data">
                <slot name="action-buttons" :data="data"></slot>
            </template>

        </b-table>
    </div>
</template>

<script>
    export default {
        name: "CustomItemGrid",
        props: {
            isBusy: {
                type: Boolean,
                required: true
            },
            fields: {
                type: Array,
                required: true
            },
            items: {
                type: Array,
                required: true
            }
        },
        methods: {
            updatePriceTogether(item){
                item.total_price = (item.unit_price * item.amount).toFixed(2);
            }
        }
    }
</script>

So i need something like this:

Item_name | Price | Amount | total_ price

Item1     | 12€     | 123  | 1400€

Item2     | 12€     | 123  | 1400€

**EMPTY     | Total:  | XXX T| XXXX€**         

how can I add last row (It has to be always on bottom)

• javascript
• vue.js
• buefy

1 Answer 1

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

• Using the footer slot.
• Using a puted 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 ponent 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 puted property inside your ponent which returns the items array and appends an extra item.

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

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

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