- SpreadJS Overview
- Getting Started
- JavaScript Frameworks
- Best Practices
-
Features
- Workbook
- Worksheet
- Rows and Columns
- Headers
- Cells
- Data Binding
- TableSheet
- GanttSheet
-
ReportSheet
-
Template Sheet Settings
- Set Template Cell Type
- Set Spill Mode
- Apply Cell Expansion
- Set Spill Direction
- Set Pin
- Set Cell Context
- Set Filter Condition
- Sort Cell Data
- Auto Fit Template Cell
- Change Cell Styles
- Apply Conditional Formatting
- Add Data Validation
- Change Cell States
- Add Show/Collapse Button
- ReportSheet Formula Functions
- Configure Data Entry Settings
- Set Pagination
- Configure Layout Settings
- Add Picture Shape
- Report Sheet Settings
- Report Sheet Data Entry Support
- Report Sheet Data Charts
-
Template Sheet Settings
- Data Charts
- JSON Schema with SpreadJS
- SpreadJS File Format
- Data Validation
- Conditional Formatting
- Sort
- Group
- Formulas
- Serialization
- Keyboard Actions
- Shapes
- Floating Objects
- Barcodes
- Charts
- Sparklines
- Tables
- Pivot Table
- Slicer
- Theme
- Culture
- SpreadJS Designer
- SpreadJS Designer Component
- Touch Support
- Formula Reference
- Import and Export Reference
- Frequently Used Events
- API Documentation
- Release Notes
Change Cell Styles
When creating a report, it is important to set some background color or border for some cells to enhance the UI of the report. In the ReportSheet, the style of the cell matches the style of the corresponding template cell. You can set styles in the TemplateSheet for the content that needs to be highlighted, either as an expanded cell or as a non-expanded cell.
Notes:
If you set the style on a non-extended cell in the TemplateSheet, the range affected by the style will not change on the DataEntryPreview render mode of the ReportSheet, but the position corresponding to the style's appearance will change offset.
If you set the style on an extended cell in the TemplateSheet, then on the DataEntryPreview render mode of the ReportSheet, the range affected by the style will change and the position corresponding to the appearance of the style will be offset.
The following code samples show how to set different cell styles.
// Header Style
const headerStyle = new GC.Spread.Sheets.Style();
headerStyle.backColor = '#bfdbd8';
headerStyle.foreColor = '#424242';
headerStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
headerStyle.vAlign = GC.Spread.Sheets.HorizontalAlign.center;
headerStyle.font = '12px Maine';
// Column 1 Style
const style1 = new GC.Spread.Sheets.Style();
style1.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style1.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style1.backColor = "lightgrey";
// Column 2 Style
const style2 = new GC.Spread.Sheets.Style();
style2.vAlign = GC.Spread.Sheets.VerticalAlign.center;
style2.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
style2.borderTop = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
style2.borderBottom = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
style2.font = '12px Maine';
style2.backColor = '#edebeb';
// Column 3 Style
const style3 = new GC.Spread.Sheets.Style();
style3.backColor = 'whitesmoke';
style3.borderLeft = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
style3.borderTop = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
style3.borderRight = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
style3.borderBottom = new GC.Spread.Sheets.LineBorder("black", GC.Spread.Sheets.LineStyle.thin);
// Set the Styles
templateSheet.getRange('A1:C1').setStyle(headerStyle);
// The style set in the template sheet will be expanded with the current cell
templateSheet.getRange('A2').setStyle(style1);
templateSheet.getRange('B2').setStyle(style2);
templateSheet.getRange('C2').setStyle(style3);The output of the above code will look like below.
