# spreadsheet-editor-default

> Spreadsheet editor with sheets, ranges, formulas, cell styles, and named ranges.

**Framework:** vue  **Component:** SpreadsheetEditor  **Variant:** default

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/vue/spreadsheet-editor-default.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-vue-spreadsheet
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/spreadsheet-editor-default/SpreadSheetEditor.vue

```vue
<template>
  <div class="control-section">
    <div id="spreadsheet-default-section">
      <ejs-spreadsheet ref="spreadsheet" :openUrl="openUrl" :saveUrl="saveUrl" :created="created">
        <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="width2"></e-column>
              <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>
    </div>

  </div>
</template>

<script>
import { SpreadsheetComponent, SheetDirective, RowsDirective, RowDirective, SheetsDirective, ColumnsDirective, ColumnDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-vue-spreadsheet';

export default {
    components: {
    'ejs-spreadsheet': SpreadsheetComponent,
    'e-sheet': SheetDirective,
    'e-sheets': SheetsDirective,
    'e-row': RowDirective,
    'e-rows': RowsDirective,
    'e-column': ColumnDirective,
    'e-columns': ColumnsDirective,
    'e-range': RangeDirective,
    'e-ranges': RangesDirective
   },
   data: () => {
    return {
      dataSource: [
        { 'Customer Name': 'Romona Heaslip',  Model: 'Taurus',        Color: 'Aquamarine', 'Payment Mode': 'Debit Card',        'Delivery Date': '07-11-2015', Amount: 8529.22 },
        { 'Customer Name': 'Clare Batterton', Model: 'Sparrow',       Color: 'Pink',       'Payment Mode': 'Cash On Delivery',  'Delivery Date': '07-13-2016', Amount: 17866.19 },
        { 'Customer Name': 'Eamon Traise',    Model: 'Grand Cherokee', Color: 'Blue',     'Payment Mode': 'Net Banking',       'Delivery Date': '09-04-2015', Amount: 13853.09 },
        { 'Customer Name': 'Julius Gorner',   Model: 'GTO',           Color: 'Aquamarine', 'Payment Mode': 'Credit Card',       'Delivery Date': '12-15-2017', Amount: 2338.74 },
        { 'Customer Name': 'Jenna Schoolfield', Model: 'LX',          Color: 'Yellow',    'Payment Mode': 'Credit Card',       'Delivery Date': '10-08-2014', Amount: 9578.45 }
      ],
      rowIndex: 6,
      colIndex: 4,
      cells: [
        { index: 4, value: 'Total Amount:', style: { fontWeight: 'bold', textAlign: 'right' } },
        { formula: '=SUM(F2:F6)', style: { fontWeight: 'bold' } },
      ],
      width1: 180,
      width2: 130,
      width3: 120,
      openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open',
      saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save'
    }
  },
  methods: {
    created: function() {
      var spreadsheet = this.$refs.spreadsheet;
      spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');
      // Apply format to the specified range in the active sheet.
      spreadsheet.numberFormat('$#,##0.00', 'F2:F7');
      spreadsheet.numberFormat('m/d/yyyy', 'E2:E6');
    }
  }
}
</script>
```

### src/components/spreadsheet-editor-default/SpreadSheetEditorView.vue

```vue
<template>
  <SpreadSheetEditor />
</template>

<script setup>
import SpreadSheetEditor from '../components/SpreadSheetEditor.vue'
</script>
```

### src/components/spreadsheet-editor-default/datasource.json

```json
{
    "defaultData": [
        {
            "Customer Name": "Romona Heaslip",
            "Model": "Taurus",
            "Color": "Aquamarine",
            "Payment Mode": "Debit Card",
            "Delivery Date": "07-11-2015",
            "Amount": "8529.22"
        },
        {
            "Customer Name": "Clare Batterton",
            "Model": "Sparrow",
            "Color": "Pink",
            "Payment Mode": "Cash On Delivery",
            "Delivery Date": "07-13-2016",
            "Amount": "17866.19"
        },
        {
            "Customer Name": "Eamon Traise",
            "Model": "Grand Cherokee",
            "Color": "Blue",
            "Payment Mode": "Net Banking",
            "Delivery Date": "09-04-2015",
            "Amount": "13853.09"
        },
        {
            "Customer Name": "Julius Gorner",
            "Model": "GTO",
            "Color": "Aquamarine",
            "Payment Mode": "Credit Card",
            "Delivery Date": "12-15-2017",
            "Amount": "2338.74"
        },
        {
            "Customer Name": "Jenna Schoolfield",
            "Model": "LX",
            "Color": "Yellow",
            "Payment Mode": "Credit Card",
            "Delivery Date": "10-08-2014",
            "Amount": "9578.45"
        },
        {
            "Customer Name": "Marylynne Harring",
            "Model": "Catera",
            "Color": "Green",
            "Payment Mode": "Cash On Delivery",
            "Delivery Date": "07-01-2017",
            "Amount": "19141.62"
        },
        {
            "Customer Name": "Vilhelmina Leipelt",
            "Model": "7 Series",
            "Color": "Goldenrod",
            "Payment Mode": "Credit Card",
            "Delivery Date": "12-20-2015",
            "Amount": "6543.30"
        },
        {
            "Customer Name": "Barby Heisler",
            "Model": "Corvette",
            "Color": "Red",
            "Payment Mode": "Credit Card",
            "Delivery Date": "11-24-2014",
            "Amount": "13035.06"
        },
        {
            "Customer Name": "Karyn Boik",
            "Model": "Regal",
            "Color": "Indigo",
            "Payment Mode": "Debit Card",
            "Delivery Date": "05-12-2014",
            "Amount": "18488.80"
        },
        {
            "Customer Name": "Jeanette Pamplin",
            "Model": "S4",
            "Color": "Fuscia",
            "Payment Mode": "Net Banking",
            "Delivery Date": "12-30-2014",
            "Amount": "12317.04"
        }
    ]
}
```