Vue

Search results

SpreadsheetComponent

ejs-spreadsheet represents the VueJS Spreadsheet Component.

<ejs-spreadsheet></ejs-spreadsheet>

Properties

activeSheetIndex
`number`

Specifies active sheet index in workbook.

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

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

Defaults to 0

allowAutoFill
`boolean`

It allows to enable/disable AutoFill functionalities.

Defaults to true

allowCellFormatting
`boolean`

It allows you to apply styles (font size, font weight, font family, fill color, and more) to the spreadsheet cells.

Defaults to true

allowChart
`boolean`

It allows you to insert the chart in spreadsheet.

Defaults to true

allowConditionalFormat
`boolean`

It allows you to apply conditional formatting to the sheet.

Defaults to true

allowDataValidation
`boolean`

It allows you to apply validation to the spreadsheet cells.

Defaults to true

allowDelete
`boolean`

It allows you to delete rows, columns and sheets from spreadsheet.

Defaults to true

allowEditing
`boolean`

It allows you to add new data or update existing cell data. If it is false, it will act as read only mode.

Defaults to true

allowFiltering
`boolean`

It allows to enable/disable filter and its functionalities.

Defaults to true

allowFindAndReplace
`boolean`

It allows to enable/disable find and replace with its functionalities.

Defaults to true

allowFreezePane
`boolean`

It allows to enable/disable freeze pane functionality in spreadsheet.

Defaults to true

allowHyperlink
`boolean`

It allows to enable/disable Hyperlink and its functionalities.

Defaults to true

allowImage
`boolean`

It allows you to insert the image in spreadsheet.

Defaults to true

allowInsert
`boolean`

It allows you to insert rows, columns and sheets in to the spreadsheet.

Defaults to true

allowMerge
`boolean`

It allows you to merge the range of cells.

Defaults to true

allowNumberFormatting
`boolean`

It allows formatting a raw number into different types of formats (number, currency, accounting, percentage, short date, long date, time, fraction, scientific, and text) with built-in format codes.

Defaults to true

allowOpen
`boolean`

It allows you to open an Excel file (.xlsx, .xls, and .csv) in Spreadsheet.

Defaults to true

allowResizing
`boolean`

If allowResizing is set to true, spreadsheet columns and rows can be resized.

Defaults to true

allowSave
`boolean`

It allows you to save Spreadsheet with all data as Excel file (.xlsx, .xls, and .csv).

Defaults to true

allowScrolling
`boolean`

It specifies whether the Spreadsheet should be rendered with scrolling or not. To customize the Spreadsheet scrolling behavior, use the scrollSettings property.

Defaults to true

allowSorting
`boolean`

It allows to enable/disable sort and its functionalities.

Defaults to true

allowUndoRedo
`boolean`

It allows to enable/disable undo and redo functionalities.

Defaults to true

allowWrap
`boolean`

It allows to enable/disable wrap text feature. By using this feature the wrapping applied cell text can wrap to the next line, if the text width exceeds the column width.

Defaults to true

autoFillSettings
`AutoFillSettingsModel`

Configures the auto fill settings.

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

Defaults to { fillType: ‘FillSeries’, showFillOptions: true }

cellStyle
`CellStyleModel`

Specifies the cell style options.

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

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

Defaults to {}

cssClass
`string`

To specify a CSS class or multiple CSS class separated by a space, add it in the Spreadsheet root element. This allows you to customize the appearance of component.

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

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

Defaults to ”

definedNames
`DefineNameModel[]`

Specifies the name for a range and uses it in formula for calculation.

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

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

Defaults to []

enableClipboard
`boolean`

It enables or disables the clipboard operations (cut, copy, and paste) of the Spreadsheet.

Defaults to true

enableContextMenu
`boolean`

It enables or disables the context menu option of spreadsheet. By default, context menu will opens for row header, column header, sheet tabs, and cell.

Defaults to true

enableKeyboardNavigation
`boolean`

It allows you to interact with cell, sheet tabs, formula bar, and ribbon through the keyboard device.

Defaults to true

enableKeyboardShortcut
`boolean`

It enables shortcut keys to perform Spreadsheet operations like open, save, copy, paste, and more.

Defaults to true

enablePersistence
`boolean`

Enable or disable persisting component’s state between page reloads.

Defaults to false

enableRtl
`boolean`

Enable or disable rendering component in right to left direction.

Defaults to false

height
`string` | `number`

Defines the height of the Spreadsheet. It accepts height as pixels, number, and percentage.

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

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

Defaults to ‘100%’

isProtected
`boolean`

Specifies to protect the workbook.

Defaults to false

locale
`string`

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

Defaults to ”

openUrl
`string`

Specifies the service URL to open excel file in spreadsheet.

Defaults to ”

password
`string`

Specifies the password.

Defaults to ”

saveUrl
`string`

Specifies the service URL to save spreadsheet as Excel file.

Defaults to ”

scrollSettings
`ScrollSettingsModel`

Configures the scroll settings.

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

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

The allowScrolling property should be true.

Defaults to { isFinite: false, enableVirtualization: true }

selectionSettings
`SelectionSettingsModel`

Configures the selection settings.

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

Defaults to { mode: ‘Multiple’ }

sheets
`SheetModel[]`

Configures sheets and its options.

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

Defaults to []

showAggregate
`boolean`

If showAggregate is set to true, spreadsheet will show the AVERAGE, SUM, COUNT, MIN and MAX values based on the selected cells.

Defaults to true

showFormulaBar
`boolean`

It shows or hides the formula bar and its features.

Defaults to true

showRibbon
`boolean`

It shows or hides the ribbon in spreadsheet.

Defaults to true

showSheetTabs
`boolean`

It shows or hides the sheets tabs, this is used to navigate among the sheets and create or delete sheets by UI interaction.

Defaults to true

width
`string` | `number`

Defines the width of the Spreadsheet. It accepts width as pixels, number, and percentage.

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

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

Defaults to ‘100%’

Methods

Unfreeze

This method is used to unfreeze the frozen rows and columns from the active sheet.

Parameter	Type	Description
sheet (optional)	`number` \| `string`	Specifies the sheet name or index in which the unfreeze operation will perform. By default, active sheet will be considered.

Returns void

addContextMenuItems

To add context menu items.

<script>
import Vue from "vue";
import { enableRipple, closest } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     contextMenuBeforeOpen: function(args) {
        var spreadsheet =  this.$refs.spreadsheet;
        // To add context menu items in sheet content context menu.
        if(closest(args.event.target, '.e-sheet-content')){
            spreadsheet.addContextMenuItems([{ text: 'Custom Item' }], 'Paste Special', false); //To pass the items, Item before / after that the element to be inserted, Set false if the items need to be inserted before the text.
        }
        // To add context menu items in column header context menu.
        else if(closest(args.event.target, '.e-colhdr-table')){
            spreadsheet.addContextMenuItems([{ text: 'Custom Column' }], 'Insert Column', false);
        }
        // To add context menu items in row header context menu.
        else if(closest(args.event.target, '.e-rowhdr-table')){
            spreadsheet.addContextMenuItems([{ text: 'Custom Row' }], 'Insert Row', false);
        }
        // To add context menu items in sheet tab context menu.
        else if(closest(args.event.target, '.e-toolbar-item')){
            spreadsheet.addContextMenuItems([{ text: 'Custom tab' }], 'Insert', false);
        }
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet" :contextMenuBeforeOpen="contextMenuBeforeOpen">
    </ejs-spreadsheet>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
items	`MenuItemModel[]`	Items that needs to be added.
text	`string`	Item before / after that the element to be inserted.
insertAfter (optional)	`boolean`	Set `false` if the `items` need to be inserted before the `text`. By default, `items` are added after the `text`.
isUniqueId (optional)	`boolean`	Set `true` if the given `text` is a unique id.

Returns void

addCustomFunction

To add custom library function.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
      // To add custom library function.
      this.$refs.spreadsheet.addCustomFunction("CustomFuntion", "SQRT"); // Custom function handler name, Custom function name
    }
  }
});
window.CustomFuntion = num => Math.sqrt(num);
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Add CustomFunction</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Returns void

addDataValidation

This method is used to add data validation.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
      var spreadsheet = this.$refs.spreadsheet;
      // To add the data validation
      spreadsheet.addDataValidation({ type: 'TextLength', operator: 'LessThanOrEqualTo', value1: '4' }, 'A2:A5'); // specifies the validation rules, range that needs to be add validation.
      spreadsheet.addDataValidation({ type: 'WholeNumber', operator: 'NotEqualTo', value1: '1' }, 'B2:B5');
      spreadsheet.addDataValidation({ type: 'Date', operator: 'NotEqualTo', value1: '04/11/2019' }, 'F2:F5');
      spreadsheet.addDataValidation({ type: 'Time', operator: 'Between', value1: '10:00:00 AM', value2: '11:00:00 AM' }, 'G2:G5');
      spreadsheet.addDataValidation({ type: 'Decimal', operator: 'LessThan', value1: '100000.00' }, 'H2:H5');
      spreadsheet.addDataValidation({ type: 'List', inCellDropDown: true, value1: '10, 20, 30' }, 'I2:I5'); // Specifies InCellDropDown option in Data Validation.
      spreadsheet.addDataValidation({ type: 'List', inCellDropDown: true, value1: '=Sheet1!A2:A3'}, 'J2:J5'); // Specifies the cell range as data source to the list validation dropdown.
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Add Data Validation</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
rules	`ValidationModel`	specifies the validation rules like type, operator, value1, value2, ignoreBlank, inCellDropDown, isHighlighted arguments.
range (optional)	`string`	range that needs to be add validation.

Returns void

addDefinedName

Adds the defined name to the Spreadsheet.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // To provide name and range arguments in this method 
        this.$refs.spreadsheet.addDefinedName({name: 'value', refersTo: '=Sheet1!B2' });
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Add DefinedName</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
definedName	`DefineNameModel`	Specifies the name, scope, comment, refersTo.

Returns boolean

addFileMenuItems

To add custom file menu items.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
       // To add custom file menu items
        this.$refs.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
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Add File Menu Items</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
items	`MenuItemModel[]`	Specifies the ribbon file menu items to be inserted.
text	`string`	Specifies the existing file menu item text before / after which the new file menu items to be inserted.
insertAfter (optional)	`boolean`	Set `false` if the `items` need to be inserted before the `text`. By default, `items` are added after the `text`.
isUniqueId (optional)	`boolean`	Set `true` if the given file menu items `text` is a unique id.

Returns void

addHyperlink

To add the hyperlink in the cell

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // To add the hyperlink in the cell
        this.$refs.spreadsheet.addHyperlink("https://www.google.com/", "A5"); // hyperlink, address
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Add Hyperlink</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
hyperlink	`string` \| `HyperlinkModel`	to specify the hyperlink
address	`string`	to specify the address
displayText (optional)	`string`	to specify the text to be displayed, by default value of the cell will be displayed.

Returns void

addInvalidHighlight

This method is used to highlight the invalid data.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        //Highlight Invalid Data
        this.$refs.spreadsheet.addInvalidHighlight('A1:H5'); //range
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Add Invalid Highlight</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
range (optional)	`string`	range that needs to be highlight the invalid data.

Returns void

addRibbonTabs

To add custom ribbon tabs.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        //To add custom ribbon tabs
        this.$refs.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.
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Add Ribbon Tabs</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
items	`RibbonItemModel[]`	Specifies the ribbon tab items to be inserted.
insertBefore (optional)	`string`	Specifies the existing ribbon header text before which the new tabs will be inserted. If not specified, the new tabs will be inserted at the end.

Returns void

addToolbarItems

To add the custom items in Spreadsheet ribbon toolbar.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        //To add the custom items in Spreadsheet ribbon toolbar.
        this.$refs.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.
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Add Toolbar Items</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
tab	`string`	Specifies the ribbon tab header text under which the specified items will be inserted.
items	`ItemModel[]`	Specifies the ribbon toolbar items that needs to be inserted.
index (optional)	`number`	Specifies the index text before which the new items will be inserted. If not specified, the new items will be inserted at the end of the toolbar.

Returns void

appendTo

Appends the control within the given HTML Div element.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        //Appends the control within the given HTML Div element.
        this.$refs.spreadsheet.appendTo('#spreadsheet'); // pass argument as selector of the element, here we passing selector(id) of the spreadsheet element
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">AppendTo</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
selector	`string` \| `HTMLElement`	Target element where control needs to be appended.

Returns void

applyFilter

Applies the filter UI in the range of cells in the sheet.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin, getCell, getCellIndexes, getColumnHeaderText } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        //Applies the filter UI in the range of cells in the sheet.
        var spreadsheet = this.$refs.spreadsheet;
        var sheet = spreadsheet.getActiveSheet();
        var cell = getCellIndexes(sheet.activeCell);
        var predicates = [{
        field: getColumnHeaderText(cell[1] + 1),
        operator: 'equal',
        value: getCell(cell[0], cell[1], sheet).value, matchCase: false,
        }];
        spreadsheet.applyFilter(predicates, 'A1:F1');// predicates, range
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Apply Filter</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
predicates (optional)	`PredicateModel[]`	Specifies the predicates.
range (optional)	`string`	Specify the range.

Returns Promise

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`	Specifies the direction(“Down”,“Right”,“Up”,“Left”) to be filled.
fillType (optional)	`AutoFillType`	Specifies the fill type(“FillSeries”,“CopyCells”,“FillFormattingOnly”,“FillWithoutFormatting”) for autofill action.

Returns void

autoFit

This method is used to autofit the range of rows or columns

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        //This method is used to autofit the range of rows or columns
        this.$refs.spreadsheet.autoFit("D:F") //To autofit the column
        this.$refs.spreadsheet.autoFit("5:10"); // To autofit to rows
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">AutoFit</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
range	`string`	range of rows or columns that needs to be autofit.

Returns void

cellFormat

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

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        var spreadsheet = this.$refs.spreadsheet;
        // Applies the style (font family, font weight, background color, etc…) to the specified range of cells.
        spreadsheet.cellFormat({ fontWeight: 'bold', fontSize: '12pt', backgroundColor: '#279377', color: '#ffffff' }, 'A2:E2');
        // Setting common styles to whole table cells
        spreadsheet.cellFormat({ verticalAlign: 'middle', fontFamily: 'Axettac Demo' }, 'A2:E12');
        // Column wise styles setting
        spreadsheet.cellFormat({ textAlign: 'center' }, 'A2:A12');
        // Setting text-indent to 2 and 4 column
        let style = { 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');
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Cell Format</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
style	`CellStyleModel`	Specifies the cell style.
range (optional)	`string`	Specifies the address for the range of cells.

Returns void

clear

This method is used to Clear contents, formats and hyperlinks in spreadsheet.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        var spreadsheet = this.$refs.spreadsheet;
        spreadsheet.clear({type: 'Clear Contents', range: 'A1:A10'}); // Clear the content in the provided range
        spreadsheet.clear({type: 'Clear Formats', range: 'A1:A10'}); // Clear the formats applied in the provided range
        spreadsheet.clear({type: 'Clear Hyperlinks', range: 'A1:A10'}); // Clear the hyperlinks applied in the provided range
        spreadsheet.clear({type: 'Clear All', range: 'B1:B10'}); // Clear the content, formats and hyperlinks applied in the provided range. 
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Clear</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
options	`ClearOptions`	Options for clearing the content, formats and hyperlinks in spreadsheet.

Returns void

clearConditionalFormat

This method is used for remove conditional formatting.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
         var spreadsheet = this.$refs.spreadsheet;
        // This method is used to remove conditional formatting.
        spreadsheet.clearConditionalFormat("A1:B5"); // range that needs to be remove conditional formatting.
        spreadsheet.clearConditionalFormat("Sheet1!A1:B5"); // you can also specify the range with sheetname.
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Clear Conditional Format</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
range (optional)	`string`	range that needs to be remove conditional formatting.

Returns void

clearFilter

Clears the filter changes of the sheet.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // Clears the filter changes of the sheet.
        this.$refs.spreadsheet.clearFilter();
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Clear Filter</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
field (optional)	`string`	Specify the field.

Returns void

closeEdit

Cancels the edited state, this will not update any value in the cell.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // Cancels the edited state, this will not update any value in the cell.
        this.$refs.spreadsheet.closeEdit();
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Close Edit</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Returns void

computeExpression

Used to compute the specified expression/formula.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // Used to compute the specified expression/formula.
        this.$refs.spreadsheet.computeExpression('522+1'); // pass the expression 
        this.$refs.spreadsheet.computeExpression('=SUM(F2:F3)'); //pass the formula as string.
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Compute Expression</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
formula	`string`	Specifies the formula(=SUM(A1:A3)) or expression(2+3).

Returns string | number

conditionalFormat

This method is used to add conditional formatting.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // This method is used to add conditional formatting.
        var spreadsheet = this.$refs.spreadsheet;

        // 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' });
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Conditional Format</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
conditionalFormat	`ConditionalFormatModel`	Specify the conditionalFormat.

Returns void

copy

To copy the specified cell or cells properties such as value, format, style etc…

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        var spreadsheet = this.$refs.spreadsheet;
        spreadsheet.copy(); //Copy the selected cell
        spreadsheet.copy("A2"); // specify the address
        spreadsheet.copy('Car Sales Report!B2')  // address with sheet name.
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet">
      <e-sheets>
          <e-sheet name="Car Sales Report">
          </e-sheet>
        </e-sheets>
    </ejs-spreadsheet>
     <button @click="onClick">Copy</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
address (optional)	`string`	Specifies the range address.

Returns Promise

cut

To cut the specified cell or cells properties such as value, format, style etc…

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        var spreadsheet = this.$refs.spreadsheet;
        spreadsheet.cut(); //Cut the selected cell
        spreadsheet.cut("A2"); // specify the address
        spreadsheet.cut('Car Sales Report!B2')  // address with sheet name.
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet">
      <e-sheets>
          <e-sheet name="Car Sales Report">
          </e-sheet>
        </e-sheets>
    </ejs-spreadsheet>
     <button @click="onClick">Cut</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
address (optional)	`string`	Specifies the range address to cut.

Returns Promise

delete

Used to delete rows, columns and sheets from the spreadsheet.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // Used to delete rows, columns and sheets from the spreadsheet.
        var spreadsheet = this.$refs.spreadsheet;
        spreadsheet.delete(1, 1, "Row", "Sheet1"); // start index of row/column, end index of row/column, Model type(Row, Column, Sheet), sheet(sheet name or index)
        spreadsheet.delete(2, 2, "Column", "Sheet1"); // start index of row/column, end index of row/column, Model type(Row, Column, Sheet), sheet(sheet name or index)
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Delete</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
startIndex (optional)	`number`	Specifies the start sheet / row / column index.
endIndex (optional)	`number`	Specifies the end sheet / row / column index.
model (optional)	`ModelType`	Specifies the delete model type. By default, the model is considered as `Sheet`. The possible values are, - Row: To delete rows. - Column: To delete columns. - Sheet: To delete sheets.
sheet (optional)	`number` \| `string`	Specifies the sheet name or index in which the delete operation will perform. By default, active sheet will be considered. It is applicable only for model type Row and Column.

Returns void

deleteChart

Used to delete the chart from spreadsheet.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
      onClick: function() {
           //Used to delete the chart from spreadsheet.
        this.$refs.spreadsheet.deleteChart("Chart1"); // id - Specifies the chart element id.
    },
     created: function(args) {
          // Used to set the chart in spreadsheet.
        this.$refs.spreadsheet.insertChart([{ type: "Line", theme: "Material", isSeriesInRows: false, range: "A1", id: "Chart1"}]); // Specifies the options to insert chart in spreadsheet.
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet" :created="created">
    </ejs-spreadsheet>
     <button @click="onClick">Delete Chart</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
id (optional)	`string`	Specifies the chart element id.

Returns void

deleteImage

Used to delete the image in spreadsheet.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
      onClick: function() {
            //  Used to delete the image in spreadsheet.
        this.$refs.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: function(args) {
          // Used to set the image in spreadsheet.
        this.$refs.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.
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet" :created="created">
    </ejs-spreadsheet>
     <button @click="onClick">Delete Image</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
id	`string`	Specifies the id of the image element to be deleted.
range (optional)	`string`	Specifies the range in spreadsheet.

Returns void

destroy

Destroys the component (detaches/removes all event handlers, attributes, classes, and empties the component element).

Returns void

duplicateSheet

Used to make a duplicate/copy of the sheet in the spreadsheet.

<script>
import Vue from "vue";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        var spreadsheet = this.$refs.spreadsheet;
        // Make a duplicate/copy of the active sheet in the spreadsheet.
        spreadsheet.duplicateSheet();
        // Make a duplicate/copy of the specified sheet in the spreadsheet.
        spreadsheet.duplicateSheet(1); // index of the sheet to be duplicated
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Duplicate Sheet</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
sheetIndex (optional)	`number`	Specifies the index of the sheet to be duplicated. By default, the active sheet will be duplicated.

Returns void

enableContextMenuItems

To enable / disable context menu items.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     contextMenuBeforeOpen: function(args) {
        //To enable / disable context menu items.
        var spreadsheet = this.$refs.spreadsheet;
        spreadsheet.enableContextMenuItems(['Copy'], false, false); // Contextmenu Items that needs to be enabled / disabled, Set true / false to enable / disable the menu items, Set true if the given text is a unique id.
        spreadsheet.enableContextMenuItems(['spreadsheet_cmenu_copy'], false, true); // Contextmenu id that needs to be enabled / disabled, Set true / false to enable / disable the menu items, Set true if the given text is a unique id.
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet" :contextMenuBeforeOpen="contextMenuBeforeOpen">
    </ejs-spreadsheet>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
items	`string[]`	Items that needs to be enabled / disabled.
enable (optional)	`boolean`	Set `true` / `false` to enable / disable the menu items.
isUniqueId (optional)	`boolean`	Set `true` if the given `text` is a unique id.

Returns void

enableFileMenuItems

To enable / disable file menu items.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     fileMenuBeforeOpen: function(args) {
        // To enable / disable file menu items.
        this.$refs.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.
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet" :fileMenuBeforeOpen="fileMenuBeforeOpen">
    </ejs-spreadsheet>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
items	`string[]`	Items that needs to be enabled / disabled.
enable (optional)	`boolean`	Set `true` / `false` to enable / disable the menu items.
isUniqueId (optional)	`boolean`	Set `true` if the given file menu items `text` is a unique id.

Returns void

enableRibbonTabs

To enable / disable the existing ribbon tabs.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // To enable / disable the existing ribbon tabs.
        this.$refs.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.
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Enable Ribbon Tabs</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
tabs	`string[]`	Specifies the tab header text which needs to be enabled / disabled.
enable (optional)	`boolean`	Set `true` / `false` to enable / disable the ribbon tabs.

Returns void

enableToolbarItems

Enables or disables the specified ribbon toolbar items or all ribbon items.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // To Enables or disables the specified ribbon toolbar items or all ribbon items
        this.$refs.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.$refs.spreadsheet.enableToolbarItems('Home', [3, 4], false); // 3,4 - index
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Enable Toolbar Items</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
tab	`string`	Specifies the ribbon tab header text under which the toolbar items need to be enabled / disabled.
items (optional)	`number[]` \| `string[]`	Specifies the toolbar item indexes / unique id’s which needs to be enabled / disabled. If it is not specified the entire toolbar items will be enabled / disabled.
enable (optional)	`boolean`	Boolean value that determines whether the toolbar items should be enabled or disabled.

Returns void

endEdit

If Spreadsheet is in editable state, you can save the cell by invoking endEdit.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
      //If Spreadsheet is in editable state, you can save the cell by invoking endEdit.
      this.$refs.spreadsheet.endEdit();
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">End Edit</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Returns void

find

To find the specified cell value.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // 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.$refs.spreadsheet.find(findOption);
        }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Find</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
args	`FindOptions`	Specifies the replace value with find args to replace specified cell value.

Returns void | string

findAll

To Find All the Match values Address within Sheet or Workbook.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // To Find All the Match values Address within Sheet or Workbook.
        this.$refs.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
        }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">FindAll</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
value	`string`	Specifies the value to find.
mode (optional)	`string`	Specifies the value to be find within Sheet/Workbook.
isCSen (optional)	`boolean`	Specifies the find match with case sensitive or not.
isEMatch (optional)	`boolean`	Specifies the find match with entire match or not.
sheetIndex (optional)	`number`	Specifies the sheetIndex. If not specified, it will consider the active sheet.

Returns string[]

freezePanes

This method is used to freeze rows and columns after the specified cell in the Spreadsheet.

Parameter	Type	Description
row (optional)	`number`	Specifies the freezed row count.
column (optional)	`number`	Specifies the freezed column count.
sheet (optional)	`number` \| `string`	Specifies the sheet name or index in which the freeze operation will perform. By default, active sheet will be considered.

Returns void

getData

Gets the range of data as JSON from the specified address.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // Gets the range of data as JSON from the specified address.
        var spreadsheet = this.$refs.spreadsheet;
        spreadsheet.getData("Sheet1!A1:B2").then(data => console.log(data)); // Specifies the address with sheet name for range of cells, Gets the range of data as JSON from the specified address
        spreadsheet.getData("A1:B2").then(data => console.log(data)); // Specifies the address for range of cells, Gets the range of data as JSON from the specified address
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Get Data</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
address	`string`	Specifies the address for range of cells.

Returns Promise

getDisplayText

Gets the formatted text of the cell.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin, getCell } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
         var spreadsheet = this.$refs.spreadsheet;
        // To Gets the formatted text of the cell.
        let cell = getCell(0,0, spreadsheet.getActiveSheet()); // rowIndex, colIndex, sheetIndex
        console.log(spreadsheet.getDisplayText(cell)); // to provide the cell model
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Get Display Text</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
cell	`CellModel`	Specifies the cell.

Returns string

getRowData

Used to get a row data from the data source with updated cell value.

Parameter	Type	Description
index (optional)	`number`	Specifies the row index.
sheetIndex (optional)	`number`	Specifies the sheet index. By default, it consider the active sheet index.

Returns Object[]

getSelectAllContent

Get the select all div of spreadsheet

Returns HTMLElement

goTo

Used to navigate to cell address within workbook.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // Used to navigate to cell address within workbook.
        var spreadsheet = this.$refs.spreadsheet;
        spreadsheet.goTo("B1"); // pass the range
        spreadsheet.goTo("Sheet2!B1"); // You can specify the sheet name with cell address to navigate the specified cell address
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">GoTo</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
address	`string`	Specifies the cell address you need to navigate. You can specify the address in two formats, `{sheet name}!{cell address}` - Switch to specified sheet and navigate to specified cell address. `{cell address}` - Navigate to specified cell address with in the active sheet.

Returns void

hideColumn

Used to hide/show the columns in spreadsheet.

Parameter	Type	Description
startIndex	`number`	Specifies the start column index.
endIndex (optional)	`number`	Specifies the end column index.
hide (optional)	`boolean`	Set `true` / `false` to hide / show the columns.

Returns void

hideFileMenuItems

To show/hide the file menu items in Spreadsheet ribbon.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     fileMenuBeforeOpen: function(args) {
        var spreadsheet = this.$refs.spreadsheet;
        //To show/hide the file menu items in Spreadsheet.
         spreadsheet.hideFileMenuItems(['PDF document'], true); // Specifies the file menu items text which is to be show/hide, Set `true` / `false` to hide / show the file menu items.
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet" :fileMenuBeforeOpen="fileMenuBeforeOpen"></ejs-spreadsheet>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
items	`string[]`	Specifies the file menu items text which is to be show/hide.
hide (optional)	`boolean`	Set `true` / `false` to hide / show the file menu items.
isUniqueId (optional)	`boolean`	Set `true` if the given file menu items `text` is a unique id.

Returns void

hideRibbonTabs

To show/hide the existing ribbon tabs.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        //To show/hide the existing ribbon tabs.
        this.$refs.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.
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Hide Ribbon Tabs</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
tabs	`string[]`	Specifies the tab header text which needs to be shown/hidden.
hide (optional)	`boolean`	Set `true` / `false` to hide / show the ribbon tabs.

Returns void

hideRow

Used to hide/show the rows in spreadsheet.

Parameter	Type	Description
startIndex	`number`	Specifies the start row index.
endIndex (optional)	`number`	Specifies the end row index.
hide (optional)	`boolean`	To hide/show the rows in specified range.

Returns void

hideSpinner

To hide showed spinner manually.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        //To hide showed spinner manually.
        this.$refs.spreadsheet.hideSpinner(); 
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Hide Spinner</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Returns void

hideToolbarItems

To show/hide the existing Spreadsheet ribbon toolbar items.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        var spreadsheet = this.$refs.spreadsheet;
        //To show/hide the existing Spreadsheet ribbon toolbar items.
        spreadsheet.hideToolbarItems('Home', [0, 1, 2, 4, 14, 15, 22, 23, 24]); // tab name, index
        spreadsheet.hideToolbarItems('View', [1, 2]);
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Hide Toolbar Items</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
tab	`string`	Specifies the ribbon tab header text under which the specified items needs to be hidden / shown.
indexes	`number[]`	Specifies the toolbar indexes which needs to be shown/hidden from UI.
hide (optional)	`boolean`	Set `true` / `false` to hide / show the toolbar items.

Returns void

insertChart

Used to set the chart in spreadsheet.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // Used to set the chart in spreadsheet.
        this.$refs.spreadsheet.insertChart([{ type: "Line", theme: "Material", isSeriesInRows: false, range: "A1", id: "Chart1"}]); // Specifies the options to insert chart in spreadsheet.
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Insert Chart</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
chart (optional)	`ChartModel[]`	Specifies the options to insert chart in spreadsheet

Returns void

insertColumn

Used to insert columns in to the spreadsheet.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        //To insert the column
        this.$refs.spreadsheet.insertColumn([{index: 1, width: 95}], 1); // startColumn (index, column width), endColumn
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Insert Column</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
startColumn (optional)	`number` \| `ColumnModel[]`	Specifies the start column index / column model which needs to be inserted.
endColumn (optional)	`number`	Specifies the end column index.
sheet (optional)	`number` \| `string`	Specifies the sheet name or index in which the insert operation will perform. By default, active sheet will be considered.

Returns void

insertImage

Used to set the image in spreadsheet.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     created: function(args) {
          // Used to set the image in spreadsheet.
        this.$refs.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.
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet" :created="created">
    </ejs-spreadsheet>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
images	`ImageModel[]`	Specifies the options to insert image in spreadsheet.
range (optional)	`string`	Specifies the range in spreadsheet.

Returns void

insertRow

Used to insert rows in to the spreadsheet.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        //To insert the row
        this.$refs.spreadsheet.insertRow(4, 4); // startRow, endRow
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Insert Row</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
startRow (optional)	`number` \| `RowModel[]`	Specifies the start row index / row model which needs to be inserted.
endRow (optional)	`number`	Specifies the end row index.
sheet (optional)	`number` \| `string`	Specifies the sheet name or index in which the insert operation will perform. By default, active sheet will be considered.

Returns void

insertSheet

Used to insert sheets in to the spreadsheet.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        //To insert sheets in to the spreadsheet.
        this.$refs.spreadsheet.insertSheet(0, 2); // startSheet, endSheet
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Insert Sheet</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
startSheet (optional)	`number` \| `SheetModel[]`	Specifies the start sheet index / sheet model which needs to be inserted.
endSheet (optional)	`number`	Specifies the end sheet index.

Returns void

isValidCell

To determine whether the cell value in a data validation applied cell is valid or not.

Parameter	Type	Description
cellAddress (optional)	`string`	Address of the cell.

Returns boolean

lockCells

Applies cell lock to the specified range of cells.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
         var spreadsheet =this.$refs.spreadsheet;
        //To Applies cell lock to the specified range of cells.
        let protectSetting = {
            selectCells: true,
            formatCells: false,
            formatRows: false,
            formatColumns: false,
            insertLink: false
        }
        spreadsheet.protectSheet("Issues", protectSetting);
        spreadsheet.lockCells('A2:AZ100', false); // to unlock the A2:Az100 cells
        spreadsheet.lockCells('A1:Z1', true); // to lock the A1:Z1 cells
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Lock Cells</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
range (optional)	`string`	Specifies the address for the range of cells.
isLocked (optional)	`boolean`	-Specifies the cell is locked or not.

Returns void

merge

Used to merge the range of cells.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        //To merge the range of cells.
        this.$refs.spreadsheet.merge('B1:E2'); // to pass the range
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Merge</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
range (optional)	`string`	Specifies the range of cells as address.
type (optional)	`MergeType`	Specifies the merge type. The possible values are, - All: Merge all the cells between provided range. - Horizontally: Merge the cells row-wise. - Vertically: Merge the cells column-wise.

Returns void

moveSheet

Used to move the sheets to the specified position in the list of sheets.

<script>
import Vue from "vue";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        var spreadsheet = this.$refs.spreadsheet;
        // Moves the active sheet to the position in the list of sheets.
        spreadsheet.moveSheet(1); // position to move
        // Moves the list of specified sheets to the position in the list of sheets.
        spreadsheet.moveSheet(0, [1,2]); // position to move, indexes of the sheets to be moved
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet">
        <e-sheets>
         <e-sheet></e-sheet>
         <e-sheet></e-sheet>
         <e-sheet></e-sheet>
        </e-sheets>
    </ejs-spreadsheet>
     <button @click="onClick">Move Sheet</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
position	`number`	Specifies the position to move a sheet in the list of sheets.
sheetIndexes (optional)	`number[]`	Specifies the indexes of the sheet to be moved. By default, the active sheet will be moved.

Returns void

numberFormat

Applies the number format (number, currency, percentage, short date, etc…) to the specified range of cells.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin, getFormatFromType } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        var spreadsheet = this.$refs.spreadsheet;
        //To Applies the number format (number, currency, percentage, short date, etc…) to the specified range of cells.
        spreadsheet.numberFormat('$#,##0.00', 'E1:E3');
        // Applied Accounting format to the cells from C3 to E10 range.
        spreadsheet.numberFormat(getFormatFromType('Accounting'), 'C3:E10');
        // Applied Percentage format to the cells from F3 to F11 range.
        spreadsheet.numberFormat('0%', 'F3:F10');
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Number Format</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
format	`string`	Specifies the number format code.
range (optional)	`string`	Specifies the address for the range of cells.

Returns void

open

Opens the Excel file.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
        openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open',
        saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save'
    };
  },
  methods: {
     onClick: function() {
        // To opens the Excel file.
        fetch("https://js.syncfusion.com/demos/ejservices/data/Spreadsheet/LargeData.xlsx")
        .then((response) => {
        response.blob().then((fileBlob) => {
            var file = new File([fileBlob], "Sample.xlsx");
            this.$refs.spreadsheet.open({ file: file });
            })
        })
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet" :openUrl="openUrl" :saveUrl="saveUrl"></ejs-spreadsheet>
     <button @click="onClick">Open</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
options	`OpenOptions`	Options for opening the excel file.

Returns void

openFromJson

Opens the specified JSON object.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
        response: "",
        openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open',
        saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save'
    };
  },
  methods: {
     Save: function() {
      this.$refs.spreadsheet.saveAsJson().then(Json => (this.response = Json)); 
    },
    Open: function() {
      this.$refs.spreadsheet.openFromJson({ file: this.response.jsonObject }); // To load JSON data in the Spreadsheet.
    },
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet" :openUrl="openUrl" :saveUrl="saveUrl"></ejs-spreadsheet>
     <button @click="Save">Save</button>
     <button @click="Open">Open</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

The available arguments in options are:

file: Specifies the spreadsheet model as object or string. And the object contains the jsonObject, which is saved from spreadsheet using saveAsJson method.

Parameter	Type	Description
options	`Object`	Options for opening the JSON object.

Returns void

paste

This method is used to paste the cut or copied cells in to specified address.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
       // To paste the cut or copied cells in to specified address.
        var spreadsheet = this.$refs.spreadsheet;
        spreadsheet.paste(); //paste the selected cell
        spreadsheet.paste("B2", "All"); // to pass the range, Specifies the type of paste.
        spreadsheet.paste("B3", "Values"); // to pass the range, Specifies the type of paste.
        spreadsheet.paste("B4", "Formats"); // to pass the range, Specifies the type of paste.
        spreadsheet.paste("B5", "Formulas");// to pass the range, Specifies the type of paste.
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet">
      <e-sheets>
          <e-sheet name="Car Sales Report">
          </e-sheet>
        </e-sheets>
    </ejs-spreadsheet>
     <button @click="onClick">Paste</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
address (optional)	`string`	Specifies the cell or range address.
type (optional)	`PasteSpecialType`	Specifies the type of paste.

Returns void

protectSheet

To protect the particular sheet.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
      // To protect the particular sheet.
        let protectSetting = {
            selectCells: true,
            formatCells: false,
            formatRows: false,
            formatColumns: false,
            insertLink: false
        }
        this.$refs.spreadsheet.protectSheet('Car Sales Report', protectSetting); // To provide sheet name, protectSetting
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Protect Sheet</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
sheet (optional)	`number` \| `string`	Specifies the sheet to protect.
protectSettings (optional)	`ProtectSettingsModel`	Specifies the protect sheet options.
password (optional)	`string`	Specifies the password to protect.

Returns void

redo

To perform the redo operation in spreadsheet.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // To perform the redo operation in spreadsheet.
        this.$refs.spreadsheet.redo();
    };
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Redo</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Returns void

refresh

Used to refresh the spreadsheet in UI level.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // Used to refresh the spreadsheet
        this.$refs.spreadsheet.refresh(false); // specifies `true` / `false` to create new workbook in spreadsheet.
    };
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Refresh</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
isNew (optional)	`boolean`	Specifies `true` / `false` to create new workbook in spreadsheet.

Returns void

removeContextMenuItems

To remove existing context menu items.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     contextMenuBeforeOpen: function(args) {
        // To remove context menu items.
        this.$refs.spreadsheet.removeContextMenuItems(["Cut"]); //Items that needs to be removed, Set `true` if the given `text` is a unique id.
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet" :contextMenuBeforeOpen="contextMenuBeforeOpen">
    </ejs-spreadsheet>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
items	`string[]`	Items that needs to be removed.
isUniqueId (optional)	`boolean`	Set `true` if the given `text` is a unique id.

Returns void

removeDataValidation

This method is used for remove validation.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // This method is used for remove validation.
        this.$refs.spreadsheet.removeDataValidation("A2:A5"); // to pass the range
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Remove Data Validation</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
range (optional)	`string`	range that needs to be remove validation.

Returns void

removeDefinedName

Removes the defined name from the Spreadsheet.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // To Removes the defined name from the Spreadsheet.
        this.$refs.spreadsheet.removeDefinedName({ name: 'value' ,  scope: 'Workbook'}); //Specifies the name, Specifies the scope of the defined name.
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Remove DefinedName</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
definedName	`string`	Specifies the name.
scope	`string`	Specifies the scope of the defined name.

Returns boolean

removeHyperlink

To remove the hyperlink in the cell

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
       // To remove the hyperlink in the cell
        var spreadsheet = this.$refs.spreadsheet;
        spreadsheet.removeHyperlink("A10"); // to pass the range
        spreadsheet.removeHyperlink("Sheet1!A1"); // you can also pass the range with sheet name
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Remove Hyperlink</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
range	`string`	To specify the range

Returns void

removeInvalidHighlight

This method is used for remove highlight from invalid data.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
      // To remove highlight from invalid data.
        this.$refs.spreadsheet.removeInvalidHighlight("A1:H5"); // to pass the range
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Remove Invalid Highlight</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
range (optional)	`string`	range that needs to be remove invalid highlight.

Returns void

replace

To replace the specified cell value.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // To replace the specified cell value.
        this.$refs.spreadsheet.replace({replaceValue: '20', replaceBy: 'replace', value: '10'}); // Specifies the replace value with find args to replace specified cell value.
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Replace</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
args	`FindOptions`	Specifies the replace value with find args to replace specified cell value.

Returns void

resize

Used to resize the Spreadsheet.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { getComponent } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
  }
});

window.addEventListener('resize', onResize);

function onResize() {
    var spreadsheet = getComponent(document.getElementById('spreadsheet'), 'spreadsheet');
    document.body.style.height = document.documentElement.clientHeight + "px";
    spreadsheet.resize();
}
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Returns void

save

Saves the Spreadsheet data to Excel file.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
        openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open',
        saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save'
    };
  },
  methods: {
     onClick: function() {
        // Saves the Spreadsheet data to Excel file.
        this.$refs.spreadsheet.save({ url: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save', fileName: 'Worksheet', saveType: 'Xlsx' }); // Specifies the save URL, filename, file type need to be saved.
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet" :openUrl="openUrl" :saveUrl="saveUrl"></ejs-spreadsheet>
     <button @click="onClick">Save</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

The available arguments in saveOptions are:

url: Specifies the save URL.
fileName: Specifies the file name.
saveType: Specifies the file type need to be saved.

Parameter	Type	Description
saveOptions (optional)	`SaveOptions`	Options for saving the excel file.

Returns void

saveAsJson

Saves the Spreadsheet data as JSON object.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
        response: "",
        openUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/open',
        saveUrl: 'https://ej2services.syncfusion.com/production/web-services/api/spreadsheet/save'
    };
  },
  methods: {
     Save: function() {
      this.$refs.spreadsheet.saveAsJson().then(Json => (this.response = Json)); 
    },
    Open: function() {
      this.$refs.spreadsheet.openFromJson({ file: this.response.jsonObject }); // To load JSON data in the Spreadsheet.
    },
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet" :openUrl="openUrl" :saveUrl="saveUrl"></ejs-spreadsheet>
     <button @click="onClick">Save</button>
     <button @click="onClick">Open</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Returns Promise

selectRange

Selects the cell / range of cells with specified address.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // Selects the cell / range of cells with specified address.
        this.$refs.spreadsheet.selectRange("B7:B8");
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Select Range</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
address	`string`	Specifies the range address.

Returns void

setBorder

Sets the border to specified range of cells.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
      // Sets the border to specified range of cells.
        this.$refs.spreadsheet.setBorder({ border: '1px solid #000000' }, 'C6:G8', 'Outer'); // Specifies the style property which contains border value,Specifies the range of cell reference. If not specified, it will considered the active cell reference, Specifies the Border type
        this.$refs.spreadsheet.setBorder({ border: '1px solid #000000' }); 
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Set Border</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
style	`CellStyleModel`	Specifies the style property which contains border value.
range (optional)	`string`	Specifies the range of cell reference. If not specified, it will considered the active cell reference.
type (optional)	`BorderType`	Specifies the range of cell reference. If not specified, it will considered the active cell reference.

Returns void

setColWidth

Set the width of column.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
      // set the width, column index and sheet index in arguments.
      this.$refs.spreadsheet.setColWidth(120, 2, 1);
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Set Column Width</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
width (optional)	`number` \| `string`	To specify the width
colIndex (optional)	`number`	To specify the colIndex
sheetIndex (optional)	`number`	To specify the sheetIndex

Returns void

setColumnsWidth

Allows you to set the width to the single or multiple columns.

Parameter	Type	Description
width (optional)	`number`	Specifies the width for column.
ranges (optional)	`string[]`	Specifies the column range to set the width. If the sheet name is not specified then width will apply to the column in the active sheet. Possible values are * Single column range: [‘F’] or [‘F:F’] * Multiple columns range: [‘A:F’] * Multiple columns with discontinuous range - [‘A:C’, ‘G:I’, ‘K:M’] * Multiple columns with different sheets - [‘Sheet1!A:H’, ‘Sheet2!A:H’, ‘Sheet3!A:H’].

Returns void

setRowHeight

Set the height of row.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
      
    };
  },
  methods: {
     onClick: function() {
      // set the height, row index and sheet index in arguments.
      this.$refs.spreadsheet.setRowHeight(40, 2, 1);
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Set Row Height</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
height (optional)	`number` \| `string`	Specifies height needs to be updated. If not specified, it will set the default height 20.
rowIndex (optional)	`number`	Specifies the row index. If not specified, it will consider the first row.
sheetIndex (optional)	`number`	Specifies the sheetIndex. If not specified, it will consider the active sheet.
edited (optional)	`boolean`	Specifies the boolean value.

Returns void

setRowsHeight

Allows you to set the height to the single or multiple rows.

Parameter	Type	Description
height (optional)	`number`	Specifies the height for row.
ranges (optional)	`string[]`	Specifies the row range to set the height. If the sheet name is not specified then height will apply to the rows in the active sheet. Possible values are * Single row range: [‘2’] or [‘2:2’] * Multiple rows range: [‘1:100’] * Multiple rows with discontinuous range - [‘1:10’, ‘15:25’, ‘30:40’] * Multiple rows with different sheets - [‘Sheet1!1:50’, ‘Sheet2!1:50’, ‘Sheet3!1:50’].

Returns void

showSpinner

By default, Spreadsheet shows the spinner for all its actions. To manually show spinner you this method at your needed time.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // By default, Spreadsheet shows the spinner for all its actions. To manually show spinner you this method at your needed time.
        this.$refs.spreadsheet.showSpinner();
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Show Spinner</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Returns void

sort

Sorts the range of cells in the active sheet.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // To perform sorting on multiple columns
        this.$refs.spreadsheet.sort({ containsHeader: true}, 'A1:H11'); // SortOptions(containsHeader, caseSensitive, sortDescriptors) , Range
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Sort</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
sortOptions (optional)	`SortOptions`	options for sorting.
range (optional)	`string`	address of the data range.

Returns Promise

startEdit

Start edit the active cell.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // Start edit the active cell.
        this.$refs.spreadsheet.startEdit();
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Start Edit</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Returns void

unMerge

Used to split the merged cell into multiple cells.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        //To split the merged cell into multiple cells.
        this.$refs.spreadsheet.unMerge('B1:E2'); // to pass the range
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">UnMerge</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
range (optional)	`string`	Specifies the range of cells as address.

Returns void

undo

To perform the undo operation in spreadsheet.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // To perform the undo operation in spreadsheet.
        this.$refs.spreadsheet.undo();
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Undo</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Returns void

unfreezePanes

This method is used to unfreeze the frozen rows and columns from spreadsheet.

Parameter	Type	Description
sheet (optional)	`number` \| `string`	Specifies the sheet name or index in which the unfreeze operation will perform. By default, active sheet will be considered.

Returns void

unprotectSheet

To unprotect the particular sheet.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // To unprotect the particular sheet.
        var spreadsheet = this.$refs.spreadsheet;
        spreadsheet.unprotectSheet("1"); // specify the index to Unprotect.
        spreadsheet.unprotectSheet("Sheet1"); // specify the sheet name to Unprotect.
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Unprotect Sheet</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
sheet (optional)	`number` \| `string`	Specifies the sheet name or index to Unprotect.

Returns void

updateAction

To update the action which need to perform.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
         // To update the action which need to perform.
        this.$refs.spreadsheet.updateAction({action: 'cellSave', eventArgs:{ value: 'Custom value', address: 'Car Sales Report!M2'}}); // acion name, event options.
        this.$refs.spreadsheet.updateAction({action: 'wrap', eventArgs:{ address: 'Car Sales Report!M2', wrap: true}});
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet">
      <e-sheets>
          <e-sheet name="Car Sales Report">
          </e-sheet>
        </e-sheets>
    </ejs-spreadsheet>
     <button @click="onClick">Update Action</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
options	`CollaborativeEditArgs`	It describes an action and event args to perform.

Returns void

updateCell

To update a cell properties.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // To update a cell properties.
         var spreadsheet = this.$refs.spreadsheet;
         spreadsheet.updateCell({ value: 'Custom Value' }, "A3"); //  to specify the cell value, range
         spreadsheet.updateCell({ value: 'Custom Value' }, "Sheet1!A3"); //to specify the cell value, range with sheet name.
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Update Cell</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
cell	`CellModel`	Cell properties.
address (optional)	`string`	Address to update.

Returns void

updateRange

This method is used to update the Range property in specified sheetIndex.

Parameter	Type	Description
range	`RangeModel`	Specifies the range properties to update.
sheetIdx (optional)	`number`	Specifies the sheetIdx to update.

Returns void

updateUndoRedoCollection

To update the undo redo collection in spreadsheet.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
       actionComplete: function (args) {
        var actionEvents = args;
         var spreadsheet = this.$refs.spreadsheet;
        if (actionEvents.eventArgs.action == "customCSS") {
            var Element = spreadsheet.ej2Instances.getCell(actionEvents.eventArgs.rowIdx,actionEvents.eventArgs.colIdx);
            if (actionEvents.eventArgs.requestType == "undo") {
                removeClass([Element],'customClass'); // To remove the custom class in undo action
            }
            else {
                addClass([Element],'customClass');// To add the custom class in redo action
            }
        }
    },

    updateCollection: function() {
    var spreadsheet = this.$refs.spreadsheet;
    var cell = spreadsheet.ej2Instances.getActiveSheet().activeCell;
    var cellIdx = getRangeIndexes(cell);
    var Element = spreadsheet.ej2Instances.getCell(cellIdx[0], cellIdx[1]);
    if (!Element.classList.contains("customClass")) {
        addClass([Element], 'customClass'); // To add the custom class in active cell element
        spreadsheet.ej2Instances.updateUndoRedoCollection({ eventArgs: { class: 'customClass', rowIdx: cellIdx[0], colIdx: cellIdx[1], action: 'customCSS' } }); // To update the undo redo collection
    }
   }
  }
});
</script>
<template>
  <div class="control-section">
     <ejs-button id='customBtn' v-on:click.native="updateCollection">Add/remove Class</ejs-button>
    <ejs-spreadsheet ref="spreadsheet" :actionComplete="actionComplete">
    </ejs-spreadsheet>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";

.customClass.e-cell {
            background-color: red;
}
</style>

Parameter	Type	Description
args	`{ [key: string]: Object }`	options for undo redo.

Returns void

wrap

This method is used to wrap/unwrap the text content of the cell.

<script>
import Vue from "vue";
import { enableRipple } from "@syncfusion/ej2-base";
import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";

Vue.use(SpreadsheetPlugin);

export default Vue.extend({
  data: function() {
    return {
    };
  },
  methods: {
     onClick: function() {
        // To wrap/unwrap the text content of the cell.
        this.$refs.spreadsheet.wrap("B5", true); // address, set true if the text content of the cell to be wrapped.
    }
  }
});
</script>
<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
     <button @click="onClick">Wrap</button>
  </div>
</template>
<style>
@import "../node_modules/@syncfusion/ej2-vue-spreadsheet/styles/material.css";
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-grids/styles/material.css";
@import "../node_modules/@syncfusion/ej2-spreadsheet/styles/material.css";
</style>

Parameter	Type	Description
address	`string`	Address of the cell to be wrapped.
wrap (optional)	`boolean`	Set `false` if the text content of the cell to be unwrapped.

Returns void

Events

actionBegin
`EmitType<BeforeCellFormatArgs`|`BeforeOpenEventArgs`|`BeforeSaveEventArgs`|`BeforeSelectEventArgs`|`BeforeSortEventArgs`|`CellEditEventArgs`|`MenuSelectEventArgs>`

Triggers when the Spreadsheet actions (such as editing, formatting, sorting etc..) are starts.

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

new Spreadsheet({
      actionBegin: (args: BeforeCellFormatArgs|BeforeOpenEventArgs|BeforeSaveEventArgs|BeforeSelectEventArgs
                   |BeforeSortEventArgs|CellEditEventArgs|MenuSelectEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

actionComplete
`EmitType<SortEventArgs`|`CellSaveEventArgs`|`SaveCompleteEventArgs`|Object``>

Triggers when the spreadsheet actions (such as editing, formatting, sorting etc..) gets completed.

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

new Spreadsheet({
      actionComplete: (args: SortEventArgs|CellSaveEventArgs|SaveCompleteEventArgs|Object) => {
      }
     ...
 }, '#Spreadsheet');

afterHyperlinkClick
`EmitType<AfterHyperlinkArgs>`

Triggers when the Hyperlink function gets completed.

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

new Spreadsheet({
      afterHyperlinkClick: (args: AfterHyperlinkArgs ) => {
      }
     ...
 }, '#Spreadsheet');

afterHyperlinkCreate
`EmitType<AfterHyperlinkArgs>`

Triggers after the hyperlink inserted.

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

new Spreadsheet({
      afterHyperlinkCreate: (args: afterHyperlinkArgs ) => {
      }
     ...
 }, '#Spreadsheet');

beforeCellFormat
`EmitType<BeforeCellFormatArgs>`

Triggers before the cell format applied to the cell.

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

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

beforeCellRender
`EmitType<CellRenderEventArgs>`

Triggers before the cell appended to the DOM.

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

new Spreadsheet({
     beforeCellRender: (args: CellRenderEventArgs) => {
     }
     ...
 }, '#Spreadsheet');

beforeCellSave
`EmitType<CellEditEventArgs>`

Triggers when before the cell is saved.

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

new Spreadsheet({
      beforeCellSave: (args: CellEditEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

beforeCellUpdate
`EmitType<BeforeCellUpdateArgs>`

Triggers before changing any cell properties.

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

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

beforeConditionalFormat
`EmitType<ConditionalFormatEventArgs>`

Triggers before apply or remove the conditional format from a cell in a range.

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

new Spreadsheet({
      beforeConditionalFormat: (args: ConditionalFormatEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

beforeDataBound
`EmitType<Object>`

Triggers before the data is populated to the worksheet.

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

new Spreadsheet({
      beforeDataBound: (args: Object) => {
      }
     ...
 }, '#Spreadsheet');

beforeHyperlinkClick
`EmitType<BeforeHyperlinkArgs>`

Triggers when the Hyperlink is clicked.

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

new Spreadsheet({
      beforeHyperlinkClick: (args: BeforeHyperlinkArgs ) => {
      }
     ...
 }, '#Spreadsheet');

beforeHyperlinkCreate
`EmitType<BeforeHyperlinkArgs>`

Triggers before insert a hyperlink.

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

new Spreadsheet({
      beforeHyperlinkCreate: (args: BeforeHyperlinkArgs ) => {
      }
     ...
 }, '#Spreadsheet');

beforeOpen
`EmitType<BeforeOpenEventArgs>`

Triggers before opening an Excel file.

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

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

beforeSave
`EmitType<BeforeSaveEventArgs>`

Triggers before saving the Spreadsheet as Excel file.

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

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

beforeSelect
`EmitType<BeforeSelectEventArgs>`

Triggers before the cell or range of cells being selected.

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

new Spreadsheet({
     beforeSelect: (args: BeforeSelectEventArgs) => {
     }
     ...
 }, '#Spreadsheet');

beforeSort
`EmitType<BeforeSortEventArgs>`

Triggers before sorting the specified range.

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

new Spreadsheet({
      beforeSort: (args: BeforeSortEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

cellEdit
`EmitType<CellEditEventArgs>`

Triggers when the cell is being edited.

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

new Spreadsheet({
      cellEdit: (args: CellEditEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

cellEditing
`EmitType<CellEditEventArgs>`

Triggers every time a request is made to access cell information. This will be triggered when editing a cell.

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

new Spreadsheet({
      cellEditing: (args: CellEditEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

cellSave
`EmitType<CellSaveEventArgs>`

Triggers when the edited cell is saved.

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

new Spreadsheet({
      cellSave: (args: CellSaveEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

contextMenuBeforeClose
`EmitType<BeforeOpenCloseMenuEventArgs>`

Triggers before closing the context menu.

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

new Spreadsheet({
      contextMenuBeforeClose: (args: BeforeOpenCloseMenuEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

contextMenuBeforeOpen
`EmitType<BeforeOpenCloseMenuEventArgs>`

Triggers before opening the context menu and it allows customizing the menu items.

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

new Spreadsheet({
      contextMenuBeforeOpen: (args: BeforeOpenCloseMenuEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

contextMenuItemSelect
`EmitType<MenuSelectEventArgs>`

Triggers when the context menu item is selected.

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

new Spreadsheet({
      contextMenuItemSelect: (args: MenuSelectEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

created
`EmitType<Event>`

Triggers when the component is created.

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

new Spreadsheet({
      created: () => {
      }
     ...
 }, '#Spreadsheet');

dataBound
`EmitType<Object>`

Triggers when the data is populated in the worksheet.

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

new Spreadsheet({
      dataBound: (args: Object) => {
      }
     ...
 }, '#Spreadsheet');

dataSourceChanged
`EmitType<DataSourceChangedEventArgs>`

Triggers during data changes when the data is provided as dataSource in the Spreadsheet.

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

new Spreadsheet({
      dataSourceChanged: (args: DataSourceChangedEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

dialogBeforeOpen
`EmitType<DialogBeforeOpenEventArgs>`

Triggers before opening the dialog box.

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

new Spreadsheet({
      dialogBeforeOpen: (args: DialogBeforeOpenEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

fileMenuBeforeClose
`EmitType<BeforeOpenCloseMenuEventArgs>`

Triggers before closing the file menu.

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

new Spreadsheet({
      fileMenuBeforeClose: (args: BeforeOpenCloseMenuEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

fileMenuBeforeOpen
`EmitType<BeforeOpenCloseMenuEventArgs>`

Triggers before opening the file menu.

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

new Spreadsheet({
      fileMenuBeforeOpen: (args: BeforeOpenCloseMenuEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

fileMenuItemSelect
`EmitType<MenuSelectEventArgs>`

Triggers when the file menu item is selected.

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

new Spreadsheet({
      fileMenuItemSelect: (args: MenuSelectEventArgs) => {
      }
     ...
 }, '#Spreadsheet');

openComplete
`EmitType<Object>`

Triggers when the spreadsheet importing gets completed.

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

new Spreadsheet({
      openComplete: (args: Object) => {
      }
     ...
 }, '#Spreadsheet');

openFailure
`EmitType<OpenFailureArgs>`

Triggers when the opened Excel file fails to load.

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

new Spreadsheet({
      openFailure: (args: OpenFailureArgs) => {
      }
     ...
 }

SpreadsheetComponent

Properties

activeSheetIndex number

allowAutoFill boolean

allowCellFormatting boolean

allowChart boolean

allowConditionalFormat boolean

allowDataValidation boolean

allowDelete boolean

allowEditing boolean

allowFiltering boolean

allowFindAndReplace boolean

allowFreezePane boolean

allowHyperlink boolean

allowImage boolean

allowInsert boolean

allowMerge boolean

allowNumberFormatting boolean

allowOpen boolean

allowResizing boolean

allowSave boolean

allowScrolling boolean

allowSorting boolean

allowUndoRedo boolean

allowWrap boolean

autoFillSettings AutoFillSettingsModel

cellStyle CellStyleModel

cssClass string

definedNames DefineNameModel[]

enableClipboard boolean

enableContextMenu boolean

enableKeyboardNavigation boolean

enableKeyboardShortcut boolean

enablePersistence boolean

enableRtl boolean

height string | number

isProtected boolean

locale string

openUrl string

password string

saveUrl string

scrollSettings ScrollSettingsModel

selectionSettings SelectionSettingsModel

sheets SheetModel[]

showAggregate boolean

showFormulaBar boolean

showRibbon boolean

showSheetTabs boolean

width string | number

Methods

Unfreeze

addContextMenuItems

addCustomFunction

addDataValidation

addDefinedName

addFileMenuItems

addHyperlink

addInvalidHighlight

addRibbonTabs

addToolbarItems

appendTo

applyFilter

autoFill

autoFit

cellFormat

clear

clearConditionalFormat

clearFilter

closeEdit

computeExpression

conditionalFormat

copy

cut

delete

deleteChart

deleteImage

destroy

duplicateSheet

enableContextMenuItems

enableFileMenuItems

activeSheetIndex
`number`

allowAutoFill
`boolean`

allowCellFormatting
`boolean`

allowChart
`boolean`

allowConditionalFormat
`boolean`

allowDataValidation
`boolean`

allowDelete
`boolean`

allowEditing
`boolean`

allowFiltering
`boolean`

allowFindAndReplace
`boolean`

allowFreezePane
`boolean`

allowHyperlink
`boolean`

allowImage
`boolean`

allowInsert
`boolean`

allowMerge
`boolean`

allowNumberFormatting
`boolean`

allowOpen
`boolean`

allowResizing
`boolean`

allowSave
`boolean`

allowScrolling
`boolean`

allowSorting
`boolean`

allowUndoRedo
`boolean`

allowWrap
`boolean`

autoFillSettings
`AutoFillSettingsModel`

cellStyle
`CellStyleModel`

cssClass
`string`

definedNames
`DefineNameModel[]`

enableClipboard
`boolean`

enableContextMenu
`boolean`

enableKeyboardNavigation
`boolean`

enableKeyboardShortcut
`boolean`

enablePersistence
`boolean`

enableRtl
`boolean`

height
`string` | `number`

isProtected
`boolean`

locale
`string`

openUrl
`string`

password
`string`

saveUrl
`string`

scrollSettings
`ScrollSettingsModel`

selectionSettings
`SelectionSettingsModel`

sheets
`SheetModel[]`

showAggregate
`boolean`

showFormulaBar
`boolean`

showRibbon
`boolean`

showSheetTabs
`boolean`

width
`string` | `number`

actionBegin
`EmitType<BeforeCellFormatArgs`|`BeforeOpenEventArgs`|`BeforeSaveEventArgs`|`BeforeSelectEventArgs`|`BeforeSortEventArgs`|`CellEditEventArgs`|`MenuSelectEventArgs>`

actionComplete
`EmitType<SortEventArgs`|`CellSaveEventArgs`|`SaveCompleteEventArgs`|Object``>

afterHyperlinkClick
`EmitType<AfterHyperlinkArgs>`

afterHyperlinkCreate
`EmitType<AfterHyperlinkArgs>`

beforeCellFormat
`EmitType<BeforeCellFormatArgs>`

beforeCellRender
`EmitType<CellRenderEventArgs>`

beforeCellSave
`EmitType<CellEditEventArgs>`

beforeCellUpdate
`EmitType<BeforeCellUpdateArgs>`

beforeConditionalFormat
`EmitType<ConditionalFormatEventArgs>`