Cell Formatting in JavaScript Excel

23 Sep 20266 minutes to read

Format cells through cell.style and cell.numberFormat. Prefer these APIs over the internal workbook styles table.

Apply a cell style

import { Workbook, BorderStyle } from '@syncfusion/ej2-xlsx';

const workbook: Workbook = Workbook.create();
const sheet = workbook.sheet(0);
const cell = sheet.cell('A1');
cell.value = 'Total';

cell.style = {
  font: {
    name: 'Calibri',
    size: 12,
    bold: true,
    color: { rgb: 'FFFFFF' },
  },
  fill: {
    patternType: 'solid',
    fgColor: { rgb: '4472C4' },
  },
  alignment: {
    horizontal: 'center',
    vertical: 'center',
    wrapText: true,
  },
  border: {
    top: { style: BorderStyle.Thin, color: { rgb: '000000' } },
    bottom: { style: BorderStyle.Thin, color: { rgb: '000000' } },
    left: { style: BorderStyle.Thin, color: { rgb: '000000' } },
    right: { style: BorderStyle.Thin, color: { rgb: '000000' } },
  },
};
import { Workbook, BorderStyle } from '@syncfusion/ej2-xlsx';

const workbook = Workbook.create();
const sheet = workbook.sheet(0);
const cell = sheet.cell('A1');
cell.value = 'Total';

cell.style = {
  font: {
    name: 'Calibri',
    size: 12,
    bold: true,
    color: { rgb: 'FFFFFF' },
  },
  fill: {
    patternType: 'solid',
    fgColor: { rgb: '4472C4' },
  },
  alignment: {
    horizontal: 'center',
    vertical: 'center',
    wrapText: true,
  },
  border: {
    top: { style: BorderStyle.Thin, color: { rgb: '000000' } },
    bottom: { style: BorderStyle.Thin, color: { rgb: '000000' } },
    left: { style: BorderStyle.Thin, color: { rgb: '000000' } },
    right: { style: BorderStyle.Thin, color: { rgb: '000000' } },
  },
};

Number formats

import { Workbook } from '@syncfusion/ej2-xlsx';

const workbook: Workbook = Workbook.create();
const sheet = workbook.sheet(0);

sheet.cell('A1').number = 1234.5;
sheet.cell('A1').numberFormat = '#,##0.00';

sheet.cell('B1').dateTime = new Date(2026, 0, 15);
sheet.cell('B1').numberFormat = 'yyyy-mm-dd';
import { Workbook } from '@syncfusion/ej2-xlsx';

const workbook = Workbook.create();
const sheet = workbook.sheet(0);

sheet.cell('A1').number = 1234.5;
sheet.cell('A1').numberFormat = '#,##0.00';

sheet.cell('B1').dateTime = new Date(2026, 0, 15);
sheet.cell('B1').numberFormat = 'yyyy-mm-dd';

Clear formatting

Assign undefined to style to clear the cell style without changing the value.

import { Workbook } from '@syncfusion/ej2-xlsx';

const workbook: Workbook = Workbook.create();
const sheet = workbook.sheet(0);

sheet.cell('A1').style = undefined;
import { Workbook } from '@syncfusion/ej2-xlsx';

const workbook = Workbook.create();
const sheet = workbook.sheet(0);

sheet.cell('A1').style = undefined;

Rich text

Use workbook.createFont() and cell.richText.characters() to format parts of the cell text.

import { Workbook } from '@syncfusion/ej2-xlsx';

const workbook: Workbook = Workbook.create();
const sheet = workbook.sheet(0);
const cell = sheet.cell('A1');

cell.value = 'Hello World';
const bold = workbook.createFont();
bold.bold = true;
bold.color = { rgb: 'C00000' };
cell.richText.characters(0, 5).font = bold;
import { Workbook } from '@syncfusion/ej2-xlsx';

const workbook = Workbook.create();
const sheet = workbook.sheet(0);
const cell = sheet.cell('A1');

cell.value = 'Hello World';
const bold = workbook.createFont();
bold.bold = true;
bold.color = { rgb: 'C00000' };
cell.richText.characters(0, 5).font = bold;

createFont() builds a rich-text run font. It does not insert a shared style-table font entry by itself.