{
  "$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/js/spreadsheet-editor-conditional-formatting.md"
  },
  "files": [
    {
      "target": "src/components/spreadsheet-editor-conditional-formatting/SpreadSheetEditor.jsx",
      "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 * 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        \"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        \"Item Code\": \"AQ920Z\",\n        \"Item Name\": \"Table Fan\",\n        \"Quantity\": \"405\",\n        \"Purchase Price\": \"33.90\",\n        \"Selling Price\": \"35.00\",\n        \"Profit\": \"=E12-D12\",\n        \"Last Updated\": \"05-28-2019\",\n        \"Rating\": \"3.75\"\n    },\n    {\n        \"Item Code\": \"AE940X\",\n        \"Item Name\": \"Electric Mop\",\n        \"Quantity\": \"47\",\n        \"Purchase Price\": \"153.50\",\n        \"Selling Price\": \"155.00\",\n        \"Profit\": \"=E13-D13\",\n        \"Last Updated\": \"12-18-2019\",\n        \"Rating\": \"3.9\"\n    },\n    {\n        \"Item Code\": \"UI152C\",\n        \"Item Name\": \"Smart LED TV\",\n        \"Quantity\": \"232\",\n        \"Purchase Price\": \"201.25\",\n        \"Selling Price\": \"204.00\",\n        \"Profit\": \"=E14-D14\",\n        \"Last Updated\": \"03-13-2020\",\n        \"Rating\": \"4.35\"\n    },\n    {\n        \"Item Code\": \"UD152V\",\n        \"Item Name\": \"Robotic Vacuum Cleaner\",\n        \"Quantity\": \"210\",\n        \"Purchase Price\": \"182.25\",\n        \"Selling Price\": \"185.00\",\n        \"Profit\": \"=E15-D15\",\n        \"Last Updated\": \"08-26-2019\",\n        \"Rating\": \"4.0\"\n    },\n    {\n        \"Item Code\": \"BK120L\",\n        \"Item Name\": \"Gaming Mouse\",\n        \"Quantity\": \"225\",\n        \"Purchase Price\": \"34.8\",\n        \"Selling Price\": \"38\",\n        \"Profit\": \"=E16-D16\",\n        \"Last Updated\": \"01-12-2020\",\n        \"Rating\": \"4.2\"\n    },\n    {\n        \"Item Code\": \"UF162V\",\n        \"Item Name\": \"Chair\",\n        \"Quantity\": \"373\",\n        \"Purchase Price\": \"104.800\",\n        \"Selling Price\": \"108.00\",\n        \"Profit\": \"=E17-D17\",\n        \"Last Updated\": \"04-12-2019\",\n        \"Rating\": \"3.25\"\n    },\n    {\n        \"Item Code\": \"UR162C\",\n        \"Item Name\": \"Welding Gloves\",\n        \"Quantity\": \"216\",\n        \"Purchase Price\": \"19.00\",\n        \"Selling Price\": \"21.00\",\n        \"Profit\": \"=E18-D18\",\n        \"Last Updated\": \"11-22-2019\",\n        \"Rating\": \"3.85\"\n    }\n];\n\nfunction ConditionalFormatting() {\n    let spreadsheet;\n    function onCreated() {\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    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='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}\nexport default ConditionalFormatting;"
    }
  ]
}