How to modify the active sheet and insert it as a new sheet in Vue Spreadsheet?

This knowledge base article explains how to make changes to the active sheet and insert it as a new sheet in a Vue Spreadsheet. To achieve this, first, retrieve the active sheet and construct a new sheet object based on the active sheet model. While creating the new sheet, retain the internal properties of the active sheet but modify its name and index to differentiate it from the original.

Once the new sheet is constructed, use the insertSheet method to add it as a new sheet to the spreadsheet.

[app.vue]

<template>
 <div class="control-section">
   <div id="spreadsheet-default-section">
     <button class="e-btn" @click="onClick">Insert Sheet</button>
     <ejs-spreadsheet
       ref="spreadsheet"
       :openUrl="openUrl"
       :saveUrl="saveUrl"
       :created="created"
     >
       <e-sheets>
         <e-sheet name="Car Sales Report">
           <e-ranges>
             <e-range :dataSource="dataSource"></e-range>
           </e-ranges>
           <e-rows>
             <e-row :index="rowIndex" :cells="cells"></e-row>
           </e-rows>
           <e-columns>
             <e-column :width="width1"></e-column>
             <e-column :width="width2"></e-column>
             <e-column :width="width2"></e-column>
             <e-column :width="width1"></e-column>
             <e-column :width="width2"></e-column>
             <e-column :width="width3"></e-column>
           </e-columns>
         </e-sheet>
       </e-sheets>
     </ejs-spreadsheet>
   </div>
   <!-- custom code start -->
   <!-- custom code end -->
 </div>
</template>
<!-- custom code start -->

<script>
import {
 SpreadsheetComponent,
 SheetDirective,
 RowsDirective,
 RowDirective,
 SheetsDirective,
 ColumnsDirective,
 ColumnDirective,
 RangesDirective,
 RangeDirective,
} from '@syncfusion/ej2-vue-spreadsheet';
import dataSource from './default-data.json';

export default {
 components: {
   'ejs-spreadsheet': SpreadsheetComponent,
   'e-sheet': SheetDirective,
   'e-sheets': SheetsDirective,
   'e-row': RowDirective,
   'e-rows': RowsDirective,
   'e-column': ColumnDirective,
   'e-columns': ColumnsDirective,
   'e-range': RangeDirective,
   'e-ranges': RangesDirective,
 },
 data: () => {
   return {
     dataSource: dataSource.defaultData,
     rowIndex: 30,
     colIndex: 4,
     cells: [
       {
         index: 4,
         value: 'Total Amount:',
         style: { fontWeight: 'bold', textAlign: 'right' },
       },
       { formula: '=SUM(F2:F30)', style: { fontWeight: 'bold' } },
     ],
     width1: 180,
     width2: 130,
     width3: 120,
     openUrl:
       'https://services.syncfusion.com/vue/production/api/spreadsheet/open',
     saveUrl:
       'https://services.syncfusion.com/vue/production/api/spreadsheet/save',
   };
 },
 methods: {
   created: function () {
     var spreadsheet = this.$refs.spreadsheet;
     spreadsheet.cellFormat(
       { fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' },
       'A1:F1'
     );
     spreadsheet.numberFormat('$#,##0.00', 'F2:F31');
   },
   onClick: function () {
     let spreadsheet = this.$refs.spreadsheet;
     let sheetData = spreadsheet.ej2Instances.getActiveSheet();
     let {
       rows,
       columns,
       state,
       rowCount,
       isProtected,
       paneTopLeftCell,
       colCount,
       frozenRows,
       frozenColumns,
       protectSettings,
       conditionalFormats,
       usedRange,
       standardHeight,
       showGridLines,
       showHeaders,
       topLeftCell,
       selectedRange,
       password,
       ranges: sheetRanges,
     } = sheetData;
     let newSheet = {
       activeCell: 'A1',
       name: 'Modified_Active_Sheet',
       index: sheetData.index + 1,
       rows,
       columns,
       state,
       rowCount,
       isProtected,
       paneTopLeftCell,
       colCount,
       frozenRows,
       frozenColumns,
       protectSettings,
       conditionalFormats,
       usedRange,
       standardHeight,
       showGridLines,
       showHeaders,
       topLeftCell,
       selectedRange,
       password,
       ranges: sheetRanges.map(
         ({
           address,
           dataSource,
           showFieldAsHeader,
           startCell,
           fieldsOrder,
           query,
           template,
         }) => ({
           address,
           dataSource,
           showFieldAsHeader,
           startCell,
           fieldsOrder,
           query,
           template,
         })
       ),
     };

     // Insert the new sheet using the spreadsheet reference
     this.$refs.spreadsheet.insertSheet([newSheet]);

     // Setting the insereted sheet as active sheet
     setTimeout(()=>{
       this.$refs.spreadsheet.goTo(`${newSheet.name}!A1`);
     });
   },
 },
};
</script> 

Sample Link: https://stackblitz.com/edit/74nndh-xxzq7e6u?file=src%2FApp.vue

Output:

For more information, please refer to the UG link mentioned below.

UG Link: Worksheet in Vue Spreadsheet component | Syncfusion