Column Spanning in Vue Grid component

<template>
    <div id="app">
        <ejs-grid :dataSource="data" height='auto' width='auto' gridLines='Both' :allowTextWrap='true' :queryCellInfo='queryCellInfoEvent'>
            <e-columns>
                <e-column field='EmployeeID' headerText='Employee ID' width='150' textAlign='Right' isPrimaryKey={true}></e-column>
                <e-column field='EmployeeName' headerText='Employee Name' width='200'></e-column>
                <e-column field='9:00' headerText='9:00 AM' width='120'></e-column>
                <e-column field='9:30' headerText='9:30 AM' width='120'></e-column>
                <e-column field='10:00' headerText='10:00 AM' width='120'></e-column>
                <e-column field='10:30' headerText='10:30 AM' width='120'></e-column>
                <e-column field='11:00' headerText='11:00 AM' width='120'></e-column>
                <e-column field='11:30' headerText='11:30 AM' width='120'></e-column>
                <e-column field='12:00' headerText='12:00 PM' width='120'></e-column>
                <e-column field='12:30' headerText='12:30 PM' width='120'></e-column>
                <e-column field='2:30' headerText='2:30 PM' width='120'></e-column>
                <e-column field='3:00' headerText='3:00 PM' width='120'></e-column>
                <e-column field='3:30' headerText='3:30 PM' width='120'></e-column>
                <e-column field='4:00' headerText='4:00 PM' width='120'></e-column>
                <e-column field='4:30' headerText='4:30 PM' width='120'></e-column>
                <e-column field='5:00' headerText='5:00 PM' width='120'></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from 'vue';
import { GridPlugin } from '@syncfusion/ej2-vue-grids';
import { data  } from './datasource.js';

Vue.use(GridPlugin);

export default {
  data: () => {
      return {
        data: data
        }
  },
  methods: {
    queryCellInfoEvent: function(args) {
        let data = args.data;
        switch (data.EmployeeID) {
            case 10001:
                if (args.column.field === '9:00' || args.column.field === '2:30' || args.column.field === '4:30') {
                    args.colSpan = 2;
                } else if (args.column.field === '11:00') {
                    args.colSpan = 3;
                }
                break;
            case 10002:
                if (args.column.field === '9:30' || args.column.field === '2:30' ||
                    args.column.field === '4:30') {
                    args.colSpan = 3;
                } else if (args.column.field === '11:00') {
                    args.colSpan = 4;
                }
                break;
            case 10003:
                if (args.column.field === '9:00' || args.column.field === '11:30') {
                    args.colSpan = 3;
                } else if (args.column.field === '10:30' || args.column.field === '3:30' ||
                    args.column.field === '4:30' || args.column.field === '2:30') {
                    args.colSpan = 2;
                }
                break;
            case 10004:
                if (args.column.field === '9:00') {
                    args.colSpan = 3;
                } else if (args.column.field === '11:00') {
                    args.colSpan = 4;
                } else if (args.column.field === '4:00' || args.column.field === '2:30') {
                    args.colSpan = 2;
                }
                break;
            case 10005:
                if (args.column.field === '9:00') {
                    args.colSpan = 4;
                } else if (args.column.field === '11:30') {
                    args.colSpan = 3;
                } else if (args.column.field === '3:30' || args.column.field === '4:30' || args.column.field === '2:30') {
                    args.colSpan = 2;
                }
                break;
            case 10006:
                if (args.column.field === '9:00' || args.column.field === '4:30' ||
                    args.column.field === '2:30' || args.column.field === '3:30') {
                    args.colSpan = 2;
                } else if (args.column.field === '10:00' || args.column.field === '11:30') {
                    args.colSpan = 3;
                }
                break;
            case 10007:
                if (args.column.field === '9:00' || args.column.field === '3:00' || args.column.field === '10:30') {
                    args.colSpan = 2;
                } else if (args.column.field === '11:30' || args.column.field === '4:00') {
                    args.colSpan = 3;
                }
                break;
            case 10008:
                if (args.column.field === '9:00' || args.column.field === '10:30' || args.column.field === '2:30') {
                    args.colSpan = 3;
                } else if (args.column.field === '4:00') {
                    args.colSpan = 2;
                }
                break;
            default:
                this.extendQueryCellEvent(args, data.EmployeeID);
        }
    },
    extendQueryCellEvent: function(args, value) {
        switch (value) {
            case 10009:
                if (args.column.field === '9:00' || args.column.field === '11:30') {
                    args.colSpan = 3;
                } else if (args.column.field === '4:30' || args.column.field === '2:30') {
                    args.colSpan = 2;
                }
                break;
            case 100010:
                if (args.column.field === '9:00' || args.column.field === '2:30' ||
                    args.column.field === '4:00' || args.column.field === '11:30') {
                    args.colSpan = 3;
                } else if (args.column.field === '10:30') {
                    args.colSpan = 2;
                }
                break;
        }
    }
    }
  });
</script>
<style>
 @import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>

define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    exports.data =  [
        {
            EmployeeID: 10001,
            EmployeeName: 'Davolio',
            '9:00': 'Analysis Tasks',
            '9:30': 'Analysis Tasks',
            '10:00': 'Team Meeting',
            '10:30': 'Testing',
            '11:00': 'Development',
            '11:30': 'Development',
            '12:00': 'Development',
            '12:30': 'Support',
            '1:00': 'Lunch Break',
            '1:30': 'Lunch Break',
            '2:00': 'Lunch Break',
            '2:30': 'Testing',
            '3:00': 'Testing',
            '3:30': 'Development',
            '4:00': 'Conference',
            '4:30': 'Team Meeting',
            '5:00': 'Team Meeting'
        },
        {
            EmployeeID: 10002,
            EmployeeName: 'Buchanan',
            '9:00': 'Task Assign',
            '9:30': 'Support',
            '10:00': 'Support',
            '10:30': 'Support',
            '11:00': 'Testing',
            '11:30': 'Testing',
            '12:00': 'Testing',
            '12:30': 'Testing',
            '1:00': 'Lunch Break',
            '1:30': 'Lunch Break',
            '2:00': 'Lunch Break',
            '2:30': 'Development',
            '3:00': 'Development',
            '3:30': 'Check Mail',
            '4:00': 'Check Mail',
            '4:30': 'Team Meeting',
            '5:00': 'Team Meeting'
        },
        {
            EmployeeID: 10003,
            EmployeeName: 'Fuller',
            '9:00': 'Check Mail',
            '9:30': 'Check Mail',
            '10:00': 'Check Mail',
            '10:30': 'Analysis Tasks',
            '11:00': 'Analysis Tasks',
            '11:30': 'Support',
            '12:00': 'Support',
            '12:30': 'Support',
            '1:00': 'Lunch Break',
            '1:30': 'Lunch Break',
            '2:00': 'Lunch Break',
            '2:30': 'Development',
            '3:00': 'Development',
            '3:30': 'Team Meeting',
            '4:00': 'Team Meeting',
            '4:30': 'Development',
            '5:00': 'Development'
        },
        {
            EmployeeID: 10004,
            EmployeeName: 'Leverling',
            '9:00': 'Testing',
            '9:30': 'Check Mail',
            '10:00': 'Check Mail',
            '10:30': 'Support',
            '11:00': 'Testing',
            '11:30': 'Testing',
            '12:00': 'Testing',
            '12:30': 'Testing',
            '1:00': 'Lunch Break',
            '1:30': 'Lunch Break',
            '2:00': 'Lunch Break',
            '2:30': 'Development',
            '3:00': 'Development',
            '3:30': 'Check Mail',
            '4:00': 'Conference',
            '4:30': 'Conference',
            '5:00': 'Team Meeting'
        },
        {
            EmployeeID: 10005,
            EmployeeName: 'Peacock',
            '9:00': 'Task Assign',
            '9:30': 'Task Assign',
            '10:00': 'Task Assign',
            '10:30': 'Task Assign',
            '11:00': 'Check Mail',
            '11:30': 'Support',
            '12:00': 'Support',
            '12:30': 'Support',
            '1:00': 'Lunch Break',
            '1:30': 'Lunch Break',
            '2:00': 'Lunch Break',
            '2:30': 'Development',
            '3:00': 'Development',
            '3:30': 'Team Meeting',
            '4:00': 'Team Meeting',
            '4:30': 'Testing',
            '5:00': 'Testing'
        },
        {
            EmployeeID: 10006,
            EmployeeName: 'Janet',
            '9:00': 'Testing',
            '9:30': 'Testing',
            '10:00': 'Support',
            '10:30': 'Support',
            '11:00': 'Support',
            '11:30': 'Team Meeting',
            '12:00': 'Team Meeting',
            '12:30': 'Team Meeting',
            '1:00': 'Lunch Break',
            '1:30': 'Lunch Break',
            '2:00': 'Lunch Break',
            '2:30': 'Development',
            '3:00': 'Development',
            '3:30': 'Team Meeting',
            '4:00': 'Team Meeting',
            '4:30': 'Development',
            '5:00': 'Development'
        },
        {
            EmployeeID: 10007,
            EmployeeName: 'Suyama',
            '9:00': 'Analysis Tasks',
            '9:30': 'Analysis Tasks',
            '10:00': 'Testing',
            '10:30': 'Development',
            '11:00': 'Development',
            '11:30': 'Testing',
            '12:00': 'Testing',
            '12:30': 'Testing',
            '1:00': 'Lunch Break',
            '1:30': 'Lunch Break',
            '2:00': 'Lunch Break',
            '2:30': 'Support',
            '3:00': 'Build',
            '3:30': 'Build',
            '4:00': 'Check Mail',
            '4:30': 'Check Mail',
            '5:00': 'Check Mail'
        },
        {
            EmployeeID: 10008,
            EmployeeName: 'Robert',
            '9:00': 'Task Assign',
            '9:30': 'Task Assign',
            '10:00': 'Task Assign',
            '10:30': 'Development',
            '11:00': 'Development',
            '11:30': 'Development',
            '12:00': 'Testing',
            '12:30': 'Support',
            '1:00': 'Lunch Break',
            '1:30': 'Lunch Break',
            '2:00': 'Lunch Break',
            '2:30': 'Check Mail',
            '3:00': 'Check Mail',
            '3:30': 'Check Mail',
            '4:00': 'Team Meeting',
            '4:30': 'Team Meeting',
            '5:00': 'Build'
        },
        {
            EmployeeID: 10009,
            EmployeeName: 'Andrew',
            '9:00': 'Check Mail',
            '9:30': 'Team Meeting',
            '10:00': 'Team Meeting',
            '10:30': 'Support',
            '11:00': 'Testing',
            '11:30': 'Development',
            '12:00': 'Development',
            '12:30': 'Development',
            '1:00': 'Lunch Break',
            '1:30': 'Lunch Break',
            '2:00': 'Lunch Break',
            '2:30': 'Check Mail',
            '3:00': 'Check Mail',
            '3:30': 'Check Mail',
            '4:00': 'Team Meeting',
            '4:30': 'Development',
            '5:00': 'Development'
        },
        {
            EmployeeID: 10010,
    
            EmployeeName: 'Michael',
            '9:00': 'Task Assign',
            '9:30': 'Task Assign',
            '10:00': 'Task Assign',
            '10:30': 'Analysis Tasks',
            '11:00': 'Analysis Tasks',
            '11:30': 'Development',
            '12:00': 'Development',
            '12:30': 'Development',
            '1:00': 'Lunch Break',
            '1:30': 'Lunch Break',
            '2:00': 'Lunch Break',
            '2:30': 'Testing',
            '3:00': 'Testing',
            '3:30': 'Testing',
            '4:00': 'Build',
            '4:30': 'Build',
            '5:00': 'Build'
        }
    ];
});