# spreadsheet-editor-formula

> Spreadsheet editor with formulas, named ranges, computed profit, and summary rows.

**Framework:** vue  **Component:** SpreadsheetEditor  **Variant:** formula

## 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-formula.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-formula/SpreadSheetEditor.vue

```vue
<template>
  <div class="control-section">
    <div id="spreadsheet-number-format">
      <ejs-spreadsheet ref="spreadsheet" :showRibbon="false" :created="created">
        <e-sheets>
          <e-sheet name="Stock Details" selectedRange="F10">
            <e-ranges>
              <e-range :dataSource="dataSource"></e-range>
            </e-ranges>
            <e-rows>
              <e-row :height="height1"></e-row>
              <e-row :index="rowIndex" :height="height2">
                <e-cells>
                  <e-cell :index="colIndex1" value="Average profit:"></e-cell>
                  <e-cell :index="colIndex2" formula="=AVERAGE(F2:F6)" format="0.00"></e-cell>
                </e-cells>
              </e-row>
              <e-row :height="height2">
                <e-cells>
                  <e-cell :index="colIndex1" value="Maximum stock value:"></e-cell>
                  <e-cell :index="colIndex2" formula="=MAX(D2:D6)" format="0.00"></e-cell>
                </e-cells>
              </e-row>
              <e-row :height="height2">
                <e-cells>
                  <e-cell :index="colIndex1" value="Minimum stock value:"></e-cell>
                  <e-cell :index="colIndex2" formula="=MIN(E2:E6)" format="0.00"></e-cell>
                </e-cells>
              </e-row>
              <e-row :height="height2">
                <e-cells>
                  <e-cell :index="colIndex1" value="Non-profitable days:"></e-cell>
                  <e-cell :index="colIndex2" formula='=COUNTIF(F2:F6,"<=0")' ></e-cell>
                </e-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-column :width="width3"></e-column>
              <e-column :width="width2"></e-column>
              <e-column :width="width2"></e-column>
            </e-columns>
          </e-sheet>
        </e-sheets>
      </ejs-spreadsheet>
    </div>

  </div>
</template>

<script>
import { SpreadsheetComponent, SheetDirective, RowsDirective, RowDirective, CellDirective, CellsDirective, 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-cell': CellDirective,
    'e-cells': CellsDirective,
    'e-column': ColumnDirective,
    'e-columns': ColumnsDirective,
    'e-range': RangeDirective,
    'e-ranges': RangesDirective
   },
   data: () => {
    return {
      dataSource: [
        { Date: '08-01-2019', Open: 2625.75, Close: 2640.75, 'High (+)': 2634.45, 'Low (-)': 2620.65, Profit: '=C2-B2' },
        { Date: '08-02-2019', Open: 2640.75, Close: 2638.75, 'High (+)': 2640.75, 'Low (-)': 2638.75, Profit: '=C3-B3' },
        { Date: '08-03-2019', Open: 2638.75, Close: 2697.65, 'High (+)': 2690.25, 'Low (-)': 2647.65, Profit: '=C4-B4' },
        { Date: '08-04-2019', Open: 2697.65, Close: 2700.25, 'High (+)': 2699.21, 'Low (-)': 2585.10, Profit: '=C5-B5' },
        { Date: '08-05-2019', Open: 2700.25, Close: 2730.25, 'High (+)': 2727.65, 'Low (-)': 2704.95, Profit: '=C6-B6' }
      ],
      rowIndex: 6,
      height1: 40,
      height2: 25,
      colIndex1: 3,
      colIndex2: 5,
      width1: 100,
      width2: 130,
      width3: 140,
      definedNames: [
        { name: 'Profit', refersTo: '=F2:F6' },
        { name: 'High', refersTo: '=D2:D6' }
      ]
    }
  },
  methods: {
    created: function() {
        var spreadsheet = this.$refs.spreadsheet;
        spreadsheet.cellFormat({ fontWeight: 'bold', backgroundColor: '#279377', color: '#fff', textAlign: 'center',verticalAlign: 'middle', fontSize: '14px' }, 'A1:F1');
        spreadsheet.cellFormat({ fontWeight: 'bold', backgroundColor: '#EEEEEE' }, 'A7:F10');
        spreadsheet.numberFormat('0.00', 'F2:F6');
        spreadsheet.numberFormat('m/d/yyyy', 'A2:A6');
    }
  }
}
</script>
```

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

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

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

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

```json
{
    "formulaData": [
        {
            "Date": "08-01-2019",
            "Open": "2625.75",
            "Close": "2640.75",
            "High (+)": "2634.45",
            "Low (-)": "2620.65",
            "Profit": "=C2-B2"
        },
        {
            "Date": "08-02-2019",
            "Open": "2640.75",
            "Close": "2638.75",
            "High (+)": "2640.75",
            "Low (-)": "2638.75",
            "Profit": "=C3-B3"
        },
        {
            "Date": "08-03-2019",
            "Open": "2638.75",
            "Close": "2697.65",
            "High (+)": "2690.25",
            "Low (-)": "2647.65",
            "Profit": "=C4-B4"
        },
        {
            "Date": "08-04-2019",
            "Open": "2697.65",
            "Close": "2700.25",
            "High (+)": "2699.21",
            "Low (-)": "2585.10",
            "Profit": "=C5-B5"
        },
        {
            "Date": "08-05-2019",
            "Open": "2700.25",
            "Close": "2730.25",
            "High (+)": "2727.65",
            "Low (-)": "2704.95",
            "Profit": "=C6-B6"
        },
        {
            "Date": "08-06-2019",
            "Open": "2730.25",
            "Close": "2725.25",
            "High (+)": "2727.45",
            "Low (-)": "2725.67",
            "Profit": "=C7-B7"
        },
        {
            "Date": "08-07-2019",
            "Open": "2725.25",
            "Close": "2778.75",
            "High (+)": "2770.45",
            "Low (-)": "2730.60",
            "Profit": "=C8-B8"
        },
        {
            "Date": "08-08-2019",
            "Open": "2778.75",
            "Close": "2800.67",
            "High (+)": "2790.27",
            "Low (-)": "2780.78",
            "Profit": "=C9-B9"
        },
        {
            "Date": "08-09-2019",
            "Open": "2800.67",
            "Close": "2840.80",
            "High (+)": "2838.78",
            "Low (-)": "2827.78",
            "Profit": "=C10-B10"
        },
        {
            "Date": "08-10-2019",
            "Open": "2840.80",
            "Close": "2865.35",
            "High (+)": "2863.30",
            "Low (-)": "2850.20",
            "Profit": "=C11-B11"
        }
    ]
}
```