Spreadsheet

<div id='spreadsheet'></div>
<script>
 var spreadsheetObj = new Spreadsheet();
 spreadsheetObj.appendTo('#spreadsheet');
</script>

<div id='Spreadsheet'></div>

new Spreadsheet({
     activeSheetIndex: 2
...
 }, '#Spreadsheet');

<div id='Spreadsheet'></div>

new Spreadsheet({
     autoFillSettings: {
         fillType: 'FillSeries',
         showFillOptions: true
     }
...
}, '#Spreadsheet');
The autoFillSettings `fillType` property has FOUR values and it is described below:

* CopyCells: To update the copied cells of the selected range.
* FillSeries: To update the filled series of the selected range.
* FillFormattingOnly: To fill the formats only for the selected range.
* FillWithoutFormatting: To fill without the format of the selected range.

<div id='Spreadsheet'></div>

new Spreadsheet({
     ...
         cellStyle: { fontWeight: 'bold', fontSize: 12,
             fontStyle: 'italic', textIndent: '2pt'
             backgroundColor: '#4b5366', color: '#ffffff'
     },
     ...
 }, '#Spreadsheet');

<div id='spreadsheet'></div>

new Spreadsheet({
 cssClass: 'e-custom1 e-custom2',
 ...
}, '#spreadsheet');

<div id='Spreadsheet'></div>

new Spreadsheet({
     ...
     definedNames: [{ name: 'namedRange1', refersTo: 'Sheet1!A1:B5' }],
     ...
 }, '#Spreadsheet');

<div id='Spreadsheet'></div>

new Spreadsheet({
     height: '550px'
...
 }, '#Spreadsheet');

<div id='Spreadsheet'></div>

new Spreadsheet({
     scrollSettings: {
         isFinite: true,
         enableVirtualization: false
     }
...
 }, '#Spreadsheet');

<div id='Spreadsheet'></div>

new Spreadsheet({
     selectionSettings: {
         mode: 'None'
     }
...
}, '#Spreadsheet');
The selectionSettings `mode` property has three values and it is described below:

* None: Disables UI selection.
* Single: Allows single selection of cell, row, or column and disables multiple selection.
* Multiple: Allows multiple selection of cell, row, or column and disables single selection.

<div id='Spreadsheet'></div>

new Spreadsheet({
     sheets: [{
                 name: 'First Sheet',
                 range: [{ dataSource: data }],
                 rows: [{
                         index: 5,
                         cells: [{ index: 4, value: 'Total Amount:' },
                                 { formula: '=SUM(F2:F30)', style: { fontWeight: 'bold' } }]
                 }]
             }, {
                 name: 'Second Sheet',
                 columns: [{ width: 180 }, { index: 4, width: 130 }]
             }]
...
 }, '#Spreadsheet');

<div id='Spreadsheet'></div>

new Spreadsheet({
     width: '550px'
...
 }, '#Spreadsheet');

    <div id="spreadsheet"></div>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
import { closest } from '@syncfusion/ej2-base';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
        contextMenuBeforeOpen: (args): void => {
           // To add context menu items in sheet content context menu.
           if(closest(args.event.target as Element, '.e-sheet-content')){
              spreadsheet.addContextMenuItems([{ text: 'Custom Item' }], 'Paste Special', false); //To pass the items, Item before / after that the element to be inserted, Set false if the items need to be inserted before the text.
           }
           // To add context menu items in column header context menu.
           else if(closest(args.event.target as Element, '.e-colhdr-table')){
              spreadsheet.addContextMenuItems([{ text: 'Custom Column' }], 'Insert Column', false);
           }
            // To add context menu items in row header context menu.
           else if(closest(args.event.target as Element, '.e-rowhdr-table')){
              spreadsheet.addContextMenuItems([{ text: 'Custom Row' }], 'Insert Row', false);
           }
            // To add context menu items in sheet tab context menu.
           else if(closest(args.event.target as Element, '.e-toolbar-item')){
              spreadsheet.addContextMenuItems([{ text: 'Custom tab' }], 'Insert', false);
           }
        }
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Add CustomFunction</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // To add custom library function.
   spreadsheet.addCustomFunction("CustomFuntion", "SQRT"); //// Custom function handler name, Custom function name
};

(window as any).CustomFuntion = num => Math.sqrt(num);

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Add Data Validation</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
   // To add the data validation
    spreadsheet.addDataValidation({ type: 'TextLength', operator: 'LessThanOrEqualTo', value1: '4' }, 'A2:A5'); // specifies the validation rules, range that needs to be add validation.// specifies the validation rules, range that needs to be add validation.
    spreadsheet.addDataValidation({ type: 'WholeNumber', operator: 'NotEqualTo', value1: '1' }, 'B2:B5');
    spreadsheet.addDataValidation({ type: 'Date', operator: 'NotEqualTo', value1: '04/11/2019' }, 'F2:F5');
    spreadsheet.addDataValidation({ type: 'Time', operator: 'Between', value1: '10:00:00 AM', value2: '11:00:00 AM' }, 'G2:G5');
    spreadsheet.addDataValidation({ type: 'Decimal', operator: 'LessThan', value1: '100000.00' }, 'H2:H5');
    spreadsheet.addDataValidation({ type: 'List', inCellDropDown: true, value1: '10, 20, 30' }, 'I2:I5'); // Specifies InCellDropDown option in Data Validation.
    spreadsheet.addDataValidation({ type: 'List', inCellDropDown: true, value1: '=Sheet1!A2:A3'}, 'J2:J5'); // Specifies the cell range as data source to the list validation dropdown.
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Add Defined Name</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // To provide name and range arguments in this method 
   spreadsheet.addDefinedName({name: 'value', refersTo: '=Sheet1!B2' });
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Add File Menu Items</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // To add custom file menu items
   spreadsheet.addFileMenuItems([{ text: 'Print' }], 'Save As', false, false); //Specifies the ribbon file menu items to be inserted, text, Set `false` if the `items` need to be inserted before the `text`, isUniqueId? - Set `true` if the given file menu items `text` is a unique id
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Add Hyperlink</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // To add the hyperlink in the cell
   spreadsheet.addHyperlink("https://www.google.com/", "A5"); // hyperlink, address
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Higlight Invalid Data</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
     //Highlight Invalid Data
  spreadsheet.addInvalidHighlight('A1:H5'); //range
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Add Ribbon Tabs</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
     //To add custom ribbon tabs
  spreadsheet.addRibbonTabs([{ header: { text: 'Custom' }, content: [{ text: 'Custom', tooltipText: 'Custom Btn' }] }], 'Data'); // items , Specifies the existing ribbon header text before which the new tabs will be inserted.
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Add Toolbar Items</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
     //To add the custom items in Spreadsheet ribbon toolbar.
  spreadsheet.addToolbarItems('Home', [{ type: 'Separator' }, { text: 'Custom', tooltipText: 'Custom Btn' }], 15); // Specifies the ribbon tab header text under which the specified items will be inserted, Specifies the ribbon toolbar items that needs to be inserted, Specifies the index text before which the new items will be inserted.
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">AppendTo</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    //Appends the control within the given HTML Div element.
    spreadsheet.appendTo('#spreadsheet'); // pass argument as selector of the element, here we passing selector(id) of the spreadsheet element
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Apply Filter</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet, PredicateModel, getCellIndexes, getColumnHeaderText, getCell } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
     //Applies the filter UI in the range of cells in the sheet.
    let sheet = spreadsheet.getActiveSheet();
    let cell = getCellIndexes(sheet.activeCell);
    let predicates: PredicateModel[] = [{
            field: getColumnHeaderText(cell[1] + 1),
            operator: 'equal',
            value: getCell(cell[0], cell[1], sheet).value, matchCase: false,
        }];
    spreadsheet.applyFilter(predicates, 'A1:F1');// predicates, range
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">AutoFit</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    //This method is used to autofit the range of rows or columns
  spreadsheet.autoFit("D:F") //To autofit the column
  spreadsheet.autoFit("5:10"); // To autofit to rows
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Cell Format</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet, CellStyleModel } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // Applies the style (font family, font weight, background color, etc…) to the specified range of cells.
    spreadsheet.cellFormat({ fontWeight: 'bold', fontSize: '12pt', backgroundColor: '#279377', color: '#ffffff' }, 'A2:E2');
    // Setting common styles to whole table cells
    spreadsheet.cellFormat({ verticalAlign: 'middle', fontFamily: 'Axettac Demo' }, 'A2:E12');
    // Column wise styles setting
    spreadsheet.cellFormat({ textAlign: 'center' }, 'A2:A12');
    // Setting text-indent to 2 and 4 column
    let style: CellStyleModel = { textAlign: 'left', textIndent: '8pt' };
    spreadsheet.cellFormat(style, 'B2:B12');
    spreadsheet.cellFormat(style, 'D2:D12');
    spreadsheet.cellFormat({ fontStyle: 'italic', textAlign: 'right' }, 'C3:C12');
    spreadsheet.cellFormat({ textAlign: 'center' }, 'E2:E12');
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Clear</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
  spreadsheet.clear({type: 'Clear Contents', range: 'A1:A10'}); // Clear the content in the provided range
  spreadsheet.clear({type: 'Clear Formats', range: 'A1:A10'}); // Clear the formats applied in the provided range
  spreadsheet.clear({type: 'Clear Hyperlinks', range: 'A1:A10'}); // Clear the hyperlinks applied in the provided range
  spreadsheet.clear({type: 'Clear All', range: 'B1:B10'}); // Clear the content, formats and hyperlinks applied in the provided range. 
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Clear Conditional Format</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // This method is used to remove conditional formatting.
  spreadsheet.clearConditionalFormat("A1:B5"); // range that needs to be remove conditional formatting.
  spreadsheet.clearConditionalFormat("Sheet1!A1:B5"); // you can also specify the range with sheetname.
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Clear Filter</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // Clears the filter changes of the sheet.
    spreadsheet.clearFilter();
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Close Edit</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // Cancels the edited state, this will not update any value in the cell.
  spreadsheet.closeEdit();
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Compute Expression</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // Used to compute the specified expression/formula.
    spreadsheet.computeExpression('522+1'); // pass the  expression 
    spreadsheet.computeExpression('=SUM(F2:F3)'); //pass the formula as string.
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Conditional Format</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // This method is used to add conditional formatting.

    // Apply blue data bar to the specified range.
    spreadsheet.conditionalFormat({ type: 'BlueDataBar', range: 'D3:D18' });
    // Apply three stars to the specified range.
    spreadsheet.conditionalFormat({ type: 'ThreeStars', range: 'F3:F18' });
    // Highlight the cells that contain a value greater than specified value.
    spreadsheet.conditionalFormat({ type: 'GreaterThan', cFColor: 'RedFT', value: '10/15/2023', range: 'E2:E30' });
    // Highlight the cells that contain a value between specified range.
    spreadsheet.conditionalFormat({ type: 'Between', cFColor: 'GreenFT', value: '03/04/2023,06/26/2023', range: 'E2:E30' });
    // Highlight the cells that contain a value greater than average of specified range.
    spreadsheet.conditionalFormat({ type: 'AboveAverage', cFColor: 'RedFT', range: 'F2:F30' });
    // Apply the RGY(Red-Green-Yellow) color scale to the specified range.
    spreadsheet.conditionalFormat({ type: 'RYGColorScale', range: 'F2:F30' });
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Copy</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
        sheets: [
            {
                name: 'Car Sales Report'
            }]
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    spreadsheet.copy(); //Copy the selected cell
    spreadsheet.copy('A2'); // specify the address
    spreadsheet.copy('Car Sales Report!B2')  // address with sheet name. 
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Cut</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
        sheets: [
            {
                name: 'Car Sales Report'
            }]
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    spreadsheet.cut(); //cut the selected cell
    spreadsheet.cut('A2'); // specify the address
    spreadsheet.cut('Car Sales Report!B2')  // address with sheet name.
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Delete</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // Used to delete rows, columns and sheets from the spreadsheet.
    spreadsheet.delete(1, 1, "Row", "Sheet1"); // start index of row/column, end index of row/column, Model type(Row, Column, Sheet), sheet(sheet name or index)
    spreadsheet.delete(2, 2, "Column", "Sheet1"); // start index of row/column, end index of row/column, Model type(Row, Column, Sheet), sheet(sheet name or index)
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Delete Image</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
        created: (): void => {
            spreadsheet.insertChart([{ type: "Line", theme: "Material", isSeriesInRows: false, range: "A1", id: "Chart1"}]);
        }
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

    document.getElementById("btn").onclick = () => {
     //Used to delete the chart from spreadsheet.
    spreadsheet.deleteChart("Chart1"); // id - Specifies the chart element id.
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Delete Image</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
        created: (): void => {
            // Used to set the image in spreadsheet.
            spreadsheet.insertImage([{ src: "https://www.w3schools.com/images/w3schools_green.jpg", height: 400,
            width: 400 }], "A1"); // images - Specifies the options to insert image in spreadsheet, Specifies the range in spreadsheet.
        }
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

    document.getElementById("btn").onclick = () => {
    //  Used to delete the image in spreadsheet.
    spreadsheet.deleteImage("spreadsheet_overlay_picture_1", "A3"); //id - Specifies the id of the image element to be deleted, range - Specifies the range in spreadsheet.
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Duplicate Sheet</button>

import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // Make a duplicate/copy of the active sheet in the spreadsheet.
    spreadsheet.duplicateSheet();
    // Make a duplicate/copy of the specified sheet in the spreadsheet.
    spreadsheet.duplicateSheet(1); // index of the sheet to be duplicated
};

    <div id="spreadsheet"></div>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
        contextMenuBeforeOpen: (): void => {
            //To enable / disable context menu items.
          spreadsheet.enableContextMenuItems(['Copy'], false, false); // Contextmenu Items that needs to be enabled / disabled, Set true / false to enable / disable the menu items, Set true if the given text is a unique id.
          spreadsheet.enableContextMenuItems(['spreadsheet_cmenu_copy'], false, true); // Contextmenu id that needs to be enabled / disabled, Set true / false to enable / disable the menu items, Set true if the given text is a unique id.
        }
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

    <div id="spreadsheet"></div>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
        fileMenuBeforeOpen: (): void => {
            // To enable / disable file menu items.
          spreadsheet.enableFileMenuItems(['New'], false, true); //File menu Items that needs to be enabled / disabled, set `true` / `false` to enable / disable the menu items, set `true` if the   given file menu items `text` is a unique id.
        }
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Enable Ribbon Tabs</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // To enable / disable the existing ribbon tabs.
  spreadsheet.enableRibbonTabs(['Home'], false); // tabs - Specifies the ribbon tab header text which needs to be enabled / disabled, Set `true` / `false` to enable / disable the ribbon tabs.
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Enable Toolbar Items</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // To Enables or disables the specified ribbon toolbar items or all ribbon items
    spreadsheet.enableToolbarItems('Home', ['spreadsheet_line-through'], false); // Specifies the ribbon tab header text under which the toolbar items need to be enabled / disabled, Specifies the toolbar item indexes / unique id's which needs to be enabled / disabled, Boolean value that determines whether the toolbar items should be enabled or disabled.
    spreadsheet.enableToolbarItems('Home', [3, 4], false); // 3,4 - index
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">End Edit</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // If Spreadsheet is in editable state, you can save the cell by invoking endEdit.
    spreadsheet.endEdit();
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Find</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet, FindOptions } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // To find the specified cell value.
    let findOption: FindOptions = {
    value: "Jenna Schoolfield", sheetIndex: 0, findOpt: "next", mode: "Sheet", isCSen: false,
    isEMatch: false, searchBy: "By Row"
  };
    spreadsheet.find(findOption);
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">FindAll</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet, FindOptions } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // To Find All the Match values Address within Sheet or Workbook.
    spreadsheet.findAll('shoes', 'Sheet', false, false, spreadsheet.getActiveSheet().id); // Specifies the value to find, Specifies the value to be find within Sheet/Workbook, Specifies the find match with case sensitive or not, Specifies the find match with entire match or not,Specifies the sheetIndex
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Get Data</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // Gets the range of data as JSON from the specified address.
    spreadsheet.getData("Sheet1!A1:B2").then(data => console.log(data)); // Specifies the address with sheet name for range of cells, Gets the range of data as JSON from the specified address
    spreadsheet.getData("A1:B2").then(data => console.log(data)); // Specifies the address for range of cells, Gets the range of data as JSON from the specified address
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Get display text</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet, CellModel, getCell } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // To Gets the formatted text of the cell.
   let cell: CellModel = getCell(0,0, spreadsheet.getActiveSheet()); // rowIndex, colIndex, sheetIndex
   console.log(spreadsheet.getDisplayText(cell)); // to provide the cell model
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Goto</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // Used to navigate to cell address within workbook.
   spreadsheet.goTo("B1"); // pass the range
   spreadsheet.goTo("Sheet2!B1"); // You can specify the sheet name with cell address to navigate the specified cell address
};

    <div id="spreadsheet"></div>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
          fileMenuBeforeOpen: (): void => {
           //To show/hide the file menu items in Spreadsheet.
            spreadsheet.hideFileMenuItems(['PDF document'], true); // Specifies the file menu items text which is to be show/hide, Set `true` / `false` to hide / show the file menu items.
        },
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Hide Ribbon Tabs</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    //To show/hide the existing ribbon tabs.
  spreadsheet.hideRibbonTabs(['Formulas', 'Insert'], true); // specifies the ribbon tab header text which needs to be shown/hidden, Set `true` / `false` to hide / show the ribbon tabs.
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Hide Spinner</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    //To hide showed spinner manually.
  spreadsheet.hideSpinner(); 
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Hide Toolbar Items</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    //To show/hide the existing Spreadsheet ribbon toolbar items.
  spreadsheet.hideToolbarItems('Home', [0, 1, 2, 4, 14, 15, 22, 23, 24]); // tab name, index
  spreadsheet.hideToolbarItems('View', [1, 2]);
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Insert Chart</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // Used to set the chart in spreadsheet.
    spreadsheet.insertChart([{ type: "Line", theme: "Material", isSeriesInRows: false, range: "A1", id: "Chart1"}]); //Specifies the options to insert chart in spreadsheet.
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Insert Column</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    //To insert the column
 spreadsheet.insertColumn([{index: 1, width: 95}], 1); // startColumn (index, column width), endColumn
};

    <div id="spreadsheet"></div>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
        created: (): void => {
            // Used to set the image in spreadsheet.
            spreadsheet.insertImage([{ src: "https://www.w3schools.com/images/w3schools_green.jpg", height: 400,
            width: 400 }], "A1"); // images - Specifies the options to insert image in spreadsheet, Specifies the range in spreadsheet.
        }
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Insert Row</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    //To insert the row
 spreadsheet.insertRow(4, 4); // startRow, endRow
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Insert Sheet</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    //To insert sheets in to the spreadsheet.
   spreadsheet.insertSheet(0, 2); // startSheet, endSheet
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Lock Cells</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    //To Applies cell lock to the specified range of cells.
   let protectSetting:ProtectSettingsModel = {
    selectCells: true,
    formatCells: false,
    formatRows: false,
    formatColumns: false,
    insertLink: false
  }
  spreadsheet.protectSheet("Issues", protectSetting);
  spreadsheet.lockCells('A2:AZ100', false); // to unlock the A2:Az100 cells
  spreadsheet.lockCells('A1:Z1', true); // to lock the A1:Z1 cells
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Merge</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    //To merge the range of cells.
   spreadsheet.merge('B1:E2'); // to pass the range
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Move Sheet</button>

import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
        sheets: [{},{},{}]
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // Moves the active sheet to the position in the list of sheets.
    spreadsheet.moveSheet(1); // position to move
    // Moves the list of specified sheets to the position in the list of sheets.
    spreadsheet.moveSheet(0, [1,2]); // position to move, indexes of the sheets to be moved
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Number Format</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet, getFormatFromType } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    //To Applies the number format (number, currency, percentage, short date, etc…) to the specified range of cells.
    spreadsheet.numberFormat('$#,##0.00', 'E1:E3');
    // Applied Accounting format to the cells from C3 to E10 range.
    spreadsheet.numberFormat(getFormatFromType('Accounting'), 'C3:E10');
    // Applied Percentage format to the cells from F3 to F10 range in Sheet1.
    spreadsheet.numberFormat('0%', 'Sheet1!F3:F10');
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Open</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
        openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open',
        saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save'
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("btn").onclick = () => {
    // To opens the Excel file.
    fetch("https://js.syncfusion.com/demos/ejservices/data/Spreadsheet/LargeData.xlsx")
    .then((response) => {
      response.blob().then((fileBlob) => {
        var file = new File([fileBlob], "Sample.xlsx");
        spreadsheet.open({ file: file });
      })
    })
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="save">Save Json</button>
    <button class="e-btn" id="load">load Json</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';

    let response;
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
        openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open',
        saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save'
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');

document.getElementById("save").onclick = () => {
   spreadsheet.saveAsJson().then(Json => (response = Json)); 
};

document.getElementById("load").onclick = () => {
  spreadsheet.openFromJson({ file: response.jsonObject }); // To load JSON data in the Spreadsheet.
};