Cell Styles

ReoGrid Web lets you style individual cells or entire ranges — fonts, colors, alignment, text wrapping, and borders.

CellStyle properties

All style properties are optional when setting. Unset properties fall back to the default values shown below.

Styling a cell

Use setStyle() (chainable) or assign to the style property directly.

// Fluent chaining — preferred
worksheet.cell('A1')
  .setValue('Total')
  .setStyle({ bold: true, fontSize: 12, backgroundColor: '#1e3a5f', color: '#ffffff' })

// Property assignment
worksheet.cell('B2').style = { italic: true, textAlign: 'right' }

Each setStyle() call merges into the existing style — only the properties you pass are changed.

worksheet.cell('A1').setStyle({ bold: true })    // sets bold, leaves everything else
worksheet.cell('A1').setStyle({ color: '#e11d48' }) // adds color, bold stays

Styling a range

range.setStyle() applies the same style to every cell in the range.

// Header row
worksheet.range('A1:F1').setStyle({
  bold: true,
  backgroundColor: '#1e3a5f',
  color: '#ffffff',
  textAlign: 'center',
})

// Alternate row shading
worksheet.range('A2:F2').setStyle({ backgroundColor: '#f8fafc' })
worksheet.range('A3:F3').setStyle({ backgroundColor: '#ffffff' })

For background color only, there is a convenience shorthand:

worksheet.range('A1:F1').setBackgroundColor('#dbeafe')

Text alignment

// Horizontal
worksheet.cell('A1').setStyle({ textAlign: 'left' })    // default
worksheet.cell('B1').setStyle({ textAlign: 'center' })
worksheet.cell('C1').setStyle({ textAlign: 'right' })

// Vertical
worksheet.cell('A2').setStyle({ verticalAlign: 'top' })
worksheet.cell('A3').setStyle({ verticalAlign: 'middle' })
worksheet.cell('A4').setStyle({ verticalAlign: 'bottom' }) // default

Text wrap

By default text is clipped at the cell boundary. Enable wrapping to show long content.

// Wrap at cell boundary (respects words)
worksheet.cell('A1').setStyle({ textWrapMode: 'wrap' })

// Wrap by breaking anywhere, including mid-word
worksheet.cell('A1').setStyle({ textWrapMode: 'break-word' })

// No wrap (default — content is clipped)
worksheet.cell('A1').setStyle({ textWrapMode: 'none' })

Set the row height accordingly when using wrap:

worksheet.cell('A1').setValue('This is a long description that should wrap.')
worksheet.cell('A1').setStyle({ textWrapMode: 'wrap' })
worksheet.row(0).height = 60

Borders

Borders are set on a range, not on individual cells. Use range.border(options, sides?).

// All sides of the range boundary
worksheet.range('A1:E10').border({ style: 'solid', color: '#cbd5e1' })

// Specific sides only
worksheet.range('A1:E1').border({ style: 'solid', color: '#1e3a5f', width: 2 }, ['bottom'])
worksheet.range('A1:E10').border({ style: 'dashed', color: '#94a3b8' }, ['top', 'bottom'])

Border options

Border sides

When sides is omitted, borders are applied to all outer edges of the range.

Typical pattern — table with header

// Outer border
worksheet.range('A1:D10').border({ style: 'solid', color: '#475569', width: 1.5 }, ['outside'])

// Inner grid lines
worksheet.range('A1:D10').border({ style: 'solid', color: '#e2e8f0' })

// Bold header bottom
worksheet.range('A1:D1').border({ style: 'solid', color: '#475569', width: 2 }, ['bottom'])

Reading the computed style

const style = worksheet.cell('A1').getStyle()
console.log(style.bold)          // true / false
console.log(style.backgroundColor) // '#1e3a5f'

getStyle() returns the fully resolved style including all defaults, so every property is always present.