# spreadsheet-editor-default

> Spreadsheet sample for entering, formatting, calculating, and organizing worksheet data.

**Framework:** angular  **Component:** Spreadsheet  **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/angular/spreadsheet-editor-default.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-angular-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/default.component.ts

```typescript
import { Component, ViewEncapsulation, Inject, ViewChild } from '@angular/core';
import { getDefaultData } from '../data';
import { SpreadsheetComponent, SpreadsheetModule } from '@syncfusion/ej2-angular-spreadsheet';
/**
 * Default Spreadsheet Controller
 */
@Component({
    selector: 'control-content',
    templateUrl: 'default.html',
    encapsulation: ViewEncapsulation.None,
    standalone: true,
    imports: [SpreadsheetModule]
})

export class DefaultController {
    @ViewChild('default')
    public spreadsheetObj!: SpreadsheetComponent;
    public data: Object[] = getDefaultData();
    public openUrl = 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open';
    public saveUrl = 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save';
    created() {
        this.spreadsheetObj.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');
        this.spreadsheetObj.cellFormat({ fontWeight: 'bold' }, 'E31:F31');
        this.spreadsheetObj.cellFormat({ textAlign: 'right' }, 'E31');
        // Apply format to the specified range in the active sheet.
        this.spreadsheetObj.numberFormat('$#,##0.00', 'F2:F31');
        // The default format code for the date format is 'm/d/yyyy'.
        this.spreadsheetObj.numberFormat('m/d/yyyy', 'E2:E30');
    }
}

```

### src/components/spreadsheet-editor-default/default.html

```html

<div class="control-section">
    <ejs-spreadsheet #default [openUrl]="openUrl" [saveUrl]="saveUrl" (created)="created()">
        <e-sheets>
            <e-sheet name="Car Sales Report">
                <e-ranges>
                    <e-range [dataSource]="data"></e-range>
                </e-ranges>
                <e-rows>
                    <e-row [index]="30">
                        <e-cells>
                            <e-cell [index]="4" value="Total Amount:"></e-cell>
                            <e-cell formula="=SUM(F2:F30)"></e-cell>
                        </e-cells>
                    </e-row>
                </e-rows>
                <e-columns>
                    <e-column [width]=180></e-column>
                    <e-column [width]=130></e-column>
                    <e-column [width]=130></e-column>
                    <e-column [width]=180></e-column>
                    <e-column [width]=130></e-column>
                    <e-column [width]=120></e-column>
                </e-columns>
            </e-sheet>
        </e-sheets>
    </ejs-spreadsheet>
</div>
```