Table Header Enhancement

This sample shows how the table headers can stay fixed to the column headers if the user is scrolling through a large number of table rows. This makes it easy to view the relevant table header information with the corresponding data. To see this in action, scroll the spreadsheet down. The table header cells will replace the column headers cells when they are out of view from the table.

<p>The table header will be displayed in the column header when the users scroll the table data and the table header is out of sheet visible area.</p>
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.tables.add("table1", 1, 1, 44, 4, spreadNS.Tables.TableThemes.light1); sheet.setActiveCell(2, 1); sheet.setColumnWidth(1, 120); sheet.setColumnWidth(2, 120); sheet.setColumnWidth(3, 120); sheet.setColumnWidth(4, 120); for (var i = 1; i < 45; i ++) { if (i % 2 === 0) { sheet.getCell(i, 1).text("Alexa"); sheet.getCell(i, 2).text("Wilder"); sheet.getCell(i, 3).text("90"); } else if (i % 3 === 0) { sheet.getCell(i, 1).text("Victor"); sheet.getCell(i, 2).text("Wooten"); sheet.getCell(i, 3).text("70"); } else { sheet.getCell(i, 1).text("First Name"); sheet.getCell(i, 2).text("Last Name"); sheet.getCell(i, 3).text("Score"); } } spread.resumePaint(); } 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="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"> <div class="option-group"> <label> Please select the table area.</label> <label> tableName:</label> <input id="tableName" /> </div> <div class="option-group"> <input type="button" id="removeTable" value="Remove table" /> <input type="button" id="addTable" value="Add table" /> </div> <hr> <label>Move table to:</label> <div class="option-group"> <label for="moveRow">Row:</label> <input id="moveRow" /> </div> <div class="option-group"> <label for="moveColumn">Column:</label> <input id="moveColumn" /> </div> <div class="option-group"> <input type="button" id="moveTable" value="Move table" /> </div> <label>Resize table:</label> <div class="option-group"> <label for="resizeRow">Row count:</label> <input id="resizeRow" /> </div> <div class="option-group"> <label for="resizeColumn">Column count:</label> <input id="resizeColumn" /> </div> <div class="option-group"> <input type="button" id="resizeTable" value="Resize table" /> </div> <div class="option-group"> <input type="button" id="tableToRange" value="Table To Range" /> <input type="button" id="showTotal" value="Show TotalRow" /> <input style="width: 20px;float: left;" type="checkbox" id="resizeTableUi" /> <label for="resizeColumn">Resize Table UI</label> </div> <div class="option-group"> <input style="width: 20px;float: left;" type="checkbox" id="dropdownList"/> <label for="resizeColumn">TotalRow DropDownList</label> </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: 100%; 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: block; margin-bottom: 6px; } input { padding: 2px 4px; width: 100%; box-sizing: border-box; } input[type=button] { margin-bottom: 6px; } hr { border-color: #fff; opacity: .2; margin: 5px 0; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }