{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "spreadsheet-editor-conditional-formatting",
  "framework": "vue",
  "type": "registry:component",
  "component": "SpreadsheetEditor",
  "variant": "conditional-formatting",
  "dependencies": [
    "@syncfusion/ej2-vue-spreadsheet"
  ],
  "description": "Spreadsheet editor with conditional formatting rules applied to data 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-conditional-formatting.md"
  },
  "files": [
    {
      "target": "src/components/spreadsheet-editor-conditional-formatting/SpreadSheetEditor.vue",
      "content": "<template>\n  <div class=\"control-section\">\n    <div id=\"spreadsheet-conditional-formatting\">\n        <ejs-spreadsheet ref=\"spreadsheet\" :openUrl=\"openUrl\" :saveUrl=\"saveUrl\" :created=\"created\">\n            <e-sheets>\n                <e-sheet :name=\"InventoryList\">\n                    <e-rows>\n                        <e-row :height=\"height\">\n                            <e-cells>\n                                <e-cell index=1 value=\"Inventory List\"></e-cell>\n                            </e-cells>\n                        </e-row>\n                    </e-rows>\n                <e-ranges>\n                        <e-range :dataSource=\"dataSource\" startCell=\"A2\" ></e-range>\n                </e-ranges>\n                <e-conditionalformats>\n                    <e-conditionalformat type=\"GYRColorScale\" range=\"C3:C7\" ></e-conditionalformat>\n                    <e-conditionalformat type=\"LessThan\" cFColor=\"RedFT\" value=\"8-8-2019\" range=\"G3:G7\"></e-conditionalformat>\n                </e-conditionalformats>\n                    <e-columns>\n                        <e-column :width=100></e-column>\n                        <e-column :width=158></e-column>\n                        <e-column :width=72></e-column>\n                        <e-column :width=113></e-column>\n                        <e-column :width=113></e-column>\n                        <e-column :width=77></e-column>\n                        <e-column :width=97></e-column>\n                        <e-column :width=73></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, SheetsDirective, SheetDirective, ColumnsDirective,\nColumnDirective, RowDirective, RowsDirective, CellsDirective, CellDirective,\nConditionalFormatsDirective, ConditionalFormatDirective, RangeDirective,\n RangesDirective, getFormatFromType } from '@syncfusion/ej2-vue-spreadsheet';\n\nexport default {\n   components: {\n    'ejs-spreadsheet': SpreadsheetComponent,\n    'e-sheet': SheetDirective,\n    'e-sheets': SheetsDirective,\n    'e-column': ColumnDirective,\n    'e-columns': ColumnsDirective,\n    'e-row': RowDirective,\n    'e-rows': RowsDirective,\n    'e-cell': CellDirective,\n    'e-cells': CellsDirective,\n    'e-conditionalformat': ConditionalFormatDirective,\n    'e-conditionalformats': ConditionalFormatsDirective,\n    'e-range': RangeDirective,\n    'e-ranges': RangesDirective\n   },\n   data: () => {\n    return {\n        height: 30,\n        InventoryList: 'Inventory List',\n        dataSource: [\n            { 'Item Code': 'AG940Z', 'Item Name': 'Laser Printer',          Quantity: 144, 'Purchase Price': 169.50, 'Selling Price': 172.00, Profit: '=E3-D3', 'Last Updated': '05-25-2019', Rating: 4.5 },\n            { 'Item Code': 'BJ120K', 'Item Name': 'Scientific Calculator',  Quantity: 116, 'Purchase Price':  21.80, 'Selling Price':  23.00, Profit: '=E4-D4', 'Last Updated': '07-28-2019', Rating: 4.0 },\n            { 'Item Code': 'BC120M', 'Item Name': 'Wired Keyboard',         Quantity: 438, 'Purchase Price':  26.80, 'Selling Price':  29.00, Profit: '=E5-D5', 'Last Updated': '03-30-2020', Rating: 4.25 },\n            { 'Item Code': 'BS121L', 'Item Name': 'Memory Card',            Quantity: 486, 'Purchase Price':  23.50, 'Selling Price':  25.00, Profit: '=E6-D6', 'Last Updated': '08-20-2019', Rating: 3.5 },\n            { 'Item Code': 'BU121K', 'Item Name': 'Coffee Maker',           Quantity: 176, 'Purchase Price':  56.50, 'Selling Price':  59.00, Profit: '=E7-D7', 'Last Updated': '02-02-2020', Rating: 4.5 }\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    }\n  },\n  methods: {\n    created: function() {\n        var currencyFormat = '$#,##0.00';\n        var spreadsheet = this.$refs.spreadsheet;\n            spreadsheet.merge('A1:H1');\n            spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A2:H2');\n            spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle', fontSize: '13pt' }, 'A1:H1');\n            spreadsheet.numberFormat(currencyFormat, 'D3:D7');\n            spreadsheet.numberFormat(currencyFormat, 'E3:E7');\n            spreadsheet.numberFormat(currencyFormat, 'F3:F7');\n            spreadsheet.numberFormat('m/d/yyyy', 'G3:G7');\n            spreadsheet.conditionalFormat({ type: 'BlueDataBar',  range: 'D3:D7' });\n            spreadsheet.conditionalFormat({ type: 'GreenDataBar', range: 'E3:E7' });\n            spreadsheet.conditionalFormat({ type: 'ThreeStars',   range: 'H3:H7' });\n            spreadsheet.conditionalFormat({ type: 'Top10Items',   value:'1', format:{ style:{ color: '#ffffff', backgroundColor: '#009999', fontWeight: 'bold'}}, range: 'F3:F7' });\n            spreadsheet.conditionalFormat({ type: 'Bottom10Items',value:'1', format:{ style:{ color: '#ffffff', backgroundColor: '#c68d53', fontWeight: 'bold'}}, range: 'F3:F7' });\n            }\n        }\n}\n</script>\n"
    },
    {
      "target": "src/components/spreadsheet-editor-conditional-formatting/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-conditional-formatting/datasource.json",
      "content": "{\n    \"conditionalFormatting\": [\n        {\n            \"Item Code\": \"AG940Z\",\n            \"Item Name\": \"Laser Printer\",\n            \"Quantity\": \"144\",\n            \"Purchase Price\": \"169.50\",\n            \"Selling Price\": \"172.00\",\n            \"Profit\": \"=E3-D3\",\n            \"Last Updated\": \"05-25-2019\",\n            \"Rating\": \"4.5\"\n        },\n        {\n            \"Item Code\": \"BJ120K\",\n            \"Item Name\": \"Scientific Calculator\",\n            \"Quantity\": \"116\",\n            \"Purchase Price\": \"21.80\",\n            \"Selling Price\": \"23.00\",\n            \"Profit\": \"=E4-D4\",\n            \"Last Updated\": \"07-28-2019\",\n            \"Rating\": \"4.0\"\n        },\n        {\n            \"Item Code\": \"BC120M\",\n            \"Item Name\": \"Wired Keyboard\",\n            \"Quantity\": \"438\",\n            \"Purchase Price\": \"26.80\",\n            \"Selling Price\": \"29.00\",\n            \"Profit\": \"=E5-D5\",\n            \"Last Updated\": \"03-30-2020\",\n            \"Rating\": \"4.25\"\n        },\n        {\n            \"Item Code\": \"BS121L\",\n            \"Item Name\": \"Memory Card\",\n            \"Quantity\": \"486\",\n            \"Purchase Price\": \"23.50\",\n            \"Selling Price\": \"25.00\",\n            \"Profit\": \"=E6-D6\",\n            \"Last Updated\": \"08-20-2019\",\n            \"Rating\": \"3.5\"\n        },\n        {\n            \"Item Code\": \"BU121K\",\n            \"Item Name\": \"Coffee Maker\",\n            \"Quantity\": \"176\",\n            \"Purchase Price\": \"56.50\",\n            \"Selling Price\": \"59.00\",\n            \"Profit\": \"=E7-D7\",\n            \"Last Updated\": \"02-02-2020\",\n            \"Rating\": \"4.5\"\n        },\n        {\n            \"Item Code\": \"BD121M\",\n            \"Item Name\": \"Table Lamp\",\n            \"Quantity\": \"0\",\n            \"Purchase Price\": \"22.50\",\n            \"Selling Price\": \"25.00\",\n            \"Profit\": \"=E8-D8\",\n            \"Last Updated\": \"11-11-2019\",\n            \"Rating\": \"5.0\"\n        },\n        {\n            \"Item Code\": \"AT992X\",\n            \"Item Name\": \"Document Scanner\",\n            \"Quantity\": \"116\",\n            \"Purchase Price\": \"175.00\",\n            \"Selling Price\": \"177.00\",\n            \"Profit\": \"=E9-D9\",\n            \"Last Updated\": \"04-13-2019\",\n            \"Rating\": \"4.75\"\n        },\n        {\n            \"Item Code\": \"AP992Z\",\n            \"Item Name\": \"Gaming Headset\",\n            \"Quantity\": \"58\",\n            \"Purchase Price\": \"32.00\",\n            \"Selling Price\": \"35.00\",\n            \"Profit\": \"=E10-D10\",\n            \"Last Updated\": \"02-14-2020\",\n            \"Rating\": \"4.4\"\n        },\n        {\n            \"Item Code\": \"AW920X\",\n            \"Item Name\": \"Laptop Bag\",\n            \"Quantity\": \"232\",\n            \"Purchase Price\": \"18.90\",\n            \"Selling Price\": \"19.00\",\n            \"Profit\": \"=E11-D11\",\n            \"Last Updated\": \"06-10-2019\",\n            \"Rating\": \"3.9\"\n        }\n    ]\n}"
    }
  ]
}