SpreadJS Documentation
Setting Colors
SpreadJS Documentation > Developer's Guide > Customizing the Appearance > Setting Colors

You can set background and foreground colors for cells, columns, rows, headers, and the widget.

Set the backColor or foreColor methods for cells, columns, headers, or rows. You can set the backColor method or use themes for the widget. You can use the options.grayAreaBackColor property for the gray area.

For more information about themes, refer to Using Themes. You can also use styles to set cell colors. For more information, refer to Setting Styles.

Using Code

This example sets the foreColor and backColor for cell B2.

JavaScript
Copy Code
//Set the backcolor and forecolor of cells.
    var cell = activeSheet.getCell(1, 1, GC.Spread.Sheets.SheetArea.viewport);
    cell.backColor("Blue");
    cell.foreColor("Red");
    cell.value("Color");

Using Code

This example sets the forecolor and backcolor for the header.

JavaScript
Copy Code

//Set the backcolor and forecolor for the entire column header.
     var row = activeSheet.getRange(0, -1, 1, -1, GC.Spread.Sheets.SheetArea.colHeader);
     row.backColor("Red");
     row.foreColor("White");

     //Set the backcolor for the second row header.
     activeSheet.getCell(1, 0, GC.Spread.Sheets.SheetArea.rowHeader).backColor("Yellow");

See Also