Ribbon in JavaScript Spreadsheet control

import { Spreadsheet, SheetModel, ColumnModel, MenuSelectEventArgs } from '@syncfusion/ej2-spreadsheet';
import { enableRipple, select } from '@syncfusion/ej2-base';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';
import { data } from './datasource.ts';

enableRipple(true);

let columns: ColumnModel[] = [{ width: 180 }, { width: 130 }, { width: 130 }, { width: 180 }, { width: 130 }, { width: 120 }];

let sheets: SheetModel[] = [{ ranges: [{ dataSource: data }], columns: columns }];

let spreadsheet: Spreadsheet = new Spreadsheet({
    sheets: sheets,
    created: (): void => {
        spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A1:F1');
        // Hiding the `Insert` from ribbon.
        spreadsheet.hideRibbonTabs(['Insert']);
        // Set disabled state to `View` ribbon tab.
        spreadsheet.enableRibbonTabs(['View'], false);
        // Adding the `Help` ribbon tab at the last index.
        // Specify the ribbon tab header text in last optional argument(`insertBefore`) for inserting new tab before any existing tab.
        spreadsheet.addRibbonTabs([{ header: { text: 'Help' }, content: [{ text: 'Feedback', tooltipText: 'Feedback',
            click: (args: ClickEventArgs): void => { /* Any click action for this toolbar item will come here. */ } }] }]);
        // Hiding the unwanted toolbar items from `Home` by specifying its index.
        spreadsheet.hideToolbarItems('Home', [0, 1, 2, 4, 14, 15, 21, 24]);
        // Set disable state to `Underline`, 'Wrap text` toolbar items from `Home` by specifying the item id.
        spreadsheet.enableToolbarItems('Home', [`${spreadsheet.element.id}_underline`, `${spreadsheet.element.id}_wrap`], false);
        // Set disable state to `Protect Sheet` toolbar item from `Data` by mentioning its index.
        spreadsheet.enableToolbarItems('Data', [0], false);
        // Adding the new `Custom Formulas` toolbar item under `Formulas` tab for adding custom formulas.
        spreadsheet.addToolbarItems(
            'Formulas', [{ type: 'Separator' }, {
                text: 'Custom Formulas', tooltipText: 'Custom Formulas',
                // You can set click handler for each new custom toolbar item
                click: (args: ClickEventArgs): void => {
                    // You can add custom formulas here.
                }
            }]);
        // Adding new custom item `Import` after the existing `Open` item. By default, new item will add after the specified item.
        spreadsheet.addFileMenuItems([{ text: 'Import', iconCss: 'e-open e-icons' }], 'Open');
        // Adding new custom item `Export As` after the existing `Save As` item.
        // Set `insertAfter` optional argument as `false` for adding new item before the specified item.
        spreadsheet.addFileMenuItems(
            [{
                text: 'Export As', iconCss: 'e-save e-icons', items: [{ text: 'XLSX', iconCss: 'e-xlsx e-icons' },
                    { text: 'XLS', iconCss: 'e-xls e-icons' }, { text: 'CSV', iconCss: 'e-csv e-icons' }]
            }],
            'Save As', false);
    },
    fileMenuBeforeOpen: (): void => {
        // Because the file menu items are created dynamically, you need to perform the hide or show and enable/disable operations
        // under filemenu before open event.
        // Hiding the `Save As` and `Open` item.
        spreadsheet.hideFileMenuItems(['Save As', 'Open']);
         // Set disable state to `New` item. You can perform any file menu items customization by specifying the item id,
        // if it has more than one same item text. Set the last argument `isUniqueId` as true for using the item id.
        spreadsheet.enableFileMenuItems([`${spreadsheet.element.id}_New`], false, true);
    },
    fileMenuItemSelect: (args: MenuSelectEventArgs): void => {
        // Custom file menu items select handler
        switch (args.item.text) {
            case 'Import': select(`#${spreadsheet.element.id}_fileUpload`, spreadsheet.element).click();
                break;
            case 'XLSX': spreadsheet.save({ saveType: 'Xlsx' });
                break;
            case 'XLS': spreadsheet.save({ saveType: 'Xls' });
                break;
            case 'CSV': spreadsheet.save({ saveType: 'Csv' });
                break;
        }
    },
    openUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/open',
    saveUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/save',
    // Removed the unwanted support for this samples
    showFormulaBar: false, showSheetTabs: false, allowInsert: false, allowDelete: false, allowMerge: false
});

spreadsheet.appendTo('#spreadsheet');

<!DOCTYPE html>
<html lang="en">

<head>
            
        <title>EJ2 SpreadSheet</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="Typescript UI Controls" />
        <meta name="author" content="Syncfusion" />
        <link rel="shortcut icon" href="resources/favicon.ico" />
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-base/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-inputs/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-buttons/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-lists/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-navigations/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-popups/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-dropdowns/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-grids/styles/material.css" rel="stylesheet" />
        <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-spreadsheet/styles/material.css" rel="stylesheet" />
        <link href="styles.css" rel="stylesheet" />
        <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/shim.min.js"></script>
        <script src="system.config.js"></script>
        <script src="es5-datasource.js" type="text/javascript"></script>
</head>

<body>
        <!--Element which is going to render-->
        <div id='loader'>Loading....</div>
        <div id='container'>
                <div id="spreadsheet"></div>
        </div>
</body>

</html>

/**
 * Ribbon customization data source
 */
export let data: Object[] = [
    {
        'Customer Name': 'Romona Heaslip',
        'Model': 'Taurus',
        'Color': 'Aquamarine',
        'Payment Mode': 'Debit Card',
        'Delivery Date': '07/11/2015',
        'Amount': '8529.22'
    },
    {
        'Customer Name': 'Clare Batterton',
        'Model': 'Sparrow',
        'Color': 'Pink',
        'Payment Mode': 'Cash On Delivery',
        'Delivery Date': '7/13/2016',
        'Amount': '17866.19'
    },
    {
        'Customer Name': 'Eamon Traise',
        'Model': 'Grand Cherokee',
        'Color': 'Blue',
        'Payment Mode': 'Net Banking',
        'Delivery Date': '09/04/2015',
        'Amount': '13853.09'
    },
    {
        'Customer Name': 'Julius Gorner',
        'Model': 'GTO',
        'Color': 'Aquamarine',
        'Payment Mode': 'Credit Card',
        'Delivery Date': '12/15/2017',
        'Amount': '2338.74'
    },
    {
        'Customer Name': 'Jenna Schoolfield',
        'Model': 'LX',
        'Color': 'Yellow',
        'Payment Mode': 'Credit Card',
        'Delivery Date': '10/08/2014',
        'Amount': '9578.45'
    },
    {
        'Customer Name': 'Marylynne Harring',
        'Model': 'Catera',
        'Color': 'Green',
        'Payment Mode': 'Cash On Delivery',
        'Delivery Date': '7/01/2017',
        'Amount': '19141.62'
    },
    {
        'Customer Name': 'Vilhelmina Leipelt',
        'Model': '7 Series',
        'Color': 'Goldenrod',
        'Payment Mode': 'Credit Card',
        'Delivery Date': '12/20/2015',
        'Amount': '6543.30'
    },
    {
        'Customer Name': 'Barby Heisler',
        'Model': 'Corvette',
        'Color': 'Red',
        'Payment Mode': 'Credit Card',
        'Delivery Date': '11/24/2014',
        'Amount': '13035.06'
    },
    {
        'Customer Name': 'Karyn Boik',
        'Model': 'Regal',
        'Color': 'Indigo',
        'Payment Mode': 'Debit Card',
        'Delivery Date': '05/12/2014',
        'Amount': '18488.80'
    },
    {
        'Customer Name': 'Jeanette Pamplin',
        'Model': 'S4',
        'Color': 'Fuscia',
        'Payment Mode': 'Net Banking',
        'Delivery Date': '12/30/2014',
        'Amount': '12317.04'
    },
    {
        'Customer Name': 'Cristi Espinos',
        'Model': 'TL',
        'Color': 'Aquamarine',
        'Payment Mode': 'Credit Card',
        'Delivery Date': '12/18/2013',
        'Amount': '6230.13'
    }
];