How to apply conditional formatting for blank cells in JavaScript Spreadsheet

This article explains how to apply conditional formatting for blank cells in a JavaScript Spreadsheet. You can achieve this requirement by using the cellFormat method and the created event. Apply the cell format for the empty cells by iterating through the used range cells in the created event.

[HTML]

<div id="spreadsheet"></div>

[TS]

import { CellModel, getCellAddress, SheetModel, Spreadsheet, UsedRangeModel } from '@syncfusion/ej2-spreadsheet';
import * as dataSource from './default-data.json';

let spreadsheet: Spreadsheet = new Spreadsheet({
 sheets: [
   {
     ranges: [{ dataSource: (dataSource as any).defaultData }],
     columns: [
       { width: 180 },
       { width: 130 },
       { width: 130 },
       { width: 180 },
       { width: 130 },
       { width: 120 },
     ],
   },
 ],
 created: (): void => {
   let sheet: SheetModel = spreadsheet.getActiveSheet();
   let range: UsedRangeModel = sheet.usedRange;
   for (let i: number = 0; i <= range.rowIndex; i++) {
     let cells: CellModel[] = sheet.rows[i].cells;
     for (let j: number = 0; j <= range.colIndex; j++) {
       //Check whether the cell contains value.
       if (!cells[j].value) {
         let address: string = getCellAddress(i, j);
         //Apply formatting to the blank cells using cell formatting
         spreadsheet.cellFormat(
           {
             fontWeight: 'bold',
             fontSize: '12pt',
             backgroundColor: '#279377',
             color: '#ffffff',
           },
           address
         );
       }
     }
   }
 },
});

spreadsheet.appendTo('#spreadsheet');

Sample Link:

Refer to the working sample for additional details and implementation: sample

Output:

Documentation link:

https://ej2.syncfusion.com/documentation/spreadsheet/formatting

Demo link:

https://ej2.syncfusion.com/demos/#/material3/spreadsheet/cell-formatting.html