How to use the slot “bottom-row” in “b-table” component in bootstrap-vue?

Question

I have a component that uses bootstrap-vue b-table component. I need to make a result row, which will be the sum of each column. But when I try to use a bottom-row as a thead-top, then the bottom-row fills only the first column, ignoring the rest. How to make it work like a thead-top?

<b-table
    :items="items"
    :fields="fields"
    responsive="sm"
>
        <template slot="thead-top" slot-scope="data">
            <tr>
                <th colspan="2">&nbsp;</th>
            <th>Type 1</th>
            <th colspan="3">Type 2</th>
            <th>Type 3</th>
        </tr>
    </template>
    <template slot="bottom-row"
          slot-scope="data"
    >
        <tr>
            <th colspan="2">&nbsp;</th>
            <th>Type 1</th>
            <th colspan="3">Type 2</th>
            <th>Type 3</th>
        </tr>
    </template>
</b-table>

Answer 1

I realized what I was doing wrong. Tag is not needed in template slot="bottom-row".

<template slot="bottom-row"
          slot-scope="data"
>
    <td v-for="(field, i) in data.fields">
         {{ i }}
    </td>
</template>