{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "spreadsheet-editor-default",
  "framework": "vue",
  "type": "registry:component",
  "component": "SpreadsheetEditor",
  "variant": "default",
  "dependencies": [
    "@syncfusion/ej2-vue-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/vue/llms.txt",
    "skillPack": "syncfusion/vue-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/vue/spreadsheet-editor-default.md"
  },
  "files": [
    {
      "target": "src/components/spreadsheet-editor-default/SpreadSheetEditor.vue",
      "content": "<template>\n  <div class=\"control-section\">\n    <div id=\"spreadsheet-default-section\">\n      <ejs-spreadsheet ref=\"spreadsheet\" :openUrl=\"openUrl\" :saveUrl=\"saveUrl\" :created=\"created\">\n        <e-sheets>\n          <e-sheet name=\"Car Sales Report\">\n            <e-ranges>\n              <e-range :dataSource=\"dataSource\"></e-range>\n            </e-ranges>\n            <e-rows>\n              <e-row :index=\"rowIndex\" :cells=\"cells\"></e-row>\n            </e-rows>\n            <e-columns>\n              <e-column :width=\"width1\"></e-column>\n              <e-column :width=\"width2\"></e-column>\n              <e-column :width=\"width2\"></e-column>\n              <e-column :width=\"width1\"></e-column>\n              <e-column :width=\"width2\"></e-column>\n              <e-column :width=\"width3\"></e-column>\n            </e-columns>\n          </e-sheet>\n        </e-sheets>\n      </ejs-spreadsheet>\n    </div>\n\n  </div>\n</template>\n\n<script>\nimport { SpreadsheetComponent, SheetDirective, RowsDirective, RowDirective, SheetsDirective, ColumnsDirective, ColumnDirective, RangesDirective, RangeDirective } from '@syncfusion/ej2-vue-spreadsheet';\n\nexport default {\n    components: {\n    'ejs-spreadsheet': SpreadsheetComponent,\n    'e-sheet': SheetDirective,\n    'e-sheets': SheetsDirective,\n    'e-row': RowDirective,\n    'e-rows': RowsDirective,\n    'e-column': ColumnDirective,\n    'e-columns': ColumnsDirective,\n    'e-range': RangeDirective,\n    'e-ranges': RangesDirective\n   },\n   data: () => {\n    return {\n      dataSource: [\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      ],\n      rowIndex: 6,\n      colIndex: 4,\n      cells: [\n        { index: 4, value: 'Total Amount:', style: { fontWeight: 'bold', textAlign: 'right' } },\n        { formula: '=SUM(F2:F6)', style: { fontWeight: 'bold' } },\n      ],\n      width1: 180,\n      width2: 130,\n      width3: 120,\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    }\n  },\n  methods: {\n    created: function() {\n      var spreadsheet = this.$refs.spreadsheet;\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:F7');\n      spreadsheet.numberFormat('m/d/yyyy', 'E2:E6');\n    }\n  }\n}\n</script>"
    },
    {
      "target": "src/components/spreadsheet-editor-default/SpreadSheetEditorView.vue",
      "content": "<template>\n  <SpreadSheetEditor />\n</template>\n\n<script setup>\nimport SpreadSheetEditor from '../components/SpreadSheetEditor.vue'\n</script>"
    },
    {
      "target": "src/components/spreadsheet-editor-default/datasource.json",
      "content": "{\n    \"defaultData\": [\n        {\n            \"Customer Name\": \"Romona Heaslip\",\n            \"Model\": \"Taurus\",\n            \"Color\": \"Aquamarine\",\n            \"Payment Mode\": \"Debit Card\",\n            \"Delivery Date\": \"07-11-2015\",\n            \"Amount\": \"8529.22\"\n        },\n        {\n            \"Customer Name\": \"Clare Batterton\",\n            \"Model\": \"Sparrow\",\n            \"Color\": \"Pink\",\n            \"Payment Mode\": \"Cash On Delivery\",\n            \"Delivery Date\": \"07-13-2016\",\n            \"Amount\": \"17866.19\"\n        },\n        {\n            \"Customer Name\": \"Eamon Traise\",\n            \"Model\": \"Grand Cherokee\",\n            \"Color\": \"Blue\",\n            \"Payment Mode\": \"Net Banking\",\n            \"Delivery Date\": \"09-04-2015\",\n            \"Amount\": \"13853.09\"\n        },\n        {\n            \"Customer Name\": \"Julius Gorner\",\n            \"Model\": \"GTO\",\n            \"Color\": \"Aquamarine\",\n            \"Payment Mode\": \"Credit Card\",\n            \"Delivery Date\": \"12-15-2017\",\n            \"Amount\": \"2338.74\"\n        },\n        {\n            \"Customer Name\": \"Jenna Schoolfield\",\n            \"Model\": \"LX\",\n            \"Color\": \"Yellow\",\n            \"Payment Mode\": \"Credit Card\",\n            \"Delivery Date\": \"10-08-2014\",\n            \"Amount\": \"9578.45\"\n        },\n        {\n            \"Customer Name\": \"Marylynne Harring\",\n            \"Model\": \"Catera\",\n            \"Color\": \"Green\",\n            \"Payment Mode\": \"Cash On Delivery\",\n            \"Delivery Date\": \"07-01-2017\",\n            \"Amount\": \"19141.62\"\n        },\n        {\n            \"Customer Name\": \"Vilhelmina Leipelt\",\n            \"Model\": \"7 Series\",\n            \"Color\": \"Goldenrod\",\n            \"Payment Mode\": \"Credit Card\",\n            \"Delivery Date\": \"12-20-2015\",\n            \"Amount\": \"6543.30\"\n        },\n        {\n            \"Customer Name\": \"Barby Heisler\",\n            \"Model\": \"Corvette\",\n            \"Color\": \"Red\",\n            \"Payment Mode\": \"Credit Card\",\n            \"Delivery Date\": \"11-24-2014\",\n            \"Amount\": \"13035.06\"\n        },\n        {\n            \"Customer Name\": \"Karyn Boik\",\n            \"Model\": \"Regal\",\n            \"Color\": \"Indigo\",\n            \"Payment Mode\": \"Debit Card\",\n            \"Delivery Date\": \"05-12-2014\",\n            \"Amount\": \"18488.80\"\n        },\n        {\n            \"Customer Name\": \"Jeanette Pamplin\",\n            \"Model\": \"S4\",\n            \"Color\": \"Fuscia\",\n            \"Payment Mode\": \"Net Banking\",\n            \"Delivery Date\": \"12-30-2014\",\n            \"Amount\": \"12317.04\"\n        }\n    ]\n}"
    }
  ]
}