# spreadsheet-editor-formula

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

**Framework:** react  **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/react/ts/spreadsheet-editor-formula.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-react-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.tsx

```tsx
import { SpreadsheetComponent, SheetsDirective, SheetDirective, ColumnsDirective, RangeDirective, RangesDirective, RowsDirective, RowDirective, CellsDirective, CellDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import type { DefineNameModel } from '@syncfusion/ej2-spreadsheet/src/workbook/common';

/**
 * Formula sample
 */
const 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"
    }
];

function Formula() {
    let spreadsheet: SpreadsheetComponent;
    const definedNames: DefineNameModel[] = [{
        name: 'Profit', refersTo: '=F2:F11'
    },
    {
        name: 'High', refersTo: '=D2:D11'
    }]

    function onCreated(): void {
        spreadsheet.cellFormat({ fontWeight: 'bold', backgroundColor: '#279377', color: '#fff', textAlign: 'center', verticalAlign: 'middle', fontSize: '14px' }, 'A1:F1');
        spreadsheet.cellFormat({ fontWeight: 'bold', backgroundColor: '#EEEEEE' }, 'A12:F15');
        spreadsheet.numberFormat('0.00', 'F2:F11');
    }

    return (
        <div className='control-pane'>
            <div className='control-section spreadsheet-control'>
                <SpreadsheetComponent showRibbon={false}
                    ref={(ssObj) => { spreadsheet = ssObj }} definedNames={definedNames} created={onCreated.bind(this)} >
                    <SheetsDirective>
                        <SheetDirective name='Stock Details' selectedRange='F15'>
                            <RangesDirective>
                                <RangeDirective dataSource={formulaData}></RangeDirective>
                            </RangesDirective>
                            <RowsDirective>
                                <RowDirective height={40}></RowDirective>
                                <RowDirective index={11}>
                                    <CellsDirective>
                                        <CellDirective index={3} value='Average profit:'></CellDirective>
                                        <CellDirective index={5} formula='=AVERAGE(Profit)' format='0.00'></CellDirective>
                                    </CellsDirective>
                                </RowDirective>
                                <RowDirective height={25}>
                                    <CellsDirective>
                                        <CellDirective index={3} value='Maximum stock value:'></CellDirective>
                                        <CellDirective index={5} formula='=MAX(High)' format='0.00'></CellDirective>
                                    </CellsDirective>
                                </RowDirective>
                                <RowDirective height={25}>
                                    <CellsDirective>
                                        <CellDirective index={3} value='Minimum stock value:'></CellDirective>
                                        <CellDirective index={5} formula='=MIN(E2:E11)'></CellDirective>
                                    </CellsDirective>
                                </RowDirective>
                                <RowDirective height={25}>
                                    <CellsDirective>
                                        <CellDirective index={3} value='Non-profitable days:'></CellDirective>
                                        <CellDirective index={5} formula='=COUNTIF(F2:F11,"<=0")'></CellDirective>
                                    </CellsDirective>
                                </RowDirective>
                            </RowsDirective>
                            <ColumnsDirective>
                                <ColumnDirective width={100}></ColumnDirective>
                                <ColumnDirective width={130}></ColumnDirective>
                                <ColumnDirective width={140}></ColumnDirective>
                                <ColumnDirective width={140}></ColumnDirective>
                                <ColumnDirective width={130}></ColumnDirective>
                                <ColumnDirective width={130}></ColumnDirective>
                            </ColumnsDirective>
                        </SheetDirective>
                    </SheetsDirective>
                </SpreadsheetComponent>
            </div>
        </div>
    )
}
export default Formula;
```