I am working on a component that utilizes the bootstrap-vue b-table component. My goal is to create a bottom row that displays the sum of each column in the table. However, I encountered an issue where the bottom-row only fills the first column, leaving the rest of the columns empty. How can I get it to work as intended, similar to a thead-top?
<b-table
:items="items"
:fields="fields"
responsive="sm"
>
<template slot="thead-top" slot-scope="data">
<tr>
<th colspan="2"> </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"> </th>
<th>Type 1</th>
<th colspan="3">Type 2</th>
<th>Type 3</th>
</tr>
</template>
</b-table>