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({
     ...
         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';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
        contextMenuBeforeOpen: (args): void => {
           // To add context menu items.
           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.
        }
    });

    //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');
};

    <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.
};

    <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'); // passthe  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.
  spreadsheet.conditionalFormat({ type: 'BlueDataBar', range: 'D3:D18' });
  spreadsheet.conditionalFormat({ type: 'OrangeDataBar', range: 'E3:E18' });
  spreadsheet.conditionalFormat({ type: 'ThreeStars', range: 'F3:F18' });
};

    <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();
};

    <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>

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); // 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.
        }
    });

    //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: 1, 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('A1:B2'); // Specifies the address for range of cells.
};

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

```ts
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
};
``` |

Returns *string*

### getLocalData

Returns the persistence data for component

Returns *any*

### getRootElement

Returns the route element of the component

Returns *HTMLElement*

### getSelectAllContent

Get the select all div of spreadsheet

Returns *HTMLElement*

### goTo

Used to navigate to cell address within workbook.
```html
    <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
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Hide File MenuItems</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 file menu items in Spreadsheet ribbon.
   spreadsheet.hideFileMenuItems(['File'], true, true); // Specifies the file menu items text which is to be show/hide, Set `true` / `false` to hide / show the file menu items, set `true` if the given file menu items `text` is a unique id.
};

    <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(1, 1); // startColumn, 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">Number 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 = () => {
    //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('_($* #,##0.00_);_($* (#,##0.00);_($* "-"??_);_(@_)', '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({
    });

    //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({
    });

    //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.
};

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

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

    let response;
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
    });

    //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.
};
``` |

Returns *void*

### paste

This method is used to paste the cut or copied cells in to specified address.
```html
    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Paste</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 paste the cut or copied cells in to specified address.
    spreadsheet.paste(); //paste the selected cell
    spreadsheet.paste("B2", "All"); // to pass the range, Specifies the type of paste.
    spreadsheet.paste("B3", "Values"); // to pass the range, Specifies the type of paste.
    spreadsheet.paste("B4", "Formats"); // to pass the range, Specifies the type of paste.
    spreadsheet.paste("B5", "Formulas");// to pass the range, Specifies the type of paste.
};

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

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet, ProtectSettingsModel } 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 = () => {
    // To protect the particular sheet.
    let protectSetting:ProtectSettingsModel = {
    selectCells: true,
    formatCells: false,
    formatRows: false,
    formatColumns: false,
    insertLink: false
  }
    spreadsheet.protectSheet('Car Sales Report',protectSetting); // To provide sheet name, protectSetting
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Redo</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 perform the redo operation in spreadsheet.
    spreadsheet.redo();
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Refresh</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 refresh the spreadsheet
    spreadsheet.refresh(false); // specifies `true` / `false` to create new workbook in spreadsheet.
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Remove ContextMenu Items</button>

import { enableRipple } from '@syncfusion/ej2-base';
import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
 
    //Initialize Spreadsheet component
    let spreadsheet: Spreadsheet = new Spreadsheet({
        // To remove existing context menu items.
        contextMenuBeforeOpen: (): void => {
          spreadsheet.removeContextMenuItems(["Cut"]); //Items that needs to be removed, Set `true` if the given `text` is a unique id.
        }
    });

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

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Remove DataValidation</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 for remove validation.
   spreadsheet.removeDataValidation("A2:A5"); // to pass the range
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Remove 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 Removes the defined name from the Spreadsheet.
    spreadsheet.removeDefinedName({ name: 'value' , scope: 'Workbook'}); //Specifies the name, Specifies the scope of the defined name.
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Remove 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 remove the hyperlink in the cell
   spreadsheet.removeHyperlink("A10"); // to pass the range
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Remove InvalidHighlight</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 remove highlight from invalid data.
   spreadsheet.removeInvalidHighlight("A1:H5"); // to pass the range
};

    <div id="spreadsheet"></div>
    <button class="e-btn" id="btn">Replace</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 replace the specified cell value.
    spreadsheet.replace({replaceValue: '20', replaceBy: 'replace', value: '10'}); // Specifies the replace value with find args to replace specified cell value.
};