- SpreadJS Overview
- Getting Started
- JavaScript Frameworks
- Best Practices
-
Features
- Workbook
- Worksheet
- Rows and Columns
- Headers
- Cells
- Data Binding
- TableSheet
- GanttSheet
- JSON Schema with SpreadJS
- SpreadJS File Format
- Data Validation
- Conditional Formatting
- Sort
- Group
- Formulas
- Serialization
- Keyboard Actions
- Shapes
- Form Controls
- 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
Theme
You can create a style and assign the style to a cell, row, column, or sheet. You can also set themes for the SpreadJS control. You can set a current theme, an Excel theme, a bootstrap theme, or create a custom jQuery theme using the ThemeRoller.
Default SpreadJS Theme
You can use the default SpreadJS theme. This requires that a style link is added to the head section of the aspx page. For example:
<link rel="stylesheet" href="css/gc.spread.sheets.x.x.x.css" />
Excel Theme
You can use an Excel theme or style in SpreadJS. This requires that a style link is added to the head section of the aspx page. For example:
<link rel="stylesheet" href="css/gc.spread.sheets.excel2013white.x.x.x.css" />
The following themes are available:
Name | CSS File | Snapshots |
|---|---|---|
Excel 2013 White | gc.spread.sheets.excel2013white.x.x.x.css |
|
Excel 2013 Light Gray | gc.spread.sheets.excel2013lightGray.x.x.x.css |
|
Excel 2013 Dark Gray | gc.spread.sheets.excel2013darkGray.x.x.x.css |
|
Excel 2016 Colorful | gc.spread.sheets.excel2016colorful.x.x.x.css |
|
Excel 2016 Dark Gray | gc.spread.sheets.excel2016darkGray.x.x.x.css |
|
Excel 2016 Black | gc.spread.sheets.excel2016black.x.x.x.css |
|
You can also combine the Excel theme with other themes such as the bootstrap theme. For example:
<link rel="stylesheet" href="css/gc.spread.sheets.excel2013white.x.x.x.css" />
<link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" title="aa" />
<link rel="stylesheet" href="css/bootstrap/bootstrap-theme.min.css" title="aa" />
Use the refresh method if you change a theme.
Bootstrap Theme
You can use a bootstrap theme with SpreadJS. This requires that a style link is added to the head section of the aspx page after the SpreadJS style link. For example, if you have bootstrap.css and bootstrap-theme.css in your project in the CSS folder, you can add the following style links.
<link href=”css/gc.spread.sheets.x.xx.xxxxx.x.css” rel=”stylesheet” type=”text/css” />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/bootstrap-theme.css" />
To configure themes or create a custom theme using ThemeRoller, refer to the following topics.