{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "spreadsheet-editor-default",
  "framework": "react",
  "type": "registry:component",
  "component": "SpreadsheetEditor",
  "variant": "default",
  "dependencies": [
    "@syncfusion/ej2-react-spreadsheet"
  ],
  "description": "Spreadsheet editor with sheets, ranges, formulas, cell styles, and named ranges.",
  "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/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/js/spreadsheet-editor-default.md"
  },
  "files": [
    {
      "target": "src/components/spreadsheet-editor-default/SpreadSheetEditor.jsx",
      "content": "import { SheetsDirective, SheetDirective, ColumnsDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-react-spreadsheet';\nimport { RowsDirective, RowDirective, CellsDirective, CellDirective, ColumnDirective } from '@syncfusion/ej2-react-spreadsheet';\nimport { SpreadsheetComponent } from '@syncfusion/ej2-react-spreadsheet';\n/**\n * Default Spreadsheet sample\n */\nconst defaultData = [\n    { \"Customer Name\": \"Romona Heaslip\", \"Model\": \"Taurus\", \"Color\": \"Aquamarine\", \"Payment Mode\": \"Debit Card\", \"Delivery Date\": \"07-11-2015\", \"Amount\": \"8529.22\" },\n    { \"Customer Name\": \"Clare Batterton\", \"Model\": \"Sparrow\", \"Color\": \"Pink\", \"Payment Mode\": \"Cash On Delivery\", \"Delivery Date\": \"07-13-2016\", \"Amount\": \"17866.19\" },\n    { \"Customer Name\": \"Eamon Traise\", \"Model\": \"Grand Cherokee\", \"Color\": \"Blue\", \"Payment Mode\": \"Net Banking\", \"Delivery Date\": \"09-04-2015\", \"Amount\": \"13853.09\" },\n    { \"Customer Name\": \"Julius Gorner\", \"Model\": \"GTO\", \"Color\": \"Aquamarine\", \"Payment Mode\": \"Credit Card\", \"Delivery Date\": \"12-15-2017\", \"Amount\": \"2338.74\" },\n    { \"Customer Name\": \"Jenna Schoolfield\", \"Model\": \"LX\", \"Color\": \"Yellow\", \"Payment Mode\": \"Credit Card\", \"Delivery Date\": \"10-08-2014\", \"Amount\": \"9578.45\" }];\n    \nfunction Default() {\n    let spreadsheet;\n    const boldRight = { fontWeight: 'bold', textAlign: 'right' };\n    const bold = { fontWeight: 'bold' };\n    const onCreated = () => {\n        // Apply styles 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        // The default format code for the date format is 'm/d/yyyy'.\n        spreadsheet.numberFormat('m/d/yyyy', 'E2:E30');\n    };\n    return (<div className='control-pane'>\n            <div className='control-section spreadsheet-control'>\n                <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)}>\n                    <SheetsDirective>\n                        <SheetDirective name=\"Car Sales Report\">\n                            <RangesDirective>\n                                <RangeDirective dataSource={defaultData}></RangeDirective>\n                            </RangesDirective>\n                            <RowsDirective>\n                                <RowDirective index={30}>\n                                    <CellsDirective>\n                                        <CellDirective index={4} value=\"Total Amount:\" style={boldRight}></CellDirective>\n                                        <CellDirective formula=\"=SUM(F2:F30)\" style={bold}></CellDirective>\n                                    </CellsDirective>\n                                </RowDirective>\n                            </RowsDirective>\n                            <ColumnsDirective>\n                                <ColumnDirective width={180}></ColumnDirective>\n                                <ColumnDirective width={130}></ColumnDirective>\n                                <ColumnDirective width={130}></ColumnDirective>\n                                <ColumnDirective width={180}></ColumnDirective>\n                                <ColumnDirective width={130}></ColumnDirective>\n                                <ColumnDirective width={120}></ColumnDirective>\n                            </ColumnsDirective>\n                        </SheetDirective>\n                    </SheetsDirective>\n                </SpreadsheetComponent>\n            </div>\n        </div>);\n}\nexport default Default;"
    }
  ]
}