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

```jsx
import { SheetsDirective, SheetDirective, ColumnsDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RowsDirective, RowDirective, CellsDirective, CellDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';
import { SpreadsheetComponent } 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" }];
    
function Default() {
    let spreadsheet;
    const boldRight = { fontWeight: 'bold', textAlign: 'right' };
    const bold = { fontWeight: 'bold' };
    const onCreated = () => {
        // 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;
```