# spreadsheet-editor-default

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

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

**Install Package(s)**

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

```html
<div class="control-section">
    <div id="spreadsheet"></div>
</div>
<!-- custom code start -->
<div id="action-description">
    <p>
        This sample demonstrates the <code>Spreadsheet</code> component and its features such as editing, formulas,
        formatting, importing, and exporting.
    </p>
</div>
<div id="description">
    <p>
        The <code>Spreadsheet</code> component is used to organize and analyze data in tabular format.
        It has a built-in calculation library that supports most commonly used formulas. Excel workbook files can be
        imported and exported by providing the <code>openUrl</code> and <code>saveUrl</code> property.
    </p>
    <p>
      <strong>Note:</strong> The <code>openUrl</code> and <code>saveUrl</code> endpoints used in these demo samples are
      provided solely for demonstration purposes. The associated web service may experience memory limitations when
      handling large Excel files, which could result in import or export failures. For better performance and reliability
      especially when working with large files, we recommend hosting your own local service. For detailed guidance, please
      refer to our <a target="_blank" href="https://www.syncfusion.com/blogs/post/host-spreadsheet-open-and-save-services">
      Blog</a> post.
    </p>
    <p>
        Data binding can be achieved by setting an array of JavaScript objects or an instance of Data Manager to the
        <code>dataSource</code> property under the <code>ranges</code> of sheet. The <code>cellFormat</code> and
        <code>numberFormat</code>
        methods are used to apply format to a range of cells in the <code>created</code> event.
    </p>
    <p>
        Learn how to organize, analyze, and edit spreadsheet data with built-in formulas, formatting, and import/export, as demonstrated in this sample.
    </p>
    <p><strong>Documentation Links</strong></p>
    <ul>
        <li><a target="_blank" href="https://help.syncfusion.com/document-processing/excel/spreadsheet/javascript-es6/getting-started">Getting Started</a></li>
        <li><a target="_blank" href="https://help.syncfusion.com/document-processing/excel/spreadsheet/javascript-es6/data-binding">Data Binding</a></li>
        <li><a target="_blank" href="https://ej2.syncfusion.com/documentation/api/spreadsheet/index-default">API Reference</a></li>
    </ul>
    <p><strong>More Resources</strong></p>
    <ul>
        <li><a target="_blank" href="https://support.syncfusion.com/kb/web/section/726">Knowledge Base</a></li>
    </ul>
    </p>
    <p>
        Looking for the full Typescript Spreadsheet Editor overview, features, pricing, and documentation? Visit the
        <a target="_blank" href="https://www.syncfusion.com/spreadsheet-editor-sdk/javascript-spreadsheet-editor"> Typescript Spreadsheet Editor</a> page.
    </p>
</div>
<style>
    .control-section .control-wrapper {
        height: calc(100vh - 230px);
    }

    .e-spreadsheet .e-main-panel .e-main-content {
        margin-left: 0 !important;
    }

    #sb-content .e-spreadsheet .e-tab .e-tab-text {
        display: inherit;
    }

    /* newTab support styles */
    .ej2-new .sb-header,
    .ej2-new .sb-bread-crumb,
    .ej2-new #action-description,
    .ej2-new #description-section,
    .ej2-new #description {
        display: none
    }

    .ej2-new .container-fluid,
    .ej2-new .container-fluid .control-section,
    #sidebar-section {
        padding: 0px;
    }

    .ej2-new .sample-browser>.content.e-view {
        top: 0px;
        padding: 0px;
        text-align: initial;
        height: 100%;
        overflow: hidden;
    }

    .ej2-new .control-section .control-section {
        height: 100vh;
    }
   .e-spreadsheet .e-main-panel .e-main-content{
        margin-left: 0 !important;
    }
    /* end of newTab support styles */
</style>
<!-- custom code end -->
```

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

```typescript
import { loadCultureFiles } from '../common/culture-loader';
import { Spreadsheet, getFormatFromType } from '@syncfusion/ej2-spreadsheet';
import * as dataSource from './default-data.json';

/**
 * Default Spreadsheet sample
 */
(window as any).default = (): void => {
    loadCultureFiles();
    //Initialize Spreadsheet component
    const spreadsheet: Spreadsheet = new Spreadsheet({
        sheets: [
            {
                name: 'Car Sales Report',
                ranges: [{ dataSource: (dataSource as any).defaultData }],
                rows: [
                    {
                        index: 30,
                        cells: [
                            { index: 4, value: 'Total Amount:', style: { fontWeight: 'bold', textAlign: 'right' } },
                            { formula: '=SUM(F2:F30)', style: { fontWeight: 'bold' } },
                        ]
                    }],
                columns: [
                    { width: 180 }, { width: 130 }, { width: 130 }, { width: 180 },
                    { width: 130 }, { width: 120 }
                ]
            }],
        openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open',
        saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save',
        created: (): void => {
            // Apply the format 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');
            spreadsheet.numberFormat('m/d/yyyy', 'E2:E30');
        }
    });

    //Render initialized Spreadsheet component
    spreadsheet.appendTo('#spreadsheet');
};

```