# 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/ts/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.tsx

```tsx
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"
    }
];

function ConditionalFormatting() {
    let spreadsheet: SpreadsheetComponent;
    function onCreated(): void {
        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;
```