Column Header Fit Mode

Some layouts may require short column widths but contains longer column header data that must fully be displayed in the view.

SpreadJS supports several different modes to support this scenario - normal mode, vertical mode, and stacked mode.

Tablesheet support three type to adjust the column header fit mode: normal(default) vertical stack Users can set the column header fit mode for the specified column in tablesheet view to change the header layout in order to display header and viewport data suitably. This is the sample code.
/*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; //init a data manager var baseApiUrl = getBaseApiUrl(); var dataManager = spread.dataManager(); //add product table var productTable = dataManager.addTable("productTable", { remote: { read: { url: baseApiUrl + "/Product" } } }); //init a table sheet var sheet = spread.addSheetTab(0, "TableSheet1", GC.Spread.Sheets.SheetType.tableSheet); sheet.options.allowAddNew = false; //hide new row //bind a view to the table sheet var myView = productTable.addView("myView", [ { value: "Id", caption: "ID", width: 46, headerFit: "vertical" }, { value: "ProductName", caption: "Name", width: 220 }, { value: "QuantityPerUnit", caption: "Quantity Per Unit", width: 140, headerFit: "stack" }, { value: "UnitPrice", caption: "Unit Price", width: 45, headerFit: "stack", headerStyle: { backColor : "#F7A711", foreColor:"white", borderLeft: { color: "#367fc9", style: "thin" }, borderTop: { color: "#367fc9", style: "thick" }, borderRight: { color: "#367fc9", style: "thin" }, borderBottom: { color: "#367fc9", style: "thin" } }}, { value: "UnitsInStock", caption: "Units In Stock", width: 40, headerFit: "stack" }, { value: "UnitsOnOrder", caption: "Units On Order", width: 40, headerFit: "stack", headerStyle: { backColor : "#F7A711"}}, { value: "ReorderLevel", caption: "Reorder Level", width: 140, headerStyle: { borderLeft: { color: "black", style: "thin" }, borderTop: { color: "black", style: "thin" }, borderRight: { color: "black", style: "thin" }, borderBottom: { color: "black", style: "thin" }, } }, { value: "Discontinued", headerFit: "vertical", width: 70} ]); myView.fetch().then(function() { sheet.setDataView(myView); }); 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/@grapecity/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/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/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> </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; }