Styling

Cell Styles

Apply stable export-time CellStyle objects to data cells, headers, and shared style defaults.

Use cell styles when the formatting is the same for every cell in the column.

This is the right tool for:

number formats
alignment
borders
stable fills
standard header styling

If you want reusable semantic defaults rather than repeating literal style objects, start with Themes.

`CellStyle`

import type { CellStyle
 } from "typed-xlsx";

const style
: CellStyle
 = {
  font
: {
    name
: "Calibri",
    size
: 11,
    bold
: false,
    italic
: false,
    underline
: false,
    strike
: false,
    color
: { rgb
: "000000" },
  },
  fill
: {
    color
: { rgb
: "FFFFFF" },
  },
  border
: {
    top
: { style
: "thin", color
: { rgb
: "CCCCCC" } },
    right
: { style
: "thin", color
: { rgb
: "CCCCCC" } },
    bottom
: { style
: "thin", color
: { rgb
: "CCCCCC" } },
    left
: { style
: "thin", color
: { rgb
: "CCCCCC" } },
  },
  alignment
: {
    horizontal
: "left",
    vertical
: "center",
    wrapText
: false,
  },
  numFmt
: "General",
};

Every field is optional. Only provide the pieces you want to override.

Static data-cell styles

import { createExcelSchema
, type CellStyle
 } from "typed-xlsx";

const moneyStyle
: CellStyle
 = {
  numFmt
: "$#,##0.00",
  alignment
: { horizontal
: "right" },
};

const dateStyle
: CellStyle
 = {
  numFmt
: "dd/mm/yyyy",
  alignment
: { horizontal
: "center" },
};

const schema
 = createExcelSchema
<{ amount
: number; createdAt
: Date
 }>()
  .column
("amount", {
    accessor
: "amount",
    style
: moneyStyle
,
  })
  .column
("createdAt", {
    accessor
: "createdAt",
    style
: dateStyle
,
  })
  .build
();

Header styles

Use headerStyle to style the header independently from the data cells.

import { createExcelSchema
, type CellStyle
 } from "typed-xlsx";

const darkHeader
: CellStyle
 = {
  fill
: { color
: { rgb
: "1E3A5F" } },
  font
: { bold
: true, color
: { rgb
: "FFFFFF" } },
  alignment
: { horizontal
: "center" },
};

const schema
 = createExcelSchema
<{ name
: string; amount
: number }>()
  .column
("name", { accessor
: "name", headerStyle
: darkHeader
 })
  .column
("amount", { accessor
: "amount", headerStyle
: darkHeader
, style
: { numFmt
: "$#,##0.00" } })
  .build
();

Summary styles

Summaries use the same CellStyle shape:

reducer summaries support static style, dynamic style(value), and conditionalStyle
formula summaries support static style and conditionalStyle

Use this page for the style object itself, then see Conditional Styles when the summary should stay live inside Excel.

Border styles reference

border.{top,right,bottom,left}.style accepts any of:

"thin" · "medium" · "thick" · "dashed" · "dotted" · "double" · "hair" · "dashDot" · "dashDotDot"

Number format strings

numFmt follows standard Excel format syntax. Common patterns:

Format	Example output
`"#,##0"`	1,234
`"#,##0.00"`	1,234.56
`"$#,##0.00"`	$1,234.56
`"0%"`	75%
`"0.00%"`	75.00%
`"dd/mm/yyyy"`	31/12/2024
`"d mmm yyyy"`	31 Dec 2024
`"yyyy-mm-dd"`	2024-12-31
`"hh:mm:ss"`	14:30:00
`"#,##0.00\" €\""`	1,234.56 €

Column width

Width is configured alongside the style fields.

import { createExcelSchema
 } from "typed-xlsx";

const schema
 = createExcelSchema
<{ name
: string; notes
: string }>()
  .column
("name", { accessor
: "name", width
: 25 })
  .column
("notes", { accessor
: "notes", width
: 60, style
: { alignment
: { wrapText
: true } } })
  .build
();

Use autoWidth: true to let the engine compute width from the column data. Combine minWidth and maxWidth to bound the auto-computed value.

Themes

Define reusable spreadsheet themes, compose slot-based defaults, and understand how theme layers interact with column styles.

Dynamic Styles

Compute export-time styles from the source row when styling depends on known data.