Sticky Table Headers

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.

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.
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> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: 100%; height: 100%; overflow: hidden; float: left; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }