{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "spreadsheet-editor-formula",
  "framework": "vue",
  "type": "registry:component",
  "component": "SpreadsheetEditor",
  "variant": "formula",
  "dependencies": [
    "@syncfusion/ej2-vue-spreadsheet"
  ],
  "description": "Spreadsheet editor with formulas, named ranges, computed profit, and summary rows.",
  "meta": {
    "essentialStudioRelease": "2026 Volume 2 (v34.1.29)",
    "license": "commercial-or-community",
    "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md",
    "requiresLicenseKey": true,
    "requiresServerEndpoint": false,
    "platformIndex": "https://ai.syncfusion.com/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/spreadsheet-editor-formula.md"
  },
  "files": [
    {
      "target": "src/components/spreadsheet-editor-formula/SpreadSheetEditor.vue",
      "content": "<template>\n  <div class=\"control-section\">\n    <div id=\"spreadsheet-number-format\">\n      <ejs-spreadsheet ref=\"spreadsheet\" :showRibbon=\"false\" :created=\"created\">\n        <e-sheets>\n          <e-sheet name=\"Stock Details\" selectedRange=\"F10\">\n            <e-ranges>\n              <e-range :dataSource=\"dataSource\"></e-range>\n            </e-ranges>\n            <e-rows>\n              <e-row :height=\"height1\"></e-row>\n              <e-row :index=\"rowIndex\" :height=\"height2\">\n                <e-cells>\n                  <e-cell :index=\"colIndex1\" value=\"Average profit:\"></e-cell>\n                  <e-cell :index=\"colIndex2\" formula=\"=AVERAGE(F2:F6)\" format=\"0.00\"></e-cell>\n                </e-cells>\n              </e-row>\n              <e-row :height=\"height2\">\n                <e-cells>\n                  <e-cell :index=\"colIndex1\" value=\"Maximum stock value:\"></e-cell>\n                  <e-cell :index=\"colIndex2\" formula=\"=MAX(D2:D6)\" format=\"0.00\"></e-cell>\n                </e-cells>\n              </e-row>\n              <e-row :height=\"height2\">\n                <e-cells>\n                  <e-cell :index=\"colIndex1\" value=\"Minimum stock value:\"></e-cell>\n                  <e-cell :index=\"colIndex2\" formula=\"=MIN(E2:E6)\" format=\"0.00\"></e-cell>\n                </e-cells>\n              </e-row>\n              <e-row :height=\"height2\">\n                <e-cells>\n                  <e-cell :index=\"colIndex1\" value=\"Non-profitable days:\"></e-cell>\n                  <e-cell :index=\"colIndex2\" formula='=COUNTIF(F2:F6,\"<=0\")' ></e-cell>\n                </e-cells>\n              </e-row>\n            </e-rows>\n            <e-columns>\n              <e-column :width=\"width1\"></e-column>\n              <e-column :width=\"width2\"></e-column>\n              <e-column :width=\"width3\"></e-column>\n              <e-column :width=\"width3\"></e-column>\n              <e-column :width=\"width2\"></e-column>\n              <e-column :width=\"width2\"></e-column>\n            </e-columns>\n          </e-sheet>\n        </e-sheets>\n      </ejs-spreadsheet>\n    </div>\n\n  </div>\n</template>\n\n<script>\nimport { SpreadsheetComponent, SheetDirective, RowsDirective, RowDirective, CellDirective, CellsDirective, SheetsDirective, ColumnsDirective, ColumnDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-vue-spreadsheet';\n\nexport default {\n   components: {\n    'ejs-spreadsheet': SpreadsheetComponent,\n    'e-sheet': SheetDirective,\n    'e-sheets': SheetsDirective,\n    'e-row': RowDirective,\n    'e-rows': RowsDirective,\n    'e-cell': CellDirective,\n    'e-cells': CellsDirective,\n    'e-column': ColumnDirective,\n    'e-columns': ColumnsDirective,\n    'e-range': RangeDirective,\n    'e-ranges': RangesDirective\n   },\n   data: () => {\n    return {\n      dataSource: [\n        { Date: '08-01-2019', Open: 2625.75, Close: 2640.75, 'High (+)': 2634.45, 'Low (-)': 2620.65, Profit: '=C2-B2' },\n        { Date: '08-02-2019', Open: 2640.75, Close: 2638.75, 'High (+)': 2640.75, 'Low (-)': 2638.75, Profit: '=C3-B3' },\n        { Date: '08-03-2019', Open: 2638.75, Close: 2697.65, 'High (+)': 2690.25, 'Low (-)': 2647.65, Profit: '=C4-B4' },\n        { Date: '08-04-2019', Open: 2697.65, Close: 2700.25, 'High (+)': 2699.21, 'Low (-)': 2585.10, Profit: '=C5-B5' },\n        { Date: '08-05-2019', Open: 2700.25, Close: 2730.25, 'High (+)': 2727.65, 'Low (-)': 2704.95, Profit: '=C6-B6' }\n      ],\n      rowIndex: 6,\n      height1: 40,\n      height2: 25,\n      colIndex1: 3,\n      colIndex2: 5,\n      width1: 100,\n      width2: 130,\n      width3: 140,\n      definedNames: [\n        { name: 'Profit', refersTo: '=F2:F6' },\n        { name: 'High', refersTo: '=D2:D6' }\n      ]\n    }\n  },\n  methods: {\n    created: function() {\n        var spreadsheet = this.$refs.spreadsheet;\n        spreadsheet.cellFormat({ fontWeight: 'bold', backgroundColor: '#279377', color: '#fff', textAlign: 'center',verticalAlign: 'middle', fontSize: '14px' }, 'A1:F1');\n        spreadsheet.cellFormat({ fontWeight: 'bold', backgroundColor: '#EEEEEE' }, 'A7:F10');\n        spreadsheet.numberFormat('0.00', 'F2:F6');\n        spreadsheet.numberFormat('m/d/yyyy', 'A2:A6');\n    }\n  }\n}\n</script>"
    },
    {
      "target": "src/components/spreadsheet-editor-formula/SpreadSheetEditorView.vue",
      "content": "<template>\n  <SpreadSheetEditor />\n</template>\n\n<script setup>\nimport SpreadSheetEditor from '../components/SpreadSheetEditor.vue'\n</script>"
    },
    {
      "target": "src/components/spreadsheet-editor-formula/datasource.json",
      "content": "{\n    \"formulaData\": [\n        {\n            \"Date\": \"08-01-2019\",\n            \"Open\": \"2625.75\",\n            \"Close\": \"2640.75\",\n            \"High (+)\": \"2634.45\",\n            \"Low (-)\": \"2620.65\",\n            \"Profit\": \"=C2-B2\"\n        },\n        {\n            \"Date\": \"08-02-2019\",\n            \"Open\": \"2640.75\",\n            \"Close\": \"2638.75\",\n            \"High (+)\": \"2640.75\",\n            \"Low (-)\": \"2638.75\",\n            \"Profit\": \"=C3-B3\"\n        },\n        {\n            \"Date\": \"08-03-2019\",\n            \"Open\": \"2638.75\",\n            \"Close\": \"2697.65\",\n            \"High (+)\": \"2690.25\",\n            \"Low (-)\": \"2647.65\",\n            \"Profit\": \"=C4-B4\"\n        },\n        {\n            \"Date\": \"08-04-2019\",\n            \"Open\": \"2697.65\",\n            \"Close\": \"2700.25\",\n            \"High (+)\": \"2699.21\",\n            \"Low (-)\": \"2585.10\",\n            \"Profit\": \"=C5-B5\"\n        },\n        {\n            \"Date\": \"08-05-2019\",\n            \"Open\": \"2700.25\",\n            \"Close\": \"2730.25\",\n            \"High (+)\": \"2727.65\",\n            \"Low (-)\": \"2704.95\",\n            \"Profit\": \"=C6-B6\"\n        },\n        {\n            \"Date\": \"08-06-2019\",\n            \"Open\": \"2730.25\",\n            \"Close\": \"2725.25\",\n            \"High (+)\": \"2727.45\",\n            \"Low (-)\": \"2725.67\",\n            \"Profit\": \"=C7-B7\"\n        },\n        {\n            \"Date\": \"08-07-2019\",\n            \"Open\": \"2725.25\",\n            \"Close\": \"2778.75\",\n            \"High (+)\": \"2770.45\",\n            \"Low (-)\": \"2730.60\",\n            \"Profit\": \"=C8-B8\"\n        },\n        {\n            \"Date\": \"08-08-2019\",\n            \"Open\": \"2778.75\",\n            \"Close\": \"2800.67\",\n            \"High (+)\": \"2790.27\",\n            \"Low (-)\": \"2780.78\",\n            \"Profit\": \"=C9-B9\"\n        },\n        {\n            \"Date\": \"08-09-2019\",\n            \"Open\": \"2800.67\",\n            \"Close\": \"2840.80\",\n            \"High (+)\": \"2838.78\",\n            \"Low (-)\": \"2827.78\",\n            \"Profit\": \"=C10-B10\"\n        },\n        {\n            \"Date\": \"08-10-2019\",\n            \"Open\": \"2840.80\",\n            \"Close\": \"2865.35\",\n            \"High (+)\": \"2863.30\",\n            \"Low (-)\": \"2850.20\",\n            \"Profit\": \"=C11-B11\"\n        }\n    ]\n}"
    }
  ]
}