Skip to main content

Styling

Styling can be assigned to a range using the ICell.getStyle() interface.

Reading Cell Styles Values​

Cell Styles are accessed as a property on the ICell interface which is available from the ICellRange interface or from the forEach.

// Note getCell is not recommended if accessing many values
const cell:ICell = workbook.getRange('Sheet1!A1').getCell();
const style:IStyle = cell.getStyle();

// If accessing many values use the forEach iterator.
workbook.getRange('Sheet1!A1:E5').forEach((value: Scalar, context: ICell.IteratorContext) => {
  // only cells with a value will be visited. A complex ICell can be accessed using the context.
  const cell:ICell = context.getCell();
  const style:IStyle = cell.getStyle();
}, options);

Updating Styles​

Writing cells styles is similar to writing values and the ICellRange.updateStyle is used. The biggest addition to data values is that cell styles are complex objects that support 'partial' updates.

To update a style a JSON object that mirrors the IStyle interface is used but with the following rules.

  1. If value is a valid type it will replace the existing value.
  2. If value is null it will 'default' the value to the original style value.
  3. If the value is undefined or not present it will be ignored.
  4. If the value is a string it will be parsed similar to CSS (See individual style property for details); for example a border can be set by using the following: 1px solid red or a font can be set by using 14pt Arial.
  5. If the value is a function then the function will be called with the original value and the result will be applied Note - This can have negative performance impacts so use carefully.
Updating style
// update style to several cells.
const updateExample1:IStyle.Update = {
  font: '14pt Arial',
  fill: IColor.Named.AliceBlue,
};
workbook.getRange('Sheet1!A1:E5').updateStyle(updateExample1);

// revert the fill to the normal style but leave the font change intact.
workbook.getRange('Sheet1!A1:E5').updateStyle({
  fill: null,
});

Themes​

Cell Styles use Themes, implemented as ITheme, to determine colors, fonts, and other visual effects. These are based on the OOXML standards used by Microsoft Excel and (mostly) Google Sheets.

The theme is generally embedded within the Sheet or Workbook so if these are shared the themes will also be shared.

A working example is available at CodeSandbox/custom-app-theme