SpreadsheetComponent

<SpreadsheetComponent />

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

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    contextMenuBeforeOpen() {
        // To add context menu items in sheet content context menu.
        if(closest(args.event.target, '.e-sheet-content')){
            this.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, '.e-colhdr-table')){
            this.spreadsheet.addContextMenuItems([{ text: 'Custom Column' }], 'Insert Column', false);
        }
        // To add context menu items in row header context menu.
        else if(closest(args.event.target, '.e-rowhdr-table')){
            this.spreadsheet.addContextMenuItems([{ text: 'Custom Row' }], 'Insert Row', false);
        }
        // To add context menu items in sheet tab context menu.
        else if(closest(args.event.target, '.e-toolbar-item')){
            this.spreadsheet.addContextMenuItems([{ text: 'Custom tab' }], 'Insert', false);
        }
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }} contextMenuBeforeOpen={this.contextMenuBeforeOpen.bind(this)}>
                    </SpreadsheetComponent>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
          // To add custom library function.
        this.spreadsheet.addCustomFunction("CustomFuntion", "SQRT"); // Custom function handler name, Custom function name
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Add CustomFuntion
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

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

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
         // To add the data validation
        this.spreadsheet.addDataValidation({ type: 'TextLength', operator: 'LessThanOrEqualTo', value1: '4' }, 'A2:A5'); // specifies the validation rules, range that needs to be add validation.
        this.spreadsheet.addDataValidation({ type: 'WholeNumber', operator: 'NotEqualTo', value1: '1' }, 'B2:B5');
        this.spreadsheet.addDataValidation({ type: 'Date', operator: 'NotEqualTo', value1: '04/11/2019' }, 'F2:F5');
        this.spreadsheet.addDataValidation({ type: 'Time', operator: 'Between', value1: '10:00:00 AM', value2: '11:00:00 AM' }, 'G2:G5');
        this.spreadsheet.addDataValidation({ type: 'Decimal', operator: 'LessThan', value1: '100000.00' }, 'H2:H5');
        this.spreadsheet.addDataValidation({ type: 'List', inCellDropDown: true, value1: '10, 20, 30' }, 'I2:I5'); // Specifies InCellDropDown option in Data Validation.
        this.spreadsheet.addDataValidation({ type: 'List', inCellDropDown: true, value1: '=Sheet1!A2:A3'}, 'J2:J5'); // Specifies the cell range as data source to the list validation dropdown.
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Add Data Validation
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
        // To provide name and range arguments in this method 
        spreadsheet.addDefinedName({name: 'value', refersTo: '=Sheet1!B2' });
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Add DefinedName
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
        // To add custom file menu items
        this.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
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Add File Menu Items
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
          // To add the hyperlink in the cell
        this.spreadsheet.addHyperlink("https://www.google.com/", "A5"); // hyperlink, address
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Add Hyperlink
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
          //Highlight Invalid Data
        this.spreadsheet.addInvalidHighlight('A1:H5'); //range
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Higlight Invalid Data
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
           //To add custom ribbon tabs
        this.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.
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Add Ribbon Tabs
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
          //To add the custom items in Spreadsheet ribbon toolbar.
        this.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.
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Add Toolbar Items
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
        //Appends the control within the given HTML Div element.
        this.spreadsheet.appendTo('#spreadsheet'); // pass argument as selector of the element, here we passing selector(id) of the spreadsheet element
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  AppendTo
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent, getRangeIndexes, getCellIndexes, getColumnHeaderText } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
          //Applies the filter UI in the range of cells in the sheet.
        let sheet = this.spreadsheet.getActiveSheet();
        let cell = getCellIndexes(sheet.activeCell);
        let predicates = [{
            field: getColumnHeaderText(cell[1] + 1),
            operator: 'equal',
            value: getCell(cell[0], cell[1], sheet).value, matchCase: false,
        }];
        this.spreadsheet.applyFilter(predicates, 'A1:F1');// predicates, range
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Apply Filter
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
          //This method is used to autofit the range of rows or columns
        this.spreadsheet.autoFit("D:F") //To autofit the column
        this.spreadsheet.autoFit("5:10"); // To autofit to rows
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  AutoFit
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
          // Applies the style (font family, font weight, background color, etc…) to the specified range of cells.
        this.spreadsheet.cellFormat({ fontWeight: 'bold', fontSize: '12pt', backgroundColor: '#279377', color: '#ffffff' }, 'A2:E2');
        // Setting common styles to whole table cells
        this.spreadsheet.cellFormat({ verticalAlign: 'middle', fontFamily: 'Axettac Demo' }, 'A2:E12');
        // Column wise styles setting
        this.spreadsheet.cellFormat({ textAlign: 'center' }, 'A2:A12');
        // Setting text-indent to 2 and 4 column
        let style = { textAlign: 'left', textIndent: '8pt' };
        this.spreadsheet.cellFormat(style, 'B2:B12');
        this.spreadsheet.cellFormat(style, 'D2:D12');
        this.spreadsheet.cellFormat({ fontStyle: 'italic', textAlign: 'right' }, 'C3:C12');
        this.spreadsheet.cellFormat({ textAlign: 'center' }, 'E2:E12');
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Cell Format
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
        this.spreadsheet.clear({type: 'Clear Contents', range: 'A1:A10'}); // Clear the content in the provided range
        this.spreadsheet.clear({type: 'Clear Formats', range: 'A1:A10'}); // Clear the formats applied in the provided range
        this.spreadsheet.clear({type: 'Clear Hyperlinks', range: 'A1:A10'}); // Clear the hyperlinks applied in the provided range
        this.spreadsheet.clear({type: 'Clear All', range: 'B1:B10'}); // Clear the content, formats and hyperlinks applied in the provided range. 
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                    Clear
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
          // This method is used to remove conditional formatting.
        this.spreadsheet.clearConditionalFormat("A1:B5"); // range that needs to be remove conditional formatting.
        this.spreadsheet.clearConditionalFormat("Sheet1!A1:B5"); // you can also specify the range with sheetname.
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Clear Conditional Format
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
         // Clears the filter changes of the sheet.
        this.spreadsheet.clearFilter();
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Clear Filter
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
          // Cancels the edited state, this will not update any value in the cell.
        this.spreadsheet.closeEdit();
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Close Edit
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
        // Used to compute the specified expression/formula.
        this.spreadsheet.computeExpression('522+1'); // pass the expression 
        this.spreadsheet.computeExpression('=SUM(F2:F3)'); //pass the formula as string.
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Compute Expression
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
        // This method is used to add conditional formatting.

        // Apply blue data bar to the specified range.
        this.spreadsheet.conditionalFormat({ type: 'BlueDataBar', range: 'D3:D18' });
        // Apply three stars to the specified range.
        this.spreadsheet.conditionalFormat({ type: 'ThreeStars', range: 'F3:F18' });
        // Highlight the cells that contain a value greater than specified value.
        this.spreadsheet.conditionalFormat({ type: 'GreaterThan', cFColor: 'RedFT', value: '10/15/2023', range: 'E2:E30' });
        // Highlight the cells that contain a value between specified range.
        this.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.
        this.spreadsheet.conditionalFormat({ type: 'AboveAverage', cFColor: 'RedFT', range: 'F2:F30' });
        // Apply the RGY(Red-Green-Yellow) color scale to the specified range.
        this.spreadsheet.conditionalFormat({ type: 'RYGColorScale', range: 'F2:F30' });
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Conditional Format
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
        this.spreadsheet.copy(); //Copy the selected cell
        this.spreadsheet.copy('A2'); // specify the address
        this.spreadsheet.copy('Car Sales Report!B2')  // address with sheet name. 
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    <SheetsDirective>
                            <SheetDirective name="Car Sales Report">
                            </SheetDirective>
                        </SheetsDirective>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Copy
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
        this.spreadsheet.cut(); //cut the selected cell
        this.spreadsheet.cut('A2'); // specify the address
        this.spreadsheet.cut('Car Sales Report!B2')  // address with sheet name. 
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    <SheetsDirective>
                            <SheetDirective name="Car Sales Report">
                            </SheetDirective>
                        </SheetsDirective>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Cut
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
          // Used to delete rows, columns and sheets from the spreadsheet.
        this.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)
        this.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)
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Delete
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
        //  Used to delete the image in spreadsheet.
        this.spreadsheet.deleteImage("spreadsheet_overlay_picture_1", "A3"); //id - Specifies the id of the image element to be deleted, range - Specifies the range in spreadsheet.
    };
    created() {
          // Used to set the image in spreadsheet.
          this.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() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }} created={this.created.bind(this)}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Delete Chart
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
        //Used to delete the chart from spreadsheet.
        this.spreadsheet.deleteChart("Chart1"); // id - Specifies the chart element id.
    };
    created() {
          // Used to set the chart in spreadsheet.
        this.spreadsheet.insertChart([{ type: "Line", theme: "Material", isSeriesInRows: false, range: "A1", id: "Chart1"}]); // Specifies the options to insert chart in spreadsheet.
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }} created={this.created.bind(this)}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Delete Image
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
        // Make a duplicate/copy of the active sheet in the spreadsheet.
        this.spreadsheet.duplicateSheet();
        // Make a duplicate/copy of the specified sheet in the spreadsheet.
        this.spreadsheet.duplicateSheet(1); // index of the sheet to be duplicated
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>Duplicate Sheet</button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    contextMenuBeforeOpen() {
          //To enable / disable context menu items.
           this.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.
           this.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() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }} contextMenuBeforeOpen={this.contextMenuBeforeOpen.bind(this)}>
                    </SpreadsheetComponent>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    fileMenuBeforeOpen() {
          // To enable / disable file menu items.
          this.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() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }} fileMenuBeforeOpen={this.fileMenuBeforeOpen.bind(this)}>
                    </SpreadsheetComponent>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
          // To enable / disable the existing ribbon tabs.
        this.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.
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Enable Ribbon Tabs
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
          // To Enables or disables the specified ribbon toolbar items or all ribbon items
        this.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.
        this.spreadsheet.enableToolbarItems('Home', [3, 4], false); // 3,4 - index
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Enable Toolbar Items
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
          // If Spreadsheet is in editable state, you can save the cell by invoking endEdit.
        this.spreadsheet.endEdit();
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Set Column Width
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
          // To find the specified cell value.
        let findOption = {
        value: "Jenna Schoolfield", sheetIndex: 0, findOpt: "next", mode: "Sheet", isCSen: false,
        isEMatch: false, searchBy: "By Row"
        };
        this.spreadsheet.find(findOption);
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Find
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
        // To Find All the Match values Address within Sheet or Workbook.
        this.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
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  FindAll
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
          // Gets the range of data as JSON from the specified address.
        this.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
        this.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
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                Get Data
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent, getCell } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
          // To Gets the formatted text of the cell.
        let cell = getCell(0,0, this.spreadsheet.getActiveSheet()); // rowIndex, colIndex, sheetIndex
        console.log(this.spreadsheet.getDisplayText(cell)); // to provide the cell model
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                    Get Display Text
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
          // Used to navigate to cell address within workbook.
        this.spreadsheet.goTo("B1"); // pass the range
        this.spreadsheet.goTo("Sheet2!B1"); // You can specify the sheet name with cell address to navigate the specified cell address
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                GoTo
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
  fileMenuBeforeOpen() {
    //To show/hide the file menu items in Spreadsheet.
    this.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() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }} fileMenuBeforeOpen={this.fileMenuBeforeOpen.bind(this)}>
                    </SpreadsheetComponent>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
          //To show/hide the existing ribbon tabs.
        this.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.
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Hide Ribbon Tabs
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));

import { render } from 'react-dom';
import './index.css';
import * as React from 'react';
import { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';

/**
 * Default Spreadsheet sample
 */
export class Default extends React.Component {
    onClick() {
           //To hide showed spinner manually.
        this.spreadsheet.hideSpinner(); 
    };
    render() {
        return (<div>
                    <SpreadsheetComponent ref={(ssObj) => { this.spreadsheet = ssObj }}>
                    </SpreadsheetComponent>
                    <button onClick={this.onClick.bind(this)}>
                  Hide Spinner
               </button>
            </div>);
    }
}

render(<Default />, document.getElementById('sample'));