# spreadsheet-editor-conditional-formatting

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

**Framework:** vue  **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/vue/spreadsheet-editor-conditional-formatting.json
```

**Install Package(s)**

```bash
npm install @syncfusion/ej2-vue-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.vue

```vue
<template>
  <div class="control-section">
    <div id="spreadsheet-conditional-formatting">
        <ejs-spreadsheet ref="spreadsheet" :openUrl="openUrl" :saveUrl="saveUrl" :created="created">
            <e-sheets>
                <e-sheet :name="InventoryList">
                    <e-rows>
                        <e-row :height="height">
                            <e-cells>
                                <e-cell index=1 value="Inventory List"></e-cell>
                            </e-cells>
                        </e-row>
                    </e-rows>
                <e-ranges>
                        <e-range :dataSource="dataSource" startCell="A2" ></e-range>
                </e-ranges>
                <e-conditionalformats>
                    <e-conditionalformat type="GYRColorScale" range="C3:C7" ></e-conditionalformat>
                    <e-conditionalformat type="LessThan" cFColor="RedFT" value="8-8-2019" range="G3:G7"></e-conditionalformat>
                </e-conditionalformats>
                    <e-columns>
                        <e-column :width=100></e-column>
                        <e-column :width=158></e-column>
                        <e-column :width=72></e-column>
                        <e-column :width=113></e-column>
                        <e-column :width=113></e-column>
                        <e-column :width=77></e-column>
                        <e-column :width=97></e-column>
                        <e-column :width=73></e-column>
                    </e-columns>
                </e-sheet>
            </e-sheets>
        </ejs-spreadsheet>
    </div>

  </div>
</template>

<script>
import { SpreadsheetComponent, SheetsDirective, SheetDirective, ColumnsDirective,
ColumnDirective, RowDirective, RowsDirective, CellsDirective, CellDirective,
ConditionalFormatsDirective, ConditionalFormatDirective, RangeDirective,
 RangesDirective, getFormatFromType } from '@syncfusion/ej2-vue-spreadsheet';

export default {
   components: {
    'ejs-spreadsheet': SpreadsheetComponent,
    'e-sheet': SheetDirective,
    'e-sheets': SheetsDirective,
    'e-column': ColumnDirective,
    'e-columns': ColumnsDirective,
    'e-row': RowDirective,
    'e-rows': RowsDirective,
    'e-cell': CellDirective,
    'e-cells': CellsDirective,
    'e-conditionalformat': ConditionalFormatDirective,
    'e-conditionalformats': ConditionalFormatsDirective,
    'e-range': RangeDirective,
    'e-ranges': RangesDirective
   },
   data: () => {
    return {
        height: 30,
        InventoryList: 'Inventory List',
        dataSource: [
            { '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 }
        ],
         openUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/open',
         saveUrl: 'https://document.syncfusion.com/web-services/spreadsheet-editor/api/spreadsheet/save'
    }
  },
  methods: {
    created: function() {
        var currencyFormat = '$#,##0.00';
        var spreadsheet = this.$refs.spreadsheet;
            spreadsheet.merge('A1:H1');
            spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center' }, 'A2:H2');
            spreadsheet.cellFormat({ fontWeight: 'bold', textAlign: 'center', verticalAlign: 'middle', fontSize: '13pt' }, 'A1:H1');
            spreadsheet.numberFormat(currencyFormat, 'D3:D7');
            spreadsheet.numberFormat(currencyFormat, 'E3:E7');
            spreadsheet.numberFormat(currencyFormat, 'F3:F7');
            spreadsheet.numberFormat('m/d/yyyy', 'G3:G7');
            spreadsheet.conditionalFormat({ type: 'BlueDataBar',  range: 'D3:D7' });
            spreadsheet.conditionalFormat({ type: 'GreenDataBar', range: 'E3:E7' });
            spreadsheet.conditionalFormat({ type: 'ThreeStars',   range: 'H3:H7' });
            spreadsheet.conditionalFormat({ type: 'Top10Items',   value:'1', format:{ style:{ color: '#ffffff', backgroundColor: '#009999', fontWeight: 'bold'}}, range: 'F3:F7' });
            spreadsheet.conditionalFormat({ type: 'Bottom10Items',value:'1', format:{ style:{ color: '#ffffff', backgroundColor: '#c68d53', fontWeight: 'bold'}}, range: 'F3:F7' });
            }
        }
}
</script>

```

### src/components/spreadsheet-editor-conditional-formatting/SpreadSheetEditorView.vue

```vue
<template>
  <SpreadSheetEditor />
</template>

<script setup>
import SpreadSheetEditor from '../components/SpreadSheetEditor.vue'
</script>
```

### src/components/spreadsheet-editor-conditional-formatting/datasource.json

```json
{
    "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"
        }
    ]
}
```