# spreadsheet-editor-conditional-formatting

> Spreadsheet editor with conditional formatting rules applied to data ranges.

**Framework:** react  **Component:** SpreadsheetEditor  **Variant:** conditional-formatting

## Get this item

**If you are an agent, fetch the JSON.** Source is inlined, so one request is enough and no tooling is required:

```
GET https://ai.syncfusion.com/r/react/js/spreadsheet-editor-conditional-formatting.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-react-spreadsheet
```

**Notes**

- Syncfusion release: 2026 Volume 2 (v34.1.29)
- The Syncfusion package is licensed. The composition in this file is source you own and edit. See https://ai.syncfusion.com/licensing.md

## Source files

### src/components/spreadsheet-editor-conditional-formatting/SpreadSheetEditor.jsx

```jsx
import { SpreadsheetComponent, SheetsDirective, SheetDirective, ColumnsDirective } from '@syncfusion/ej2-react-spreadsheet';
import { ColumnDirective, RowDirective, RowsDirective, CellsDirective, CellDirective } from '@syncfusion/ej2-react-spreadsheet';
import { ConditionalFormatsDirective, ConditionalFormatDirective, RangeDirective } from '@syncfusion/ej2-react-spreadsheet';
import { RangesDirective } from '@syncfusion/ej2-react-spreadsheet';
/**
 * ConditionalFormatting sample
 */
const conditionalFormatting = [
    {
        "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"
    },
    {
        "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"
    },
    {
        "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"
    },
    {
        "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"
    },
    {
        "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"
    },
    {
        "Item Code": "BD121M",
        "Item Name": "Table Lamp",
        "Quantity": "0",
        "Purchase Price": "22.50",
        "Selling Price": "25.00",
        "Profit": "=E8-D8",
        "Last Updated": "11-11-2019",
        "Rating": "5.0"
    },
    {
        "Item Code": "AT992X",
        "Item Name": "Document Scanner",
        "Quantity": "116",
        "Purchase Price": "175.00",
        "Selling Price": "177.00",
        "Profit": "=E9-D9",
        "Last Updated": "04-13-2019",
        "Rating": "4.75"
    },
    {
        "Item Code": "AP992Z",
        "Item Name": "Gaming Headset",
        "Quantity": "58",
        "Purchase Price": "32.00",
        "Selling Price": "35.00",
        "Profit": "=E10-D10",
        "Last Updated": "02-14-2020",
        "Rating": "4.4"
    },
    {
        "Item Code": "AW920X",
        "Item Name": "Laptop Bag",
        "Quantity": "232",
        "Purchase Price": "18.90",
        "Selling Price": "19.00",
        "Profit": "=E11-D11",
        "Last Updated": "06-10-2019",
        "Rating": "3.9"
    },
    {
        "Item Code": "AQ920Z",
        "Item Name": "Table Fan",
        "Quantity": "405",
        "Purchase Price": "33.90",
        "Selling Price": "35.00",
        "Profit": "=E12-D12",
        "Last Updated": "05-28-2019",
        "Rating": "3.75"
    },
    {
        "Item Code": "AE940X",
        "Item Name": "Electric Mop",
        "Quantity": "47",
        "Purchase Price": "153.50",
        "Selling Price": "155.00",
        "Profit": "=E13-D13",
        "Last Updated": "12-18-2019",
        "Rating": "3.9"
    },
    {
        "Item Code": "UI152C",
        "Item Name": "Smart LED TV",
        "Quantity": "232",
        "Purchase Price": "201.25",
        "Selling Price": "204.00",
        "Profit": "=E14-D14",
        "Last Updated": "03-13-2020",
        "Rating": "4.35"
    },
    {
        "Item Code": "UD152V",
        "Item Name": "Robotic Vacuum Cleaner",
        "Quantity": "210",
        "Purchase Price": "182.25",
        "Selling Price": "185.00",
        "Profit": "=E15-D15",
        "Last Updated": "08-26-2019",
        "Rating": "4.0"
    },
    {
        "Item Code": "BK120L",
        "Item Name": "Gaming Mouse",
        "Quantity": "225",
        "Purchase Price": "34.8",
        "Selling Price": "38",
        "Profit": "=E16-D16",
        "Last Updated": "01-12-2020",
        "Rating": "4.2"
    },
    {
        "Item Code": "UF162V",
        "Item Name": "Chair",
        "Quantity": "373",
        "Purchase Price": "104.800",
        "Selling Price": "108.00",
        "Profit": "=E17-D17",
        "Last Updated": "04-12-2019",
        "Rating": "3.25"
    },
    {
        "Item Code": "UR162C",
        "Item Name": "Welding Gloves",
        "Quantity": "216",
        "Purchase Price": "19.00",
        "Selling Price": "21.00",
        "Profit": "=E18-D18",
        "Last Updated": "11-22-2019",
        "Rating": "3.85"
    }
];

function ConditionalFormatting() {
    let spreadsheet;
    function onCreated() {
        spreadsheet.merge('A1:H1');
        spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A2:H2');
        spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle', fontSize: '13pt' }, 'A1:H1');
        // Apply format to the specified range in the active sheet.
        spreadsheet.numberFormat('$#,##0.00', 'D3:D18');
        spreadsheet.numberFormat('$#,##0.00', 'E3:E18');
        spreadsheet.numberFormat('$#,##0.00', 'F3:F18');
        spreadsheet.numberFormat('m/d/yyyy', 'G3:G18');
        spreadsheet.conditionalFormat({ type: 'BlueDataBar', range: 'D3:D18' });
        spreadsheet.conditionalFormat({ type: 'GreenDataBar', range: 'E3:E18' });
        spreadsheet.conditionalFormat({ type: 'ThreeStars', range: 'H3:H18' });
        spreadsheet.conditionalFormat({ type: 'Top10Items', value: '1', format: { style: { color: '#ffffff', backgroundColor: '#009999', fontWeight: 'bold' } }, range: 'F3:F18' });
        spreadsheet.conditionalFormat({ type: 'Bottom10Items', value: '1', format: { style: { color: '#ffffff', backgroundColor: '#c68d53', fontWeight: 'bold' } }, range: 'F3:F18' });
    }
    return (<div className='control-pane'>
            <div className='control-section spreadsheet-control'>
                <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)}>
                    <SheetsDirective>
                        <SheetDirective name='Inventory List'>
                            <RowsDirective>
                                <RowDirective height={30}>
                                    <CellsDirective>
                                        <CellDirective index={1} value='Inventory List'></CellDirective>
                                    </CellsDirective>
                                </RowDirective>
                            </RowsDirective>
                            <RangesDirective>
                                <RangeDirective dataSource={conditionalFormatting} startCell='A2'></RangeDirective>
                            </RangesDirective>
                            <ConditionalFormatsDirective>
                                <ConditionalFormatDirective type='GYRColorScale' range='C3:C18'></ConditionalFormatDirective>
                                <ConditionalFormatDirective type='LessThan' cFColor='RedFT' value='8-8-2019' range='G3:G18'>
                                </ConditionalFormatDirective>
                            </ConditionalFormatsDirective>
                            <ColumnsDirective>
                                <ColumnDirective width={100}></ColumnDirective>
                                <ColumnDirective width={158}></ColumnDirective>
                                <ColumnDirective width={72}></ColumnDirective>
                                <ColumnDirective width={113}></ColumnDirective>
                                <ColumnDirective width={113}></ColumnDirective>
                                <ColumnDirective width={77}></ColumnDirective>
                                <ColumnDirective width={97}></ColumnDirective>
                                <ColumnDirective width={73}></ColumnDirective>
                            </ColumnsDirective>
                        </SheetDirective>
                    </SheetsDirective>
                </SpreadsheetComponent>
            </div>
        </div>);
}
export default ConditionalFormatting;
```