Workbook API in JavaScript Spreadsheet API control

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

Returns *void*

### addDefinedName

Adds the defined name to the Spreadsheet.

| Parameter | Type | Description |
|------|------|-------------|
| definedName |  [`DefineNameModel`](./defineNameModel) | Specifies the name. |

Returns *boolean*

### addEventListener

Adds the handler to the given event listener.

| Parameter | Type | Description |
|------|------|-------------|
| eventName |  `string` | A String that specifies the name of the event |
| handler |  `Function` | Specifies the call to run when the event occurs. |

Returns *void*

### attachUnloadEvent

Adding unload event to persist data when enable persistence true

Returns *void*

### autoFill

Used to perform autofill action based on the specified range in spreadsheet.

| Parameter | Type | Description |
|------|------|-------------|
| fillRange |  `string` | Specifies the fill range. |
| dataRange (*optional*) |  `string` | Specifies the data range. |
| direction (*optional*) |  [`AutoFillDirection`](./autoFillDirection) | Specifies the direction("Down","Right","Up","Left") to be filled. |
| fillType (*optional*) |  [`AutoFillType`](./autoFillType) | Specifies the fill type("FillSeries","CopyCells","FillFormattingOnly","FillWithoutFormatting") for autofill action. |

Returns *void*

### calculateNow

The `calculateNow` method is used to calculate any uncalculated formulas in a spreadsheet.
This method accepts an option to specify whether the calculation should be performed for the entire workbook or a specific sheet.

Returns *Promise*

### cellFormat

Applies the style (font family, font weight, background color, etc...) to the specified range of cells.

```html
    <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 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">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">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>
    <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">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>
    <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>
    <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="apply-button">To Save</button>

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

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // Save the spreadsheet data to an Excel file with the filename and extension you specify.
    spreadsheet.save({ url: 'https://services.syncfusion.com/js/production/api/spreadsheet/save', fileName: 'Worksheet', saveType: 'Xlsx' });
};

    <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: 'https://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="apply-button">Set Border</button>

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

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // Sets the border to the specified cell range.
    spreadsheet.setBorder({ border: '1px solid #000000' }, 'C6:G8', 'Outer');
    spreadsheet.setBorder({ border: '1px solid #000000' });
};

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

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

let spreadsheet: Spreadsheet = new Spreadsheet({
    created: (): void => {
        spreadsheet.merge('B1:E2');
    },
});
spreadsheet.appendTo('#spreadsheet');

document.getElementById('apply-button').onclick = () => {
    //To split the merged cell into multiple cells.
    spreadsheet.unMerge('B1:E2');
};

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

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

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("apply-button").onclick = () => {
    // Update the properties of a cell to the specified cell address.
    spreadsheet.updateCell({ value: 'Custom Value' }, "A3");
    spreadsheet.updateCell({ value: 'Custom Value' }, "Sheet1!A4");
};

    <div id="spreadsheet"></div>
    <button id="wrap">To Wrap</button>

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

let spreadsheet: Spreadsheet = new Spreadsheet();

spreadsheet.appendTo('#spreadsheet');

document.getElementById("wrap").onclick = () => {
    // To wrap/unwrap the cell's text content with the specified address.
    spreadsheet.wrap("B5", true);
};

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

new Spreadsheet({
      beforeCellFormat: (args: BeforeCellFormatArgs) => {
      }
     ...
 }, '#Spreadsheet');

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

 new Spreadsheet({
     beforeCellUpdate: (args: BeforeCellUpdateArgs) => {
     }
     ...
 }, '#Spreadsheet');

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

new Spreadsheet({
      beforeOpen: (args: BeforeOpenEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

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

new Spreadsheet({
      beforeSave: (args: BeforeSaveEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

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

new Spreadsheet({
      openFailure: (args: OpenFailureArgs) => {
      }
     ...
 }, '#Spreadsheet');

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

new Spreadsheet({
     queryCellInfo: (args: CellInfoEventArgs) => {
     }
     ...
 }, '#Spreadsheet');

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

new Spreadsheet({
      saveComplete: (args: SaveCompleteEventArgs) => {
      }
     ...
 }, '#Spreadsheet');