Styles

SpreadJS provides many APIs for working with tables. By using these APIs, you can manage and analyze groups of related data more easily.

<p>You can control whether to show the table's header or footer, whether to display an alternating row style or column style, and whether to highlight the first column or the last column. For example:</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> spread = GC.Spread.Sheets.findControl(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'ss'</span>)); <span class="hljs-keyword">var</span> sheet = spread.getActiveSheet(); <span class="hljs-keyword">var</span> table = sheet.tables.add(<span class="hljs-string">'table1'</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">4</span>, <span class="hljs-number">4</span>, tableStyle); <span class="hljs-string">'table1'</span> === table.name(); <span class="hljs-comment">//true</span> <span class="hljs-number">0</span> === table.headerIndex(); <span class="hljs-comment">//true</span> <span class="hljs-number">3</span> === table.footerIndex(); <span class="hljs-comment">//true</span> table.showHeader(<span class="hljs-literal">true</span>); <span class="hljs-comment">//whether to display a header</span> table.showFooter(<span class="hljs-literal">true</span>); <span class="hljs-comment">//whether to display a footer</span> table.bandRows(<span class="hljs-literal">true</span>); <span class="hljs-comment">//whether to display an alternating row style</span> table.bandColumns(<span class="hljs-literal">true</span>); <span class="hljs-comment">//whether to display an alternating column style</span> table.highlightFirstColumn(<span class="hljs-literal">true</span>); <span class="hljs-comment">//whether to highlight the first column</span> table.highlightLastColumn(<span class="hljs-literal">true</span>); <span class="hljs-comment">//whether to highlight the last column</span> <span class="hljs-keyword">var</span> columnName = table.getColumnName(<span class="hljs-number">0</span>); <span class="hljs-comment">//get the header text with the specified table index.</span> table.setColumnName(<span class="hljs-number">1</span>, <span class="hljs-string">'column2'</span>); <span class="hljs-comment">//set the table header text.</span> table.setColumnFormula(<span class="hljs-number">0</span>, <span class="hljs-string">'=SUM(A1:A4)'</span>); <span class="hljs-comment">//Set the table footer formula with the specified index</span> <span class="hljs-string">'SUM(B2:B5)'</span> === table.getColumnFormula(<span class="hljs-number">0</span>); <span class="hljs-comment">//Gets the table footer formula with the specified index.</span> </code></pre> <p>SpreadJS supports built-in table styles or you can customize the table style. For example:</p> <pre><code class="hljs js language-js"> table.style(GC.Spread.Sheets.Tables.TableThemes.dark1); <span class="hljs-keyword">var</span> border = <span class="hljs-keyword">new</span> GC.Spread.Sheets.LineBorder(); <span class="hljs-keyword">var</span> styleInfo = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Tables.TableStyle(<span class="hljs-string">'red'</span>, <span class="hljs-string">'black'</span>, <span class="hljs-string">'10px arial'</span>, border, border, border, border, border, border); <span class="hljs-keyword">var</span> tableStyle = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Tables.TableTheme(); tableStyle.name(<span class="hljs-string">'tableStyle1'</span>); tableStyle.headerRowStyle(styleInfo) table.style(tableStyle); </code></pre>
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); }; function initSpread(spread) { spread.suspendPaint(); var spreadNS = GC.Spread.Sheets; var sheet = spread.getSheet(0); sheet.bind(spreadNS.Events.SelectionChanged, tableName); var table = sheet.tables.add("table1", 1, 1, 4, 4, spreadNS.Tables.TableThemes.medium2); sheet.setColumnWidth(1, 120); sheet.setColumnWidth(2, 120); sheet.setColumnWidth(3, 120); sheet.setColumnWidth(4, 120); sheet.getCell(1, 1).text("First Name"); sheet.getCell(1, 2).text("Last Name"); sheet.getCell(1, 3).text("Score"); sheet.getCell(1, 4).text("Position"); sheet.getCell(2, 1).text("Alexa"); sheet.getCell(2, 2).text("Wilder"); sheet.getCell(2, 3).text("90"); sheet.getCell(2, 4).text("Web Developer"); sheet.getCell(3, 1).text("Victor"); sheet.getCell(3, 2).text("Wooten"); sheet.getCell(3, 3).text("70"); sheet.getCell(3, 4).text(".NET Developer"); sheet.getCell(4, 1).text("Ifeoma"); sheet.getCell(4, 2).text("Mays"); sheet.getCell(4, 3).text("85"); sheet.getCell(4, 4).text("Sales Manager"); spread.resumePaint(); function tableName() { var sheet = spread.getActiveSheet(); var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); var name = ""; if (table && table.name) { name = table.name(); } $("#tableName").text(name); } _getElementById("showHeader").addEventListener('change', function() { var sheet = spread.getActiveSheet(); var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); if (table) { table.showHeader(_getElementById("showHeader").checked); sheet.invalidateLayout(); sheet.repaint(); } }); _getElementById("showFooter").addEventListener('change', function() { var sheet = spread.getActiveSheet(); var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); if (table) { table.showFooter(_getElementById("showFooter").checked); sheet.invalidateLayout(); sheet.repaint(); } }); _getElementById("highlightFirstColumn").addEventListener('change', function() { var sheet = spread.getActiveSheet(); var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); if (table) { table.highlightFirstColumn(_getElementById("highlightFirstColumn").checked); sheet.invalidateLayout(); sheet.repaint(); } }); _getElementById("highlightLastColumn").addEventListener('change', function() { var sheet = spread.getActiveSheet(); var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); if (table) { table.highlightLastColumn(_getElementById("highlightLastColumn").checked); sheet.invalidateLayout(); sheet.repaint(); } }); _getElementById("bandRows").addEventListener('change', function() { var sheet = spread.getActiveSheet(); var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); if (table) { table.bandRows(_getElementById("bandRows").checked); sheet.invalidateLayout(); sheet.repaint(); } }); _getElementById("bandColumns").addEventListener('change', function() { var sheet = spread.getActiveSheet(); var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); if (table) { table.bandColumns(_getElementById("bandColumns").checked); sheet.invalidateLayout(); sheet.repaint(); } }); //change table style _getElementById("tableStyles").addEventListener('change', function() { var sheet = spread.getActiveSheet(); var table = sheet.tables.find(sheet.getActiveRowIndex(), sheet.getActiveColumnIndex()); if (table) { var style = getTableStyle(); // if (style) { table.style(style); sheet.repaint(); // } } }); function getTableStyle() { var obj = _getElementById("tableStyles"), styleName = obj.options[obj.selectedIndex].text; if (styleName) { return spreadNS.Tables.TableThemes[styleName.toLowerCase()]; } return null; } } function _getElementById(id) { return document.getElementById(id); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/jquery-1.8.2.min.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> <div class="options-container"> <p>Try selecting the table in the Spread instance and change the style and properties using the checkboxes and drop-down menu.</p> <div class="option-group"> <input type="checkbox" id="showHeader" checked/> <label for="showHeader">Header Row</label> </div> <div class="option-group"> <input type="checkbox" id="highlightFirstColumn" /> <label for="highlightFirstColumn">First Column</label> </div> <div class="option-group"> <input type="checkbox" id="showFooter" /> <label for="showFooter">Total Row</label> </div> <div class="option-group"> <input type="checkbox" id="highlightLastColumn" /> <label for="highlightLastColumn">Last Column</label> </div> <div class="option-group"> <input type="checkbox" id="bandColumns" /> <label for="bandColumns">Banded Column</label> </div> <div class="option-group"> <input type="checkbox" id="bandRows" /> <label for="bandRows">Banded Row</label> </div> <div class="option-group"> <label for="tableStyles">Built-in Styles:</label> <select id="tableStyles"> <option value="0">Light1</option> <option value="1">Light2</option> <option value="2">Light3</option> <option value="3">Light4</option> <option value="4">Light5</option> <option value="5">Light6</option> <option value="6">Light7</option> <option value="7">Light8</option> <option value="8">Light9</option> <option value="9">Light10</option> <option value="10">Light11</option> <option value="11">Light12</option> <option value="12">Light13</option> <option value="13">Light14</option> <option value="14">Light15</option> <option value="15">Light16</option> <option value="16">Light17</option> <option value="17">Light18</option> <option value="18">Light19</option> <option value="19">Light20</option> <option value="20">Light21</option> <option value="21">Medium1</option> <option value="22" selected>Medium2</option> <option value="23">Medium3</option> <option value="24">Medium4</option> <option value="25">Medium5</option> <option value="26">Medium6</option> <option value="27">Medium7</option> <option value="28">Medium8</option> <option value="29">Medium9</option> <option value="30">Medium10</option> <option value="31">Medium11</option> <option value="32">Medium12</option> <option value="33">Medium13</option> <option value="34">Medium14</option> <option value="35">Medium15</option> <option value="36">Medium16</option> <option value="37">Medium17</option> <option value="38">Medium18</option> <option value="39">Medium19</option> <option value="40">Medium20</option> <option value="41">Medium21</option> <option value="42">Medium22</option> <option value="43">Medium23</option> <option value="44">Medium24</option> <option value="45">Medium25</option> <option value="46">Medium26</option> <option value="47">Medium27</option> <option value="48">Medium28</option> <option value="49">Dark1</option> <option value="50">Dark2</option> <option value="51">Dark3</option> <option value="52">Dark4</option> <option value="53">Dark5</option> <option value="54">Dark6</option> <option value="55">Dark7</option> <option value="56">Dark8</option> <option value="57">Dark9</option> <option value="58">Dark10</option> <option value="59">Dark11</option> <option value="60">None</option> </select> </div> </div> </div> </body> </html>
.sample { position: relative; height: 100%; overflow: auto; } .sample::after { display: block; content: ""; clear: both; } .sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } .option-group { margin-bottom: 6px; } label { display: inline-block; min-width: 90px; margin-bottom: 6px; } select { padding: 4px 6px; } p { padding: 0 0 12px; margin: 0; } .options-toggle { display: none; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }