Column Header Fit Mode

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

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

Tablesheet supports 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 a tablesheet view in order to display the header and viewport data in a suitable manner. 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; }