{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "spreadsheet-editor-formula",
  "framework": "react",
  "type": "registry:component",
  "component": "SpreadsheetEditor",
  "variant": "formula",
  "dependencies": [
    "@syncfusion/ej2-react-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/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/ts/spreadsheet-editor-formula.md"
  },
  "files": [
    {
      "target": "src/components/spreadsheet-editor-formula/SpreadSheetEditor.tsx",
      "content": "import { SpreadsheetComponent, SheetsDirective, SheetDirective, ColumnsDirective, RangeDirective, RangesDirective, RowsDirective, RowDirective, CellsDirective, CellDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';\nimport type { DefineNameModel } from '@syncfusion/ej2-spreadsheet/src/workbook/common';\n\n/**\n * Formula sample\n */\nconst 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\nfunction Formula() {\n    let spreadsheet: SpreadsheetComponent;\n    const definedNames: DefineNameModel[] = [{\n        name: 'Profit', refersTo: '=F2:F11'\n    },\n    {\n        name: 'High', refersTo: '=D2:D11'\n    }]\n\n    function onCreated(): void {\n        spreadsheet.cellFormat({ fontWeight: 'bold', backgroundColor: '#279377', color: '#fff', textAlign: 'center', verticalAlign: 'middle', fontSize: '14px' }, 'A1:F1');\n        spreadsheet.cellFormat({ fontWeight: 'bold', backgroundColor: '#EEEEEE' }, 'A12:F15');\n        spreadsheet.numberFormat('0.00', 'F2:F11');\n    }\n\n    return (\n        <div className='control-pane'>\n            <div className='control-section spreadsheet-control'>\n                <SpreadsheetComponent showRibbon={false}\n                    ref={(ssObj) => { spreadsheet = ssObj }} definedNames={definedNames} created={onCreated.bind(this)} >\n                    <SheetsDirective>\n                        <SheetDirective name='Stock Details' selectedRange='F15'>\n                            <RangesDirective>\n                                <RangeDirective dataSource={formulaData}></RangeDirective>\n                            </RangesDirective>\n                            <RowsDirective>\n                                <RowDirective height={40}></RowDirective>\n                                <RowDirective index={11}>\n                                    <CellsDirective>\n                                        <CellDirective index={3} value='Average profit:'></CellDirective>\n                                        <CellDirective index={5} formula='=AVERAGE(Profit)' format='0.00'></CellDirective>\n                                    </CellsDirective>\n                                </RowDirective>\n                                <RowDirective height={25}>\n                                    <CellsDirective>\n                                        <CellDirective index={3} value='Maximum stock value:'></CellDirective>\n                                        <CellDirective index={5} formula='=MAX(High)' format='0.00'></CellDirective>\n                                    </CellsDirective>\n                                </RowDirective>\n                                <RowDirective height={25}>\n                                    <CellsDirective>\n                                        <CellDirective index={3} value='Minimum stock value:'></CellDirective>\n                                        <CellDirective index={5} formula='=MIN(E2:E11)'></CellDirective>\n                                    </CellsDirective>\n                                </RowDirective>\n                                <RowDirective height={25}>\n                                    <CellsDirective>\n                                        <CellDirective index={3} value='Non-profitable days:'></CellDirective>\n                                        <CellDirective index={5} formula='=COUNTIF(F2:F11,\"<=0\")'></CellDirective>\n                                    </CellsDirective>\n                                </RowDirective>\n                            </RowsDirective>\n                            <ColumnsDirective>\n                                <ColumnDirective width={100}></ColumnDirective>\n                                <ColumnDirective width={130}></ColumnDirective>\n                                <ColumnDirective width={140}></ColumnDirective>\n                                <ColumnDirective width={140}></ColumnDirective>\n                                <ColumnDirective width={130}></ColumnDirective>\n                                <ColumnDirective width={130}></ColumnDirective>\n                            </ColumnsDirective>\n                        </SheetDirective>\n                    </SheetsDirective>\n                </SpreadsheetComponent>\n            </div>\n        </div>\n    )\n}\nexport default Formula;"
    }
  ]
}