bootstrap-vue using colgroup to group the column with column header - vuejs2

Question

I have to create the table as in the design shown below in the figure, using Bootstrap Vue.
Here the Male and Female is grouped by respective section, this can be done using the simple <td> and <col-group>,
there is the slot table-colgroup in bootstrap-vue documentation, but i did not found the way to use in this scenario.
I have implemented the table in the code snippets below:
Vue.config.productionTip = false
Vue.component('icons', {
template: '<a><slot></slot></a>'
})
new Vue({
el: '#app',
methods: {
addService() {
this.model.services.push({});
}
},
computed: {
sec_a_male: function() {
return this.model.services.reduce(function(a, c) {
return a + Number((c.section_a_male) || 0)
}, 0)
},
sec_a_female: function() {
return this.model.services.reduce(function(a, c) {
return a + Number((c.section_a_female) || 0)
}, 0)
},
sec_b_male: function() {
return this.model.services.reduce(function(a, c) {
return a + Number((c.section_b_male) || 0)
}, 0)
},
sec_b_female: function() {
return this.model.services.reduce(function(a, c) {
return a + Number((c.section_b_female) || 0)
}, 0)
}
},
data: {
model: {
services: []
},
fields: [{
key: "class",
label: "Class"
},
{
key: "section_a_male",
label: "Male"
},
{
key: "section_a_female",
label: "Female"
},
{
key: "section_b_male",
label: "Male"
},
{
key: "section_b_female",
label: "Male"
}
]
}
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue"></script>
<script src="//unpkg.com/babel-polyfill#latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div id="app">
<b-card header-tag="header" footer-tag="footer">
<template slot="header" class="mb-0">
<button type="button" class="btn btn-primary btn-sm" #click.prevent="addService">
<icons :icon="['fas', 'plus']" /> Add Items/Service</button>
</template>
<b-card-body>
<b-table responsive bordered striped hover caption-top :fields="fields" :items="model.services" caption-top>
<template slot="top-row" slot-scope="data">
<td rowspan="1"></td>
<th colspan="2" scope="colgroup">Section A</th>
<th colspan="2" scope="colgroup">Section B</th>
</template>
<template slot="class" slot-scope="data">
<b-form-input size="sm" class="form-control" v-model="data.item.class" :name="`class_${data.index}`" type="text" />
</template>
<template slot="section_a_male" slot-scope="data">
<b-form-input size="sm" class="form-control" v-model="data.item.section_a_male" :name="`section_a_male_${data.index}`" type="text" />
</template>
<template slot="section_a_female" slot-scope="data">
<b-form-input size="sm" class="form-control" v-model="data.item.section_a_female" :name="`section_a_female_${data.index}`" type="text" />
</template>
<template slot="section_b_male" slot-scope="data">
<b-form-input size="sm" class="form-control" v-model="data.item.section_b_male" :name="`section_b_male_${data.index}`" type="text" />
</template>
<template slot="section_b_female" slot-scope="data">
<b-form-input size="sm" class="form-control" v-model="data.item.section_b_female" :name="`section_b_female_${data.index}`" type="text" />
</template>
<template slot="bottom-row" slot-scope="data">
<td>Total</td>
<td>{{sec_a_male}}</td>
<td>{{sec_a_female}}</td>
<td>{{sec_b_male}}</td>
<td>{{sec_b_female}}</td>
</template>
<template slot="table-colgroup">
<col>
<col span="2">
<col span="2">
</template>
</b-table>
</b-card-body>
</b-card>
</div>
Expected Output:
Please help!

Answer 1

This might get you started. You can add a class bg-danger to your td elements, and you can add variants/classes to your fields array.
Vue.config.productionTip = false
Vue.component('icons', {
template: '<a><slot></slot></a>'
})
new Vue({
el: '#app',
methods: {
addService() {
this.model.services.push({});
}
},
computed: {
sec_a_male: function() {
return this.model.services.reduce(function(a, c) {
return a + Number((c.section_a_male) || 0)
}, 0)
},
sec_a_female: function() {
return this.model.services.reduce(function(a, c) {
return a + Number((c.section_a_female) || 0)
}, 0)
},
sec_b_male: function() {
return this.model.services.reduce(function(a, c) {
return a + Number((c.section_b_male) || 0)
}, 0)
},
sec_b_female: function() {
return this.model.services.reduce(function(a, c) {
return a + Number((c.section_b_female) || 0)
}, 0)
}
},
data: {
model: {
services: []
},
fields: [{
key: "class",
label: "Class"
},
{
key: "section_a_male",
label: "Male",
variant: 'danger'
},
{
key: "section_a_female",
label: "Female",
variant: 'danger'
},
{
key: "section_b_male",
label: "Male",
variant: 'warning'
},
{
key: "section_b_female",
label: "Male",
variant: 'warning'
}
]
}
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue"></script>
<script src="//unpkg.com/babel-polyfill#latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue#latest/dist/bootstrap-vue.js"></script>
<div id="app">
<b-card header-tag="header" footer-tag="footer">
<template slot="header" class="mb-0">
<button type="button" class="btn btn-primary btn-sm" #click.prevent="addService">
<icons :icon="['fas', 'plus']" /> Add Items/Service</button>
</template>
<b-card-body>
<b-table responsive bordered hover caption-top :fields="fields" :items="model.services" foot-clone>
<template slot="class" slot-scope="data">
<b-form-input size="sm" class="form-control" v-model="data.item.class" :name="`class_${data.index}`" type="text" />
</template>
<template slot="section_a_male" slot-scope="data">
<b-form-input size="sm" class="form-control" v-model="data.item.section_a_male" :name="`section_a_male_${data.index}`" type="text" />
</template>
<template slot="section_a_female" slot-scope="data">
<b-form-input size="sm" class="form-control" v-model="data.item.section_a_female" :name="`section_a_female_${data.index}`" type="text" />
</template>
<template slot="section_b_male" slot-scope="data">
<b-form-input size="sm" class="form-control" v-model="data.item.section_b_male" :name="`section_b_male_${data.index}`" type="text" />
</template>
<template slot="section_b_female" slot-scope="data">
<b-form-input size="sm" class="form-control" v-model="data.item.section_b_female" :name="`section_b_female_${data.index}`" type="text" />
</template>
<template slot="bottom-row" slot-scope="data">
<td>Total</td>
<td class="bg-danger">{{sec_a_male}}</td>
<td class="bg-danger">{{sec_a_female}}</td>
<td class="bg-warning">{{sec_b_male}}</td>
<td class="bg-warning">{{sec_b_female}}</td>
</template>
</b-table>
</b-card-body>
</b-card>
</div>

Answer 2

This hasn't been on the boostrap-vue before, new changes has just been published on current version of boostrap-vue v2.0.0-rc.14, which support for the header row.
<b-table responsive bordered striped hover caption-top :fields="fields" :items="model.services" caption-top>
<template slot="thead-top" slot-scope="{}">
<tr>
<th></th>
<th class="text-center" colspan="2">Section A</th>
<th class="text-center" colspan="2">Section B</th>
</tr>
</template>
</b-table>
This can be done by using thead-top slot, further explained here
https://bootstrap-vue.js.org/docs/components/table#adding-additional-rows-to-the-header

Answer 3

This might give the alternate case:
<b-table class ="table" :fields="fields" :items="items">
<template slot="bottom-row" slot-scope="{}">
<th colspan="5" class="text-center">No Data</th>
</template>
</b-table>
get header table from :fields
default row in bottom with text "No Data" align center. Post condition :items is null.
Check table output below: