How to add grouping to vuetable-2? - vue.js

Question

I want to add a grouping to a vuetable based on OrderingHeaderId dynamically. I used vuetable-2 library to create this table. Please advise me on how to add the grouping concept to this kind of table.
data: function () {
return {
isLoading: false,
searchItems: null,
recordCount: 0,
issueMealIssuedCount: 0,
apiUrl: this.$http.defaults.baseURL + "/api/issue-meal/search",
fields: [
{
name: VuetableFieldCheckbox,
title: "checkbox",
width: "40px",
titleClass: "left aligned",
dataClass: "left aligned",
},
{
name: "OrderingHeaderId",
title: "Order Id",
},
{
name: "TotIssued",
title: "Tot Issued Amont",
},
{
name: "ItemName",
title: "Item Name",
},
{
name: "CostPrice",
title: "Selling Price",
},
{
name: "Quantity",
title: "Quantity",
},
{
name: "Status",
title: "Status",
width: "15%",
},
],
sortOrder: [
{
field: "ItemName",
direction: "asc",
},
],
};
},
<vuetable
:css="css.table"
ref="vuetable"
:api-url="apiUrl"
:load-on-start="false"
http-method="post"
:fields="fields"
data-path="data"
pagination-path="summary"
#vuetable:pagination-data="onPaginationData"
:append-params="moreParams"
#vuetable:loading="onLoading"
#vuetable:loaded="onLoaded"
#vuetable:checkbox-toggled="toggleCheckbox($event)"
#vuetable:checkbox-toggled-all="toggleCheckbox($event)"
:sort-order="sortOrder"
:per-page="perPage"
track-by="TrackId"
>
<template slot="OrderingHeaderId" slot-scope="props">
<div class="col-sm-12">
<span v-html="props.rowData.OrderingHeaderId"></span>
</div>
</template>
<template slot="TotIssued" slot-scope="props">
<div class="col-sm-12">
<span v-html="props.rowData.TotIssued"></span>
</div>
</template>
<template slot="ItemName" slot-scope="props">
<div class="col-sm-12">
<span v-html="props.rowData.ItemName"></span>
</div>
</template>
<template slot="CostPrice" slot-scope="props">
<div class="col-sm-12">
<span v-html="props.rowData.UnitPrice"></span>
</div>
</template>
<template slot="Quantity" slot-scope="props">
<div class="col-sm-12">
<span v-html="props.rowData.Quantity"></span>
</div>
</template>
<template slot="Status" slot-scope="props">
<div class="text-center">
<hcx-switch
v-model="props.rowData.OrderType"
:readonly="props.rowData.IsStatusSaved"
:id="props.rowIndex.toString()"
true-value="1"
false-value="2"
true-text="Issued"
false-text="Cancelled"
/>
</div>
</template>
</vuetable>