# spreadsheet-editor-default

> Spreadsheet editor with sheets, ranges, formulas, cell styles, and named ranges.

**Framework:** react  **Component:** SpreadsheetEditor  **Variant:** default

## 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-default.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-default/SpreadSheetEditor.tsx

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

/**
 * Default Spreadsheet sample
 */

const defaultData = [
    { "Customer Name": "Romona Heaslip", "Model": "Taurus", "Color": "Aquamarine", "Payment Mode": "Debit Card", "Delivery Date": "07-11-2015", "Amount": "8529.22" },
    { "Customer Name": "Clare Batterton", "Model": "Sparrow", "Color": "Pink", "Payment Mode": "Cash On Delivery", "Delivery Date": "07-13-2016", "Amount": "17866.19" },
    { "Customer Name": "Eamon Traise", "Model": "Grand Cherokee", "Color": "Blue", "Payment Mode": "Net Banking", "Delivery Date": "09-04-2015", "Amount": "13853.09" },
    { "Customer Name": "Julius Gorner", "Model": "GTO", "Color": "Aquamarine", "Payment Mode": "Credit Card", "Delivery Date": "12-15-2017", "Amount": "2338.74" },
    { "Customer Name": "Jenna Schoolfield", "Model": "LX", "Color": "Yellow", "Payment Mode": "Credit Card", "Delivery Date": "10-08-2014", "Amount": "9578.45" },
    { "Customer Name": "Marylynne Harring", "Model": "Catera", "Color": "Green", "Payment Mode": "Cash On Delivery", "Delivery Date": "07-01-2017", "Amount": "19141.62" }];

function Default() {
    let spreadsheet: SpreadsheetComponent;
    const boldRight: CellStyleModel = { fontWeight: 'bold', textAlign: 'right' };
    const bold: CellStyleModel = { fontWeight: 'bold' };

    const onCreated = (): void => {
        // Apply styles to the specified range in the active sheet.
        spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');
        // Apply format to the specified range in the active sheet.
        spreadsheet.numberFormat('$#,##0.00', 'F2:F31');
        // The default format code for the date format is 'm/d/yyyy'.
        spreadsheet.numberFormat('m/d/yyyy', 'E2:E30');
    };

    return (
        <div className='control-pane'>
            <div className='control-section spreadsheet-control'>
                <SpreadsheetComponent openUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open'
                    saveUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save'
                    ref={(ssObj) => { spreadsheet = ssObj }} created={onCreated.bind(this)} >
                    <SheetsDirective>
                        <SheetDirective name="Car Sales Report">
                            <RangesDirective>
                                <RangeDirective dataSource={defaultData}></RangeDirective>
                            </RangesDirective>
                            <RowsDirective>
                                <RowDirective index={30}>
                                    <CellsDirective>
                                        <CellDirective index={4} value="Total Amount:" style={boldRight}></CellDirective>
                                        <CellDirective formula="=SUM(F2:F30)" style={bold}></CellDirective>
                                    </CellsDirective>
                                </RowDirective>
                            </RowsDirective>
                            <ColumnsDirective>
                                <ColumnDirective width={180}></ColumnDirective>
                                <ColumnDirective width={130}></ColumnDirective>
                                <ColumnDirective width={130}></ColumnDirective>
                                <ColumnDirective width={180}></ColumnDirective>
                                <ColumnDirective width={130}></ColumnDirective>
                                <ColumnDirective width={120}></ColumnDirective>
                            </ColumnsDirective>
                        </SheetDirective>
                    </SheetsDirective>
                </SpreadsheetComponent>
            </div>
        </div>
    )
}
export default Default;
```