How to add grouping to vuetable-2?

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>