Spreadsheet

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

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

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

let spreadsheet: Spreadsheet = new Spreadsheet({
    // Set 'Car Stock Report' sheet as active sheet.
    activeSheetIndex: 1,
    sheets: [
        {
            name: 'Car Sales Report'
        },
        {
            name: 'Car Stock Report'
        }
    ]
});

spreadsheet.appendTo('#spreadsheet');

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

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

let spreadsheet: Spreadsheet = new Spreadsheet({
    // Enable the autofill option.
    allowAutoFill: true,
    // Configure the autofill settings.
    autoFillSettings: {
        fillType: 'CopyCells',
        showFillOptions: true
    }
});

spreadsheet.appendTo('#spreadsheet');

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

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

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

spreadsheet.appendTo('#spreadsheet');

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

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

let spreadsheet: Spreadsheet = new Spreadsheet({
  // Specifies the custom CSS class.
  cssClass: 'e-custom1 e-custom2'
});

spreadsheet.appendTo('#spreadsheet');

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

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

let spreadsheet: Spreadsheet = new Spreadsheet({
  // Set the specified cell range's name to 'Group1'.
  definedNames: [{ name: 'Group1', refersTo: 'Sheet1!A1:B5' }]
});

spreadsheet.appendTo('#spreadsheet');

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

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

let spreadsheet: Spreadsheet = new Spreadsheet({
  height: '550px'
});

spreadsheet.appendTo('#spreadsheet');

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

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

let spreadsheet: Spreadsheet = new Spreadsheet({
    openUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/open',
    saveUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/save',
    openSettings: {
        chunkSize: 100000,
        retryCount: 3
    }
});

spreadsheet.appendTo('#spreadsheet');

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

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

let spreadsheet: Spreadsheet = new Spreadsheet({
  // Enable the scrolling option.
  allowScrolling: true,
  // Configure the scroll settings.
  scrollSettings: {
    isFinite: true,
    enableVirtualization: false
  }
});

spreadsheet.appendTo('#spreadsheet');

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

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

let spreadsheet: Spreadsheet = new Spreadsheet({
  // Configure the selection settings.
  selectionSettings: {
    mode: 'None'
  }
});

spreadsheet.appendTo('#spreadsheet');

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

import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
import * as dataSource from './data.json';

let spreadsheet: Spreadsheet = new Spreadsheet({
    // Specifies the sheets and its options.
    sheets: [
        {
            name: 'First Sheet',
            range: [{ dataSource: dataSource }],
            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.appendTo('#spreadsheet');

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

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

let spreadsheet: Spreadsheet = new Spreadsheet({
  // Specifies the width.
  width: '550px'
});

spreadsheet.appendTo('#spreadsheet');

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

import { Spreadsheet, BeforeOpenCloseMenuEventArgs } from '@syncfusion/ej2-spreadsheet';
import { closest } from '@syncfusion/ej2-base';

let spreadsheet: Spreadsheet = new Spreadsheet({
    contextMenuBeforeOpen: (args: BeforeOpenCloseMenuEventArgs): void => {
        // Add context menu items to the sheet content context menu.
        if (closest(args.event.target, '.e-sheet-content')) {
            spreadsheet.addContextMenuItems([{ text: 'Custom Item' }], 'Paste Special', false);
        }
        // Add context menu items to the column header context menu.
        else if (closest(args.event.target, '.e-colhdr-table')) {
            spreadsheet.addContextMenuItems([{ text: 'Custom Column' }], 'Insert Column', false);
        }
        // Add context menu items to the row header context menu.
        else if (closest(args.event.target, '.e-rowhdr-table')) {
            spreadsheet.addContextMenuItems([{ text: 'Custom Row' }], 'Insert Row', false);
        }
        // Add context menu items to the sheet tab context menu.
        else if (closest(args.event.target, '.e-toolbar-item')) {
            spreadsheet.addContextMenuItems([{ text: 'Custom Tab' }], 'Insert', false);
        }
    }
});

spreadsheet.appendTo('#spreadsheet');

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

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

let spreadsheet: Spreadsheet = new Spreadsheet({
    created: (): void => {
        // Add custom library function to compute the square root of a number.
        spreadsheet.addCustomFunction('SQRTHandler', 'SQRT');
    },
});

spreadsheet.appendTo('#spreadsheet');

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

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

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

let spreadsheet: Spreadsheet = new Spreadsheet({
    created: (): void => {
        // Add data validation with the specified validation rules to the range.
        spreadsheet.addDataValidation({ type: 'TextLength', operator: 'LessThanOrEqualTo', value1: '4' }, 'A2:A5');
        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');
        // Add a cell range as a data source to the list validation dropdown.
        spreadsheet.addDataValidation({ type: 'List', inCellDropDown: true, value1: '=Sheet1!A2:A3' }, 'J2:J5');
        spreadsheet.addDataValidation({ type: 'List', inCellDropDown: true, value1: '10, 20, 30' }, 'I2:I5');
    },
});

spreadsheet.appendTo('#spreadsheet');

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

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

let spreadsheet: Spreadsheet = new Spreadsheet({
    created: (): void => {
        // Set the specified cell range's name to 'Group1'.
        spreadsheet.addDefinedName({ name: 'Group1', refersTo: '=Sheet1!B2' });
    },
});

spreadsheet.appendTo('#spreadsheet');

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

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

let spreadsheet: Spreadsheet = new Spreadsheet({
    created: (): void => {
        // Place the 'Print' option before the 'Save As' option in the File menu.
        spreadsheet.addFileMenuItems([{ text: 'Print' }], 'Save As', false);
    }
});

spreadsheet.appendTo('#spreadsheet');

    <div id="spreadsheet"></div>
    <button id="apply-button">Add hyperlink</button>

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

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // Insert a hyperlink into the 'A5' cell.
    spreadsheet.addHyperlink("https://www.google.com/", "A5");
};

    <div id="spreadsheet"></div>
    <button id="apply-button">Higlight Invalid Data</button>

import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
import * as dataSource from './data.json';

let spreadsheet: Spreadsheet = new Spreadsheet({
    sheets: [
        {
            name: 'Car Sales Report',
            ranges: [{ dataSource: dataSource.salesData }],
        },
    ],
    created: (): void => {
        // Add data validation to the specified range.
        spreadsheet.addDataValidation(
            { type: 'Decimal', operator: 'LessThan', value1: '1000' },
            'F2:F5'
        );
    },
});
spreadsheet.appendTo('#spreadsheet');

document.getElementById('apply-button').onclick = () => {
    // Highlight the invalid data on the specified range.
    spreadsheet.addInvalidHighlight('F2:F5');
};

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

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

let spreadsheet: Spreadsheet = new Spreadsheet({
    created: (): void => {
        // Place the 'Custom' ribbon tab before the existing 'Data' tab.
        spreadsheet.addRibbonTabs([{ header: { text: 'Custom' }, content: [{ text: 'Custom', tooltipText: 'Custom Button' }] }], 'Data');
    },
});

spreadsheet.appendTo('#spreadsheet');

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

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

let spreadsheet: Spreadsheet = new Spreadsheet({
  created: (): void => {
    // Place the custom toolbar items to the 'Home' tab ribbon toolbar.
    spreadsheet.addToolbarItems('Home', [{ type: 'Separator' }, { text: 'Custom', tooltipText: 'Custom Btn' }], 15); 
  },
});

spreadsheet.appendTo('#spreadsheet');

    <div id="spreadsheet"></div>
    <button id="apply-button">Apply Filter</button>

import {
    Spreadsheet,
    getCellIndexes,
    getColumnHeaderText,
    getCell,
    SheetModel
} from '@syncfusion/ej2-spreadsheet';
import { PredicateModel } from '@syncfusion/ej2-grids';
import * as dataSource from './data.json';

let spreadsheet: Spreadsheet = new Spreadsheet({
    sheets: [
        {
            name: 'Car Sales Report',
            ranges: [{ dataSource: dataSource.salesData }]
        }
    ]
});

spreadsheet.appendTo('#spreadsheet');

document.getElementById('apply-button').onclick = () => {
    // The filter UI is applied to the range of cells in the sheet.
    let sheet: SheetModel = spreadsheet.getActiveSheet();
    let cell: number[] = getCellIndexes(sheet.activeCell);
    let predicates: PredicateModel[] = [
        {
            field: getColumnHeaderText(cell[1] + 1),
            operator: 'equal',
            value: getCell(cell[0], cell[1], sheet).value,
            matchCase: false
        }
    ];
    // Specifies the predicates and cell range.
    spreadsheet.applyFilter(predicates, 'A1:F1');
};

    <div id="spreadsheet"></div>
    <button id="apply-button">AutoFit Content</button>

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

    let spreadsheet: Spreadsheet = new Spreadsheet();

    spreadsheet.appendTo('#spreadsheet');

document.getElementById("applybutton").onclick = () => {
        // To auto fit the columns content.
        spreadsheet.autoFit("D:F");
        // To auto fit the rows content.
        spreadsheet.autoFit("5:10"); 
};

    <div id="spreadsheet"></div>
    <button id="apply-button">Apply Cell Format</button>

import { Spreadsheet, CellStyleModel } from '@syncfusion/ej2-spreadsheet';

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // Apply the styles to the cells in the specified range.
    spreadsheet.cellFormat({ fontWeight: 'bold', fontSize: '12pt', backgroundColor: '#279377', color: '#ffffff' }, 'A2:E2');
    spreadsheet.cellFormat({ verticalAlign: 'middle', fontFamily: 'Axettac Demo' }, 'A2:E12');
    spreadsheet.cellFormat({ textAlign: 'center' }, 'A2:A12');
    // Apply text-indent to 2nd & 4th columns.
    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 id="apply-button">Clear</button>

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

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // Clear the content within the specified range.
    spreadsheet.clear({ type: 'Clear Contents', range: 'A1:A10' });
    // Clear the formats used in the given range.
    spreadsheet.clear({ type: 'Clear Formats', range: 'A1:A10' });
    // Remove all hyperlinks from the provided range.
    spreadsheet.clear({ type: 'Clear Hyperlinks', range: 'A1:A10' });
    // Clear the content, formats and hyperlinks applied in the given range.
    spreadsheet.clear({ type: 'Clear All', range: 'B1:B10' });
};

    <div id="spreadsheet"></div>
    <button id="apply-button">Clear Conditional Format</button>

import { Spreadsheet } from '@syncfusion/ej2-spreadsheet';
import * as dataSource from './data.json';

let spreadsheet: Spreadsheet = new Spreadsheet({
    sheets: [
        {
            name: 'Car Sales Report',
            ranges: [{ dataSource: dataSource.salesData }],
        }
    ],
    created: (): void => {
        // Highlight the cells with a value greater than the specified value.
        spreadsheet.conditionalFormat({
            type: 'GreaterThan',
            cFColor: 'RedFT',
            value: '10/8/2014',
            range: 'E2:E30',
        });
        // Highlight the cells that have a value within the specified range.
        spreadsheet.conditionalFormat({
            type: 'Between',
            cFColor: 'GreenFT',
            value: '11/24/2014,06/26/2023',
            range: 'F2:F30',
        });
    }
});

spreadsheet.appendTo('#spreadsheet');

document.getElementById('apply-button').onclick = () => {
    // Clear the conditional format within the range specified.
    spreadsheet.clearConditionalFormat('E2:E30');
    // The range can also be specified using the sheet name.
    spreadsheet.clearConditionalFormat('Sheet1!F2:F30');
};

    <div id="spreadsheet"></div>
    <button id="apply-button">Clear Filter</button>

import {
    Spreadsheet,
    PredicateModel,
    getCellIndexes,
    getColumnHeaderText,
    getCell,
    SheetModel,
    CellModel,
} from '@syncfusion/ej2-spreadsheet';
import * as dataSource from './data.json';

let spreadsheet: Spreadsheet = new Spreadsheet({
    sheets: [
        {
            name: 'Car Sales Report',
            ranges: [{ dataSource: dataSource.salesData }]
        }
    ],
    created: (): void => {
        // The filter UI is applied to the range of cells in the sheet.
        let sheet: SheetModel = spreadsheet.getActiveSheet();
        let cell: number[] = getCellIndexes(sheet.activeCell);
        let predicates: PredicateModel[] = [
            {
                field: getColumnHeaderText(cell[1] + 1),
                operator: 'equal',
                value: getCell(cell[0], cell[1], sheet).value,
                matchCase: false
            }
        ];
        // Specifies the predicates and cell range.
        spreadsheet.applyFilter(predicates, 'A1:F1');
    }
});

spreadsheet.appendTo('#spreadsheet');

document.getElementById('apply-button').onclick = () => {
    spreadsheet.clearFilter();
};

    <div id="spreadsheet"></div>
    <button id="apply-button">Cancel Edit</button>

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

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    spreadsheet.closeEdit();
};

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

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

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // Calculate the result of an arithmetic expression or formula.
    spreadsheet.computeExpression('522+1');
    spreadsheet.computeExpression('=SUM(F2:F3)');
};

    <div id="spreadsheet"></div>
    <button id="apply-button">Add Conditional Format</button>

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

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // 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 id="apply-button">Copy Cell</button>

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

let spreadsheet: Spreadsheet = new Spreadsheet({
    sheets: [
        {
            name: 'Car Sales Report'
        }]
});

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // To copy the selected cell.
    spreadsheet.copy();
    // To copy the specified cell.
    spreadsheet.copy('A2');
    // You can specify the address with sheet name.
    spreadsheet.copy('Car Sales Report!B2')
};

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

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

let spreadsheet: Spreadsheet = new Spreadsheet({
    sheets: [
        {
            name: 'Car Sales Report'
        }]
});

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // To cut the selected cell.
    spreadsheet.cut();
    // To cut the specified cell.
    spreadsheet.cut('A2');
    // You can specify the address with sheet name.
    spreadsheet.cut('Car Sales Report!B2');
};

    <div id="spreadsheet"></div>
    <button id="apply-button">Delete Row & Column</button>

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

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // To delete rows, columns, and sheets with the specified index.
    spreadsheet.delete(1, 1, "Row", "Sheet1");
    spreadsheet.delete(2, 2, "Column", "Sheet1");
};

    <div id="spreadsheet"></div>
    <button id="apply-button">Delete Chart</button>

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

let spreadsheet: Spreadsheet = new Spreadsheet({
    created: (): void => {
        // Insert a chart into a spreadsheet using the chart options specified.
        spreadsheet.insertChart([{ type: "Line", theme: "Material", isSeriesInRows: false, range: "A1:B5", id: "Chart" }]);
    }
});

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // Delete the chart with the specified chart element ID from the spreadsheet.
    spreadsheet.deleteChart("Chart");
};

    <div id="spreadsheet"></div>
    <button id="apply-button">Delete Image</button>

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

let spreadsheet: Spreadsheet = new Spreadsheet({
    created: (): void => {
        // Insert a image into a spreadsheet using the image options specified.
        spreadsheet.insertImage([{ src: "https://www.w3schools.com/images/w3schools_green.jpg", height: 400, width: 400 }], "A3");
    }
});

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // Delete the image with the specified image element ID from the spreadsheet.
    spreadsheet.deleteImage("spreadsheet_overlay_picture_1", "A3");
};

    <div id="spreadsheet"></div>
    <button id="apply-button">Destroy Spreadsheet</button>

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

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    spreadsheet.destroy();
};

    <div id="spreadsheet"></div>
    <button id="apply-button">Make Duplicate Sheet</button>

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

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // Make a duplicate/copy of the active sheet in the spreadsheet.
    spreadsheet.duplicateSheet();
    // Make a duplicate/copy of the specified sheet index in the spreadsheet.
    spreadsheet.duplicateSheet(0);
};

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

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

let spreadsheet: Spreadsheet = new Spreadsheet({
    contextMenuBeforeOpen: (): void => {
        // Disable the 'Hyperlink' context menu option.
        spreadsheet.enableContextMenuItems(['Hyperlink'], false, false);
        // You can disable the option by specifying the context menu option id.
        spreadsheet.enableContextMenuItems(
            ['spreadsheet_cmenu_copy'],
            false,
            true
        );
    }
});

spreadsheet.appendTo('#spreadsheet');

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

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

let spreadsheet: Spreadsheet = new Spreadsheet({
    fileMenuBeforeOpen: (): void => {
        // Disable the 'New' option in the File menu.
        spreadsheet.enableFileMenuItems(['New'], false, false);
    }
});

spreadsheet.appendTo('#spreadsheet');

    <div id="spreadsheet"></div>
    <button id="apply-button">Disable Home Ribbon Tab</button>

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

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // Disable the 'Home' option in the Ribbon.
    spreadsheet.enableRibbonTabs(['Home'], false);
};

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

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

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // Disable the list of toolbar items in the 'Home' ribbon tab.
    spreadsheet.enableToolbarItems(
        'Home',
        ['spreadsheet_line-through'],
        false
    );
    spreadsheet.enableToolbarItems('Home', [3, 4], false);
};

    <div id="spreadsheet"></div>
    <button id="apply-button">End Edit</button>

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

    let spreadsheet: Spreadsheet = new Spreadsheet();

    spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // If the spreadsheet is editable, you can use this method to save the cell.
    spreadsheet.endEdit();
};

    <div id="spreadsheet"></div>
    <button id="apply-button">To Find</button>

import { Spreadsheet, FindOptions } from '@syncfusion/ej2-spreadsheet';

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // To find the cell value specified.
    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 id="apply-button">To Find All</button>

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

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // To find all values that match within a sheet or workbook.
    spreadsheet.findAll('shoes', 'Sheet', false, false, spreadsheet.getActiveSheet().id - 1);
};

    <div id="spreadsheet"></div>
    <button id="apply-button">Get Data</button>

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

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // Return the specified cell address data as JSON.
    spreadsheet.getData("Sheet1!A1:B2").then(data => console.log(data));
    spreadsheet.getData("A1:B2").then(data => console.log(data));
};

    <div id="spreadsheet"></div>
    <button id="apply-button">Get Display text</button>

import { Spreadsheet, CellModel, getCell } from '@syncfusion/ej2-spreadsheet';

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // Get the cell model for the given row, column, and sheet indexes.
    let cell: CellModel = getCell(0, 0, spreadsheet.getActiveSheet());
    // To get the formatted cell value, specify the cell model.
    spreadsheet.getDisplayText(cell);
};

    <div id="spreadsheet"></div>
    <button id="apply-button">Goto</button>

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

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // To navigate to a cell address within a workbook.
    spreadsheet.goTo('B1');
    // You can navigate to a specific cell address by specifying the sheet name as well as the cell address.
    spreadsheet.goTo('Sheet2!B1');
};

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

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

let spreadsheet: Spreadsheet = new Spreadsheet({
    fileMenuBeforeOpen: (): void => {
        //To show/hide the file menu item.
        spreadsheet.hideFileMenuItems(['PDF Document'], true);
    }
});

spreadsheet.appendTo('#spreadsheet');

    <div id="spreadsheet"></div>
    <button id="apply-button">Hide Ribbon Tabs</button>

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

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // Hide the existing 'Formulas' and 'Insert' ribbon tabs.
    spreadsheet.hideRibbonTabs(['Formulas', 'Insert'], true);
};

    <div id="spreadsheet"></div>
    <button id="apply-button">Hide Spinner</button>

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

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    //To manually hide the displayed spinner.
    spreadsheet.hideSpinner();
};

    <div id="spreadsheet"></div>
    <button id="apply-button">Hide Toolbar Items</button>

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

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

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

    <div id="spreadsheet"></div>
    <button id="apply-button">Insert Chart</button>

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

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // Insert a chart into a spreadsheet using the chart options specified.
    spreadsheet.insertChart([{ type: "Line", theme: "Material", isSeriesInRows: false, range: "A1", id: "Chart" }]);
};

    <div id="spreadsheet"></div>
    <button id="apply-button">Insert Column</button>

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

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // Insert the column at the starting column index specified.
    spreadsheet.insertColumn([{ index: 1, width: 95 }], 1);
};

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

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

let spreadsheet: Spreadsheet = new Spreadsheet({
    created: (): void => {
        // Insert a image into a spreadsheet using the image options specified.
        spreadsheet.insertImage([{ src: "https://www.w3schools.com/images/w3schools_green.jpg", height: 400, width: 400 }], "A1");
    }
});

spreadsheet.appendTo('#spreadsheet');

    <div id="spreadsheet"></div>
    <button id="apply-button">Insert Row</button>

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

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // Insert the row at the starting row index specified.
    spreadsheet.insertRow(4, 4);
};

    <div id="spreadsheet"></div>
    <button id="apply-button">Insert Sheet</button>

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

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // Insert the sheet at the starting sheet index specified.
    spreadsheet.insertSheet(0, 2);
};

    <div id="spreadsheet"></div>
    <button id="apply-button">Lock Cells</button>

import { Spreadsheet, ProtectSettingsModel } from '@syncfusion/ej2-spreadsheet';

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    //To protect the worksheet.
    let protectSetting: ProtectSettingsModel = {
        selectCells: true,
        formatCells: false,
        formatRows: false,
        formatColumns: false,
        insertLink: false
    };
    spreadsheet.protectSheet('Sheet1', protectSetting);
    // To unlock the A2:AZ100 cell range.
    spreadsheet.lockCells('A2:AZ100', false);
    // To lock the A1:Z1 cell range.
    spreadsheet.lockCells('A1:Z1', true);
};

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

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

let spreadsheet: Spreadsheet = new Spreadsheet({
    created: (): void => {
        // To merge the cells in the specified range.
        spreadsheet.merge('B1:E2');
    }
});

spreadsheet.appendTo('#spreadsheet');

    <div id="spreadsheet"></div>
    <button id="apply-button">Move Sheets</button>

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

let spreadsheet: Spreadsheet = new Spreadsheet({
    sheets: [{}, {}, {}]
});

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // Moves the active sheet to the specified position.
    spreadsheet.moveSheet(1);
    // Moves the list of specified sheets to the specified position.
    spreadsheet.moveSheet(0, [1, 2]);
};

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

import { Spreadsheet, getFormatFromType } from '@syncfusion/ej2-spreadsheet';
import * as dataSource from './data.json';

let spreadsheet: Spreadsheet = new Spreadsheet({
    sheets: [
        {
            name: 'Car Sales Report',
            ranges: [{ dataSource: dataSource.salesData }]
        },
    ],
    created: (): void => {
        // Apply the number format to the specified range of cells.
        spreadsheet.numberFormat('$#,##0.00', 'E1:E3');
        // Apply the accounting format to the specified range of cells.
        spreadsheet.numberFormat(getFormatFromType('Accounting'), 'C3:E10');
        // Apply the percentage format to the specified range of cells.
        spreadsheet.numberFormat('0%', 'F3:F10');
    }
});

spreadsheet.appendTo('#spreadsheet');

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

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

let spreadsheet: Spreadsheet = new Spreadsheet({
    openUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/open',
    saveUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/save',
    created: (): void => {
        fetch("https://js.syncfusion.com/demos/ejservices/data/Spreadsheet/LargeData.xlsx")
            .then((response) => {
                response.blob().then((fileBlob) => {
                    let file: File = new File([fileBlob], "Sample.xlsx");
                    spreadsheet.open({ file: file });
                })
            });
    }
});

spreadsheet.appendTo('#spreadsheet');

    <div id="spreadsheet"></div>
    <button id="save">Save JSON</button>
    <button id="load">Load JSON</button>

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

let response: string;
let spreadsheet: Spreadsheet = new Spreadsheet({
    openUrl: 'hhttps://services.syncfusion.com/js/production/api/spreadsheet/open',
    saveUrl: 'https://services.syncfusion.com/js/production/api/spreadsheet/save'
});

spreadsheet.appendTo('#spreadsheet');

document.getElementById("save").onclick = () => {
    // Save the spreadsheet data as JSON.
    spreadsheet.saveAsJson().then(Json => (response = Json));
};

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

    <div id="spreadsheet"></div>
    <button id="paste">Paste Values</button>

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

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("paste").onclick = () => {
    // Paste the selected cell.
    spreadsheet.paste();
    // Paste all the content to the specified range.
    spreadsheet.paste("B2", "All");
    // Paste only the values to the specified range.
    spreadsheet.paste("B3", "Values");
    // Paste only the formats to the specified range.
    spreadsheet.paste("B4", "Formats");
    // Paste only the formulas to the specified range.
    spreadsheet.paste("B5", "Formulas");
};

    <div id="spreadsheet"></div>
    <button id="apply-button">Protect Sheet</button>