{
  "$schema": "https://ai.syncfusion.com/schema/registry-item.json",
  "name": "spreadsheet-editor-conditional-formatting",
  "framework": "react",
  "type": "registry:component",
  "component": "SpreadsheetEditor",
  "variant": "conditional-formatting",
  "dependencies": [
    "@syncfusion/ej2-react-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/react/llms.txt",
    "skillPack": "syncfusion/react-ui-components-skills",
    "docs": "https://ai.syncfusion.com/gallery/react/ts/spreadsheet-editor-conditional-formatting.md"
  },
  "files": [
    {
      "target": "src/components/spreadsheet-editor-conditional-formatting/SpreadSheetEditor.tsx",
      "content": "import { SpreadsheetComponent, SheetsDirective, SheetDirective, ColumnsDirective } from '@syncfusion/ej2-react-spreadsheet';\nimport { ColumnDirective, RowDirective, RowsDirective, CellsDirective, CellDirective } from '@syncfusion/ej2-react-spreadsheet';\nimport { ConditionalFormatsDirective, ConditionalFormatDirective, RangeDirective } from '@syncfusion/ej2-react-spreadsheet';\nimport { RangesDirective } from '@syncfusion/ej2-react-spreadsheet';\n\n/**\n * ConditionalFormatting sample\n */\nconst 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\nfunction ConditionalFormatting() {\n    let spreadsheet: SpreadsheetComponent;\n    function onCreated(): void {\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        // Apply format to the specified range in the active sheet.\n        spreadsheet.numberFormat('$#,##0.00', 'D3:D18');\n        spreadsheet.numberFormat('$#,##0.00', 'E3:E18');\n        spreadsheet.numberFormat('$#,##0.00', 'F3:F18');\n        spreadsheet.numberFormat('m/d/yyyy', 'G3:G18');\n        spreadsheet.conditionalFormat({ type: 'BlueDataBar', range: 'D3:D18' });\n        spreadsheet.conditionalFormat({ type: 'GreenDataBar', range: 'E3:E18' });\n        spreadsheet.conditionalFormat({ type: 'ThreeStars', range: 'H3:H18' });\n        spreadsheet.conditionalFormat({ type: 'Top10Items', value: '1', format: { style: { color: '#ffffff', backgroundColor: '#009999', fontWeight: 'bold' } }, range: 'F3:F18' });\n        spreadsheet.conditionalFormat({ type: 'Bottom10Items', value: '1', format: { style: { color: '#ffffff', backgroundColor: '#c68d53', fontWeight: 'bold' } }, range: 'F3:F18' });\n    }\n\n    return (\n        <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'\n                    saveUrl='https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save'\n                    ref={(ssObj) => { spreadsheet = ssObj }} created={onCreated.bind(this)}>\n                    <SheetsDirective>\n                        <SheetDirective name='Inventory List'>\n                            <RowsDirective>\n                                <RowDirective height={30}>\n                                    <CellsDirective>\n                                        <CellDirective index={1} value='Inventory List'></CellDirective>\n                                    </CellsDirective>\n                                </RowDirective>\n                            </RowsDirective>\n                            <RangesDirective>\n                                <RangeDirective dataSource={conditionalFormatting} startCell='A2' ></RangeDirective>\n                            </RangesDirective>\n                            <ConditionalFormatsDirective>\n                                <ConditionalFormatDirective type='GYRColorScale' range='C3:C18'></ConditionalFormatDirective>\n                                <ConditionalFormatDirective type='LessThan' cFColor='RedFT' value='8-8-2019' range='G3:G18'>\n                                </ConditionalFormatDirective>\n                            </ConditionalFormatsDirective>\n                            <ColumnsDirective>\n                                <ColumnDirective width={100}></ColumnDirective>\n                                <ColumnDirective width={158}></ColumnDirective>\n                                <ColumnDirective width={72}></ColumnDirective>\n                                <ColumnDirective width={113}></ColumnDirective>\n                                <ColumnDirective width={113}></ColumnDirective>\n                                <ColumnDirective width={77}></ColumnDirective>\n                                <ColumnDirective width={97}></ColumnDirective>\n                                <ColumnDirective width={73}></ColumnDirective>\n                            </ColumnsDirective>\n                        </SheetDirective>\n                    </SheetsDirective>\n                </SpreadsheetComponent>\n            </div>\n        </div>\n    )\n}\nexport default ConditionalFormatting;"
    }
  ]
}