SpreadsheetComponent

<ejs-spreadsheet></ejs-spreadsheet>

<template>
  <!-- Set 'Car Stock Report' sheet as active sheet. -->
  <ejs-spreadsheet :activeSheetIndex="1">
    <e-sheets>
      <e-sheet name="Car Sales Report"> </e-sheet>
      <e-sheet name="Car Stock Report"> </e-sheet>
    </e-sheets>
  </ejs-spreadsheet>
</template>

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

  Vue.use(SpreadsheetPlugin);
  export default Vue.extend({});
</script>

<template>
  <ejs-spreadsheet :autoFill="true" :autoFillSettings="{ autoFillSettings }"></ejs-spreadsheet>
</template>

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

  export default Vue.extend({
    data: () => {
      return {
        // Configure the autofill settings.
        autoFillSettings: { fillType: "CopyCells", showFillOptions: true },
      };
    },
  });
</script>

<template>
  <ejs-spreadsheet :cellStyle="cellStyle"></ejs-spreadsheet>
</template>

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

  export default Vue.extend({
    data: () => {
      return {
        // Specifies the cellStyle settings.
        cellStyle: {
          fontWeight: "bold",
          fontSize: "12pt",
          fontStyle: "italic",
          textIndent: "2pt",
          backgroundColor: "#4b5366",
          color: "#ffffff",
        },
      };
    },
  });
</script>

<template>
  <ejs-spreadsheet :cssClass="cssClass"> </ejs-spreadsheet>
</template>

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

  export default Vue.extend({
    data: () => {
      return {
        // Specifies the custom CSS class.
        cssClass: "e-custom1 e-custom2",
      };
    },
  });
</script>

<template>
  <ejs-spreadsheet :definedNames="definedNames"></ejs-spreadsheet>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";
  Vue.use(SpreadsheetPlugin);
  export default Vue.extend({
    data: () => {
      return {
        // Set the specified cell range's name to 'Group1'.
        definedNames: [{ name: "Group1", refersTo: "Sheet1!A1:B5" }],
      };
    },
  });
</script>

<template>
  <ejs-spreadsheet height="600px"> </ejs-spreadsheet>
</template>

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

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({});
</script>

<template>
  <ejs-spreadsheet :scrollSettings="scrollSettings"> </ejs-spreadsheet>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";
  Vue.use(SpreadsheetPlugin);
  
  export default Vue.extend({
    data: () => {
      return {
        // Configure the scroll settings.
        scrollSettings: {
          isFinite: true,
          enableVirtualization: false
        },
      };
    },
  });
</script>

<template>
  <ejs-spreadsheet :selectionSettings="selectionSettings"> </ejs-spreadsheet>
</template>

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

  export default Vue.extend({
    data: () => {
      return {
        // Configure the selection settings.
        selectionSettings: { mode: "None" },
      };
    },
  });
</script>

<template>
  <!-- Specifies the sheets and its options. -->
  <ejs-spreadsheet>
    <e-sheets>
      <e-sheet name="Car Sales Report">
        <e-ranges>
          <e-range :dataSource="dataSource"></e-range>
        </e-ranges>
        <e-rows>
          <e-row :index="rowIndex" :cells="cells"></e-row>
        </e-rows>
        <e-columns>
          <e-column :width="width1"></e-column>
          <e-column :width="width2"></e-column>
          <e-column :width="width3"></e-column>
        </e-columns>
      </e-sheet>
    </e-sheets>
  </ejs-spreadsheet>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";
  import { salesData } from "./data";
  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    data: () => {
      return {
        dataSource: salesData,
        rowIndex: 30,
        colIndex: 4,
        cells: [
          {
            index: 4,
            value: "Total Amount:",
            style: { fontWeight: "bold", textAlign: "right" },
          },
          { formula: "=SUM(F2:F30)", style: { fontWeight: "bold" } },
        ],
        width1: 180,
        width2: 130,
        width3: 120,
        openUrl:
          "https://services.syncfusion.com/vue/production/api/spreadsheet/open",
        saveUrl:
          "https://services.syncfusion.com/vue/production/api/spreadsheet/save",
      };
    },
  });
</script>

<template>
  <!-- Specifies the width -->
  <ejs-spreadsheet width="600px"></ejs-spreadsheet>
</template>

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

  export default Vue.extend({});
</script>

<template>
  <ejs-spreadsheet
    ref="spreadsheet"
    :contextMenuBeforeOpen="contextMenuBeforeOpen"
  ></ejs-spreadsheet>
</template>

<script>
  import Vue from "vue";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";
  import { closest } from "@syncfusion/ej2-base";
  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    data: function () {
      return {};
    },
    methods: {
      contextMenuBeforeOpen: function (args) {
        const spreadsheet = this.$refs.spreadsheet;
        // Add context menu items to the sheet content context menu.
        if (closest(args.event.target, ".e-sheet-content")) {
          spreadsheet.addContextMenuItems(
            [{ text: "Custom Item" }],
            "Paste Special",
            false
          );
        }
        // Add context menu items to the column header context menu.
        else if (closest(args.event.target, ".e-colhdr-table")) {
          spreadsheet.addContextMenuItems(
            [{ text: "Custom Column" }],
            "Insert Column",
            false
          );
        }
        // Add context menu items to the row header context menu.
        else if (closest(args.event.target, ".e-rowhdr-table")) {
          spreadsheet.addContextMenuItems(
            [{ text: "Custom Row" }],
            "Insert Row",
            false
          );
        }
        // Add context menu items to the sheet tab context menu.
        else if (closest(args.event.target, ".e-toolbar-item")) {
          spreadsheet.addContextMenuItems(
            [{ text: "Custom Tab" }],
            "Insert",
            false
          );
        }
      },
    },
  });
</script>

<template>
  <ejs-spreadsheet ref="spreadsheet" :created="created"> </ejs-spreadsheet>
</template>

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

  export default Vue.extend({
    data: function () {
      return {};
    },
    mounted() {
      window.SQRTHandler = (num) => Math.sqrt(num);
    },
    methods: {
      created: function () {
        // Add custom library function to compute the square root of a number.
        this.$refs.spreadsheet.addCustomFunction("SQRTHandler", "SQRT");
      },
    },
  });
</script>

<template>
  <ejs-spreadsheet ref="spreadsheet" :created="created"> </ejs-spreadsheet>
</template>

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

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    data: function () {
      return {};
    },
    methods: {
      created: function () {
        const spreadsheet = this.$refs.spreadsheet;
        // Add data validation with the specified validation rules to the range.
        spreadsheet.addDataValidation(
          { type: "TextLength", operator: "LessThanOrEqualTo", value1: "4" },
          "A2:A5"
        );
        spreadsheet.addDataValidation(
          { type: "WholeNumber", operator: "NotEqualTo", value1: "1" },
          "B2:B5"
        );
        spreadsheet.addDataValidation(
          { type: "Date", operator: "NotEqualTo", value1: "04/11/2019" },
          "F2:F5"
        );
        spreadsheet.addDataValidation(
          {
            type: "Time",
            operator: "Between",
            value1: "10:00:00 AM",
            value2: "11:00:00 AM",
          },
          "G2:G5"
        );
        spreadsheet.addDataValidation(
          { type: "Decimal", operator: "LessThan", value1: "100000.00" },
          "H2:H5"
        );
        // Add a cell range as a data source to the list validation dropdown.
        spreadsheet.addDataValidation(
          { type: "List", inCellDropDown: true, value1: "=Sheet1!A2:A3" },
          "J2:J5"
        );
        spreadsheet.addDataValidation(
          { type: "List", inCellDropDown: true, value1: "10, 20, 30" },
          "I2:I5"
        );
      },
    },
  });
</script>

<template>
  <ejs-spreadsheet ref="spreadsheet" :created="created"> </ejs-spreadsheet>
</template>

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

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    data: function () {
      return {};
    },
    methods: {
      created: function () {
        // Set the specified cell range's name to 'Group1'.
        this.$refs.spreadsheet.addDefinedName({
          name: "Group1",
          refersTo: "=Sheet1!B2",
        });
      },
    },
  });
</script>

<template>
  <ejs-spreadsheet ref="spreadsheet" :created="created"> </ejs-spreadsheet>
</template>

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

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    data: function () {
      return {};
    },
    methods: {
      created: function () {
        // Place the 'Print' option before the 'Save As' option in the File menu.
        this.$refs.spreadsheet.addFileMenuItems(
          [{ text: "Print" }],
          "Save As",
          false
        );
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
    <button @click="onClick">Add Hyperlink</button>
  </div>
</template>

<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 () {
        // Insert a hyperlink into the 'A5' cell.
        this.$refs.spreadsheet.addHyperlink("https://www.google.com/", "A5");
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet" :created="created">
      <e-sheets>
        <e-sheet name="Car Sales Report">
          <e-ranges>
            <e-range :dataSource="dataSource"></e-range>
          </e-ranges>
        </e-sheet>
      </e-sheets>
    </ejs-spreadsheet>
    <button @click="onClick">Add Invalid Highlight</button>
  </div>
</template>

<script>
  import Vue from "vue";
  import { salesData } from "./data";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";
  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    data: () => {
      return {
        dataSource: salesData,
      };
    },
    methods: {
      created: function () {
        // Add data validation to the specified range.
        this.$refs.spreadsheet.addDataValidation(
          { type: "Decimal", operator: "LessThan", value1: "1000" },
          "F2:F5"
        );
      },
      onClick: function () {
        // Highlight Invalid Data with the specified range.
        this.$refs.spreadsheet.addInvalidHighlight("F2:F5");
      },
    },
  });
</script>

<template>
  <ejs-spreadsheet ref="spreadsheet" :created="created"> </ejs-spreadsheet>
</template>

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

  export default Vue.extend({
    methods: {
      created: function () {
        // Place the 'Custom' ribbon tab before the existing 'Data' tab.
        this.$refs.spreadsheet.addRibbonTabs(
          [
            {
              header: { text: "Custom" },
              content: [{ text: "Custom", tooltipText: "Custom Button" }],
            },
          ],
          "Data"
        );
      },
    },
  });
</script>

<template>
  <ejs-spreadsheet ref="spreadsheet" :created="created"> </ejs-spreadsheet>
</template>

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

  export default Vue.extend({
    methods: {
      created: function () {
        // Place the custom toolbar items to the 'Home' tab ribbon toolbar.
        this.$refs.spreadsheet.addToolbarItems(
          "Home",
          [
            { type: "Separator" },
            { text: "Custom", tooltipText: "Custom Btn" },
          ],
          15
        );
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet">
      <e-sheets>
        <e-sheet name="Car Sales Report">
          <e-ranges>
            <e-range :dataSource="dataSource"></e-range>
          </e-ranges>
        </e-sheet>
      </e-sheets>
    </ejs-spreadsheet>
    <button @click="onClick">Apply Filter</button>
  </div>
</template>

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

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    data: () => {
      return {
        dataSource: salesData,
      };
    },
    methods: {
      onClick: function () {
        const spreadsheet = this.$refs.spreadsheet;
        // The filter UI is applied to the range of cells in the sheet.
        const sheet = spreadsheet.ej2Instances.getActiveSheet();
        const cell = getCellIndexes(sheet.activeCell);
        const predicates = [
          {
            field: getColumnHeaderText(cell[1] + 1),
            operator: "equal",
            value: getCell(cell[0], cell[1], sheet).value,
            matchCase: false,
          },
        ];
        // Specifies the predicates and cell range.
        spreadsheet.applyFilter(predicates, "A1:F1");
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
    <button @click="onClick">AutoFit Content</button>
  </div>
</template>

<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 () {
        const spreadsheet = this.$refs.spreadsheet;
        // To auto fit the columns content.
        spreadsheet.autoFit("D:F");
        // To auto fit the rows content.
        spreadsheet.autoFit("5:10");
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"> </ejs-spreadsheet>
    <button @click="onClick">Apply Cell Format</button>
  </div>
</template>

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

  export default Vue.extend({
    methods: {
      onClick: function () {
        const spreadsheet = this.$refs.spreadsheet;
        // Apply the styles to the cells in the specified range.
        spreadsheet.cellFormat(
          {
            fontWeight: "bold",
            fontSize: "12pt",
            backgroundColor: "#279377",
            color: "#ffffff",
          },
          "A2:E2"
        );
        spreadsheet.cellFormat(
          { verticalAlign: "middle", fontFamily: "Axettac Demo" },
          "A2:E12"
        );
        spreadsheet.cellFormat({ textAlign: "center" }, "A2:A12");
        // Apply text-indent to 2nd & 4th columns.
        const 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">Clear</button>
  </div>
</template>

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

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        const spreadsheet = this.$refs.spreadsheet;
        // Clear the content within the specified range.
        spreadsheet.clear({ type: "Clear Contents", range: "A1:A10" });
        // Clear the formats used in the given range.
        spreadsheet.clear({ type: "Clear Formats", range: "A1:A10" });
        // Remove all hyperlinks from the provided range.
        spreadsheet.clear({ type: "Clear Hyperlinks", range: "A1:A10" });
        // Clear the content, formats and hyperlinks applied in the given range.
        spreadsheet.clear({ type: "Clear All", range: "B1:B10" });
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet" :created="created">
      <e-sheets>
        <e-sheet name="Car Sales Report">
          <e-ranges>
            <e-range :dataSource="dataSource"></e-range>
          </e-ranges>
        </e-sheet>
      </e-sheets>
    </ejs-spreadsheet>
    <button @click="onClick">Clear Conditional Format</button>
  </div>
</template>

<script>
  import Vue from "vue";
  import { salesData } from "./data";
  import { SpreadsheetPlugin } from "@syncfusion/ej2-vue-spreadsheet";
  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    data: () => {
      return {
        dataSource: salesData,
      };
    },
    methods: {
      created: function () {
        const spreadsheet = this.$refs.spreadsheet;
        // Highlight the cells with a value greater than the specified value.
        spreadsheet.conditionalFormat({
          type: "GreaterThan",
          cFColor: "RedFT",
          value: "10/8/2014",
          range: "E2:E30",
        });
        // Highlight the cells that have a value within the specified range.
        spreadsheet.conditionalFormat({
          type: "Between",
          cFColor: "GreenFT",
          value: "11/24/2014,06/26/2023",
          range: "F2:F30",
        });
      },
      onClick: function () {
        const spreadsheet = this.$refs.spreadsheet;
        // Clear the conditional format within the range specified.
        spreadsheet.clearConditionalFormat("E2:E30");
        // The range can also be specified using the sheet name.
        spreadsheet.clearConditionalFormat("Sheet1!F2:F30");
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet" :created="created">
      <e-sheets>
        <e-sheet name="Car Sales Report">
          <e-ranges>
            <e-range :dataSource="dataSource"></e-range>
          </e-ranges>
        </e-sheet>
      </e-sheets>
    </ejs-spreadsheet>
    <button @click="onClick">Clear Filter</button>
  </div>
</template>

<script>
  import Vue from "vue";
  import { salesData } from "./data";
  import {
    SpreadsheetPlugin,
    getCellIndexes,
    getCell,
    getColumnHeaderText,
  } from "@syncfusion/ej2-vue-spreadsheet";
  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    data: () => {
      return {
        dataSource: salesData,
      };
    },
    methods: {
      created: function () {
        const spreadsheet = this.$refs.spreadsheet;
        // The filter UI is applied to the range of cells in the sheet.
        const sheet = spreadsheet.ej2Instances.getActiveSheet();
        const cell = getCellIndexes(sheet.activeCell);
        const predicates = [
          {
            field: getColumnHeaderText(cell[1] + 1),
            operator: "equal",
            value: getCell(cell[0], cell[1], sheet).value,
            matchCase: false,
          },
        ];
        // Specifies the predicates and cell range.
        spreadsheet.applyFilter(predicates, "A1:F1");
      },
      onClick: function () {
        this.$refs.spreadsheet.clearFilter();
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"> </ejs-spreadsheet>
    <button @click="onClick">Cancel Edit</button>
  </div>
</template>

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

  export default Vue.extend({
    methods: {
      onClick: function () {
        this.$refs.spreadsheet.closeEdit();
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"> </ejs-spreadsheet>
    <button @click="onClick">To Compute Expression</button>
  </div>
</template>

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

  export default Vue.extend({
    methods: {
      onClick: function () {
        const spreadsheet = this.$refs.spreadsheet;
        // Calculate the result of an arithmetic expression or formula.
        spreadsheet.computeExpression("522+1");
        spreadsheet.computeExpression("=SUM(F2:F3)");
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"> </ejs-spreadsheet>
    <button @click="onClick">Add Conditional Format</button>
  </div>
</template>

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

  export default Vue.extend({
    methods: {
      onClick: function () {
        const 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">
      <e-sheets>
        <e-sheet name="Car Sales Report"> </e-sheet>
      </e-sheets>
    </ejs-spreadsheet>
    <button @click="onClick">Copy Cell</button>
  </div>
</template>

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

  export default Vue.extend({
    methods: {
      onClick: function () {
        const spreadsheet = this.$refs.spreadsheet;
        // To copy the selected cell.
        spreadsheet.copy();
        // To copy the specified cell.
        spreadsheet.copy("A2");
        // You can specify the address with sheet name.
        spreadsheet.copy("Car Sales Report!B2");
      },
    },
  });
</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">To Cut</button>
  </div>
</template>

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

  export default Vue.extend({
    methods: {
      onClick: function () {
        const spreadsheet = this.$refs.spreadsheet;
        // To cut the selected cell.
        spreadsheet.cut();
        // To cut the specified cell.
        spreadsheet.cut("A2");
        // You can specify the address with sheet name.
        spreadsheet.cut("Car Sales Report!B2");
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"> </ejs-spreadsheet>
    <button @click="onClick">Delete Row & Column</button>
  </div>
</template>

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

  export default Vue.extend({
    methods: {
      onClick: function () {
        const spreadsheet = this.$refs.spreadsheet;
        // To delete rows, columns, and sheets with the specified index.
        spreadsheet.delete(1, 1, "Row", "Sheet1");
        spreadsheet.delete(2, 2, "Column", "Sheet1");
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet" :created="created"> </ejs-spreadsheet>
    <button @click="onClick">Delete Chart</button>
  </div>
</template>

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

  export default Vue.extend({
    methods: {
      onClick: function () {
        // Delete the chart with the specified chart element ID from the spreadsheet.
        this.$refs.spreadsheet.deleteChart("Chart");
      },
      created: function () {
        // Insert a chart into a spreadsheet using the chart options specified.
        this.$refs.spreadsheet.insertChart([
          {
            type: "Line",
            theme: "Material",
            isSeriesInRows: false,
            range: "A1:B5",
            id: "Chart",
          },
        ]);
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet" :created="created"> </ejs-spreadsheet>
    <button @click="onClick">Delete Image</button>
  </div>
</template>

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

  export default Vue.extend({
    methods: {
      onClick: function () {
        // Delete the image with the specified image element ID from the spreadsheet.
        this.$refs.spreadsheet.deleteImage(
          "spreadsheet_overlay_picture_1",
          "A3"
        );
      },
      created: function () {
        // Insert a image into a spreadsheet using the image options specified.
        this.$refs.spreadsheet.insertImage(
          [
            {
              src: "https://www.w3schools.com/images/w3schools_green.jpg",
              height: 400,
              width: 400,
            },
          ],
          "A3"
        );
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
    <button @click="onClick">Destroy Spreadsheet</button>
  </div>
</template>

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

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        this.$refs.spreadsheet.destroy();
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
    <button @click="onClick">Make Duplicate Sheet</button>
  </div>
</template>

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

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        const 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 index in the spreadsheet.
        spreadsheet.duplicateSheet(0);
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet" :contextMenuBeforeOpen="contextMenuBeforeOpen">
    </ejs-spreadsheet>
  </div>
</template>

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

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      contextMenuBeforeOpen: function () {
        const spreadsheet = this.$refs.spreadsheet;
        // Disable the 'Hyperlink' context menu option.
        spreadsheet.enableContextMenuItems(["Hyperlink"], false, false);
        // You can disable the option by specifying the context menu option id.
        spreadsheet.enableContextMenuItems(
          ["spreadsheet_cmenu_copy"],
          false,
          true
        );
      },
    },
  });
</script>

<template>
  <ejs-spreadsheet ref="spreadsheet" :fileMenuBeforeOpen="fileMenuBeforeOpen">
  </ejs-spreadsheet>
</template>

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

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      fileMenuBeforeOpen: function () {
        // Disable the 'New' option in the File menu.
        this.$refs.spreadsheet.enableFileMenuItems(["New"], false, false);
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
    <button @click="onClick">Disable Home Ribbon Tab</button>
  </div>
</template>

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

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        // Disable the 'Home' option in the Ribbon.
        this.$refs.spreadsheet.enableRibbonTabs(["Home"], false);
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
    <button @click="onClick">To Enable/Disable Toolbar Items</button>
  </div>
</template>

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

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        const spreadsheet = this.$refs.spreadsheet;
        // Disable the list of toolbar items in the 'Home' ribbon tab.
        spreadsheet.enableToolbarItems(
          "Home",
          ["spreadsheet_line-through"],
          false
        );
        spreadsheet.enableToolbarItems("Home", [3, 4], false);
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
    <button @click="onClick">End Edit</button>
  </div>
</template>

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

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        // If the spreadsheet is editable, you can use this method to save the cell.
        this.$refs.spreadsheet.endEdit();
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
    <button @click="onClick">To Find</button>
  </div>
</template>

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

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        // To find the cell value specified.
        const 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">To Find All</button>
  </div>
</template>

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

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        // To find all values that match within a sheet or workbook.
        this.$refs.spreadsheet.findAll(
          "shoes",
          "Sheet",
          false,
          false,
          spreadsheet.ej2Instances.getActiveSheet().id - 1
        );
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
    <button @click="onClick">Get Data</button>
  </div>
</template>

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

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        // Return the specified cell address data as JSON.
        const spreadsheet = this.$refs.spreadsheet;
        spreadsheet.getData("Sheet1!A1:B2").then((data) => console.log(data));
        spreadsheet.getData("A1:B2").then((data) => console.log(data));
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
    <button @click="onClick">Get Display Text</button>
  </div>
</template>

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

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        const spreadsheet = this.$refs.spreadsheet;
        // Get the cell model for the given row, column, and sheet indexes.
        const cell = getCell(0, 0, spreadsheet.ej2Instances.getActiveSheet());
        // To get the formatted cell value, specify the cell model.
        spreadsheet.getDisplayText(cell);
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet ref="spreadsheet"></ejs-spreadsheet>
    <button @click="onClick">GoTo</button>
  </div>
</template>

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

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      onClick: function () {
        const spreadsheet = this.$refs.spreadsheet;
        // To navigate to a cell address within a workbook.
        spreadsheet.goTo("B1");
        // You can navigate to a specific cell address by specifying the sheet name as well as the cell address.
        spreadsheet.goTo("Sheet2!B1");
      },
    },
  });
</script>

<template>
  <div class="control-section">
    <ejs-spreadsheet
      ref="spreadsheet"
      :fileMenuBeforeOpen="fileMenuBeforeOpen"
    ></ejs-spreadsheet>
  </div>
</template>

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

  Vue.use(SpreadsheetPlugin);

  export default Vue.extend({
    methods: {
      fileMenuBeforeOpen: function () {
        //To show/hide the file menu item.
        this.$refs.spreadsheet.hideFileMenuItems(["PDF Document"], true);
      },
    },
  });
</script>