# 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/js/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.jsx

```jsx
import { SpreadsheetComponent, SheetsDirective, SheetDirective, ColumnsDirective, RangeDirective, RangesDirective, RowsDirective, RowDirective, CellsDirective, CellDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
/**
 * 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"
    },
    {
        "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"
    }
];

function Formula() {
    let spreadsheet;
    const definedNames = [{
            name: 'Profit', refersTo: '=F2:F11'
        },
        {
            name: 'High', refersTo: '=D2:D11'
        }];
    function onCreated() {
        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;
```