Pinned Rows and Columns

TableSheet allows pinning rows to the top row(s) and left column(s) of the view so they are always visible when scrolling. Pinning rows and columns is helpful when placing related rows or columns close to each other for comparison. Pinned rows can be used as a shelf or working area for specific rows, and they are not affected by the Sort and Filter operations.

The SpreadJS TableSheet lets users pin the rows/columns, which will always display on top of the current view. The pinned state can be canceled with the unpin action. The user can pin/unpin using the context menu in the header or by using the API. This is the sample code for using that API :
/*REPLACE_MARKER*/ /*DO NOT DELETE THESE COMMENTS*/ window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 0 }); initSpread(spread); }; function initSpread(spread) { spread.suspendPaint(); spread.options.autoFitType = GC.Spread.Sheets.AutoFitType.cellWithHeader; spread.bind(GC.Spread.Sheets.Events.InvalidOperation, function (e, args) { alert(args.message); }); //init a data manager var baseApiUrl = getBaseApiUrl(); var dataManager = spread.dataManager(); //add product table var productTable = dataManager.addTable("productTable", { remote: { read: { url: baseApiUrl + "/Supplier" } } }); //init a table sheet var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet); sheet.options.allowAddNew = false; //hide new row sheet.setDefaultRowHeight(40, GC.Spread.Sheets.SheetArea.colHeader); //bind a view to the table sheet var myView = productTable.addView("myView", [ { value: "Id", width: 80 }, { value: "CompanyName", width: 200, caption :"Company Name" }, { value: "ContactName", width: 150, caption :"Contact" }, { value: "ContactTitle", width: 200, caption :"Title" }, { value: "Address", width: 200 }, { value: "City", width: 150, caption :"City" }, { value: "State", width: 100, caption :"State" }, { value: "Region", width: 100, caption :"Region" } ]); myView.fetch().then(function() { sheet.setDataView(myView); sheet.togglePinnedRows([1, 3, 6]); sheet.togglePinnedColumns([1]); }); spread.resumePaint(); } function getBaseApiUrl() { return window.location.href.match(/http.+spreadjs\/demos\//)[0] + 'server/api'; }
<!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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- Promise Polyfill for IE, https://www.npmjs.com/package/promise-polyfill --> <script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets-tablesheet/dist/gc.spread.sheets.tablesheet.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 id="optionContainer" class="optionContainer"> </div> </div> </body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .sample-spreadsheets { width: 100%; height: 100%; overflow: hidden; float: left; }