{ "$schema": "https://ai.syncfusion.com/schema/registry-item.json", "name": "spreadsheet-editor-default", "framework": "javascript", "type": "registry:component", "component": "Spreadsheet", "variant": "default", "dependencies": [ "@syncfusion/ej2-spreadsheet" ], "description": "Spreadsheet sample for entering, formatting, calculating, and organizing worksheet data.", "meta": { "essentialStudioRelease": "2026 Volume 2 (v34.1.29)", "license": "commercial-or-community", "licenseNote": "The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md", "requiresLicenseKey": true, "requiresServerEndpoint": true, "platformIndex": "https://ai.syncfusion.com/javascript/llms.txt", "skillPack": "syncfusion/javascript-ui-components-skills", "docs": "https://ai.syncfusion.com/gallery/javascript/spreadsheet-editor-default.md" }, "files": [ { "target": "src/components/spreadsheet-editor-default/default.html", "content": "
\n
\n
\n\n
\n

\n This sample demonstrates the Spreadsheet component and its features such as editing, formulas,\n formatting, importing, and exporting.\n

\n
\n
\n

\n The Spreadsheet component is used to organize and analyze data in tabular format.\n It has a built-in calculation library that supports most commonly used formulas. Excel workbook files can be\n imported and exported by providing the openUrl and saveUrl property.\n

\n

\n Note: The openUrl and saveUrl endpoints used in these demo samples are\n provided solely for demonstration purposes. The associated web service may experience memory limitations when\n handling large Excel files, which could result in import or export failures. For better performance and reliability\n especially when working with large files, we recommend hosting your own local service. For detailed guidance, please\n refer to our \n Blog post.\n

\n

\n Data binding can be achieved by setting an array of JavaScript objects or an instance of Data Manager to the\n dataSource property under the ranges of sheet. The cellFormat and\n numberFormat\n methods are used to apply format to a range of cells in the created event.\n

\n

\n Learn how to organize, analyze, and edit spreadsheet data with built-in formulas, formatting, and import/export, as demonstrated in this sample.\n

\n

Documentation Links

\n \n

More Resources

\n \n

\n

\n Looking for the full Typescript Spreadsheet Editor overview, features, pricing, and documentation? Visit the\n Typescript Spreadsheet Editor page.\n

\n
\n\n" }, { "target": "src/components/spreadsheet-editor-default/default.ts", "content": "import { loadCultureFiles } from '../common/culture-loader';\nimport { Spreadsheet, getFormatFromType } from '@syncfusion/ej2-spreadsheet';\nimport * as dataSource from './default-data.json';\n\n/**\n * Default Spreadsheet sample\n */\n(window as any).default = (): void => {\n loadCultureFiles();\n //Initialize Spreadsheet component\n const spreadsheet: Spreadsheet = new Spreadsheet({\n sheets: [\n {\n name: 'Car Sales Report',\n ranges: [{ dataSource: (dataSource as any).defaultData }],\n rows: [\n {\n index: 30,\n cells: [\n { index: 4, value: 'Total Amount:', style: { fontWeight: 'bold', textAlign: 'right' } },\n { formula: '=SUM(F2:F30)', style: { fontWeight: 'bold' } },\n ]\n }],\n columns: [\n { width: 180 }, { width: 130 }, { width: 130 }, { width: 180 },\n { width: 130 }, { width: 120 }\n ]\n }],\n openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open',\n saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save',\n created: (): void => {\n // Apply the format to the specified range in the active sheet.\n spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle' }, 'A1:F1');\n // Apply format to the specified range in the active sheet.\n spreadsheet.numberFormat('$#,##0.00', 'F2:F31');\n spreadsheet.numberFormat('m/d/yyyy', 'E2:E30');\n }\n });\n\n //Render initialized Spreadsheet component\n spreadsheet.appendTo('#spreadsheet');\n};\n" } ] }