column stretching option disabling that fixes clearly column sizes problems

Author: nikitaeverywhere

example/index.html

@@ -130,6 +130,7 @@
             //, maxHeaderWidth: 100 // maximum width of header
             //, columnResizing: true // make columns resizable (default: true)
             //, enableSearch: false // enables search panel in listing
+            //, stretchColumns: true // stretch columns to fill all available width (default: true)
         };
 
         var e;

export/LightPivotTable-DeepSeePortlet.xml

@@ -11,7 +11,7 @@
 
 <Class name="DeepSee.LightPivotTable">
 <Super>%DeepSee.Component.Portlet.abstractPortlet</Super>
-<TimeChanged>63605,62749.080977</TimeChanged>
+<TimeChanged>63606,42413.124862</TimeChanged>
 <TimeCreated>63515,61322.546099</TimeCreated>
 
 <Parameter name="INCLUDEFILES">
@@ -54,6 +54,10 @@
 <Type>%Boolean</Type>
 </Property>
 
+<Property name="StretchColumns">
+<Type>%Boolean</Type>
+</Property>
+
 <Method name="%OnGetPortletName">
 <ClassMethod>1</ClassMethod>
 <ReturnType>%String</ReturnType>
@@ -84,6 +88,7 @@
     set pInfo($I(pInfo)) = $LB("MaxHeaderWidth", 0, "%Integer", "Max column width", "Maximal column width for headers")
     set pInfo($I(pInfo)) = $LB("ColumnResizing", 1, "%Boolean", "Column resizing", "Allow resizing columns with cursor")
     set pInfo($I(pInfo)) = $LB("EnableSearch", 1, "%Boolean", "Enable listing search", "Show search tools in listing mode")
+    set pInfo($I(pInfo)) = $LB("StretchColumns", 0, "%Boolean", "Stretch columns", "Stretch columns to fill all available width")
 
     quit $$$OK
 ]]></Implementation>
@@ -260,6 +265,7 @@
                 setup["attachTotals"] = !!parseInt(container.getAttribute("fixTotals"));
                 setup["columnResizing"] = !!parseInt(container.getAttribute("columnResizing"));
                 setup["enableSearch"] = !!parseInt(container.getAttribute("enableSearch"));
+                setup["stretchColumns"] = !!parseInt(container.getAttribute("stretchColumns"));
                 if (parseInt(container.getAttribute("pagination"))) {
                     setup["pagination"] = parseInt(container.getAttribute("pagination"))
                 }
@@ -396,7 +402,7 @@
     }
 
     &html<
-        <div namespace="#($NAMESPACE)#" enableSearch="#(..EnableSearch)#" columnResizing="#(..ColumnResizing)#" session="#(%session.CSPSessionCookie)#" maxHeaderWidth="#(..MaxHeaderWidth)#" listingColumnMinWidth="#(..ListingColumnMinWidth)#" fixTotals="#(..FixTotals)#" pagination="#(..Pagination)#" export-csv="#(..ExportCSV)#" data-source="#(..DataSourceApp)#" show-summary="#(..ShowSummary)#" class="lpt-container" style="position: absolute; left: 0; bottom: 0; width: 100%; height: 100%;">
+        <div stretchColumns="#(..StretchColumns)#" namespace="#($NAMESPACE)#" enableSearch="#(..EnableSearch)#" columnResizing="#(..ColumnResizing)#" session="#(%session.CSPSessionCookie)#" maxHeaderWidth="#(..MaxHeaderWidth)#" listingColumnMinWidth="#(..ListingColumnMinWidth)#" fixTotals="#(..FixTotals)#" pagination="#(..Pagination)#" export-csv="#(..ExportCSV)#" data-source="#(..DataSourceApp)#" show-summary="#(..ShowSummary)#" class="lpt-container" style="position: absolute; left: 0; bottom: 0; width: 100%; height: 100%;">
 
         </div>
     >

package.json

@@ -1,7 +1,7 @@
 {
   "name": "LightPivotTable",
   "author": "ZitRo",
-  "version": "1.0.0-beta.13",
+  "version": "1.0.0-beta.14",
   "description": "A lightweight pivot table for MDX2JSON source for InterSystems Cache",
   "main": "test/testServer.js",
   "repository": {
@@ -30,5 +30,8 @@
     "data",
     "collection",
     "visualization"
-  ]
+  ],
+  "dependencies": {
+    "gulp-header": "^1.2.2"
+  }
 }

source/js/LightPivotTable.js

@@ -298,6 +298,7 @@ LightPivotTable.prototype.normalizeConfiguration = function (config) {
     if (typeof config["columnResizing"] === "undefined") config.columnResizing = true;
     if (typeof config["pagination"] === "undefined") config.pagination = 200;
     if (typeof config["enableSearch"] === "undefined") config.enableSearch = true;
+    if (typeof config["stretchColumns"] === "undefined") config.stretchColumns = true;
     if (!config["triggers"]) config.triggers = {};
     if (!config["dataSource"]) config.dataSource = {};
 };

source/js/PivotView.js

@@ -504,10 +504,12 @@ PivotView.prototype.recalculateSizes = function (container) {
 
         var headerContainer = container.getElementsByClassName("lpt-header")[0],
             topHeader = container.getElementsByClassName("lpt-topHeader")[0],
+            topHeaderTable = container.getElementsByTagName("table")[0],
             tTableHead = topHeader.getElementsByTagName("thead")[0],
             leftHeader = container.getElementsByClassName("lpt-leftHeader")[0],
             lTableHead = leftHeader.getElementsByTagName("thead")[0],
             tableBlock = container.getElementsByClassName("lpt-tableBlock")[0],
+            mainContentTable = tableBlock.getElementsByTagName("table")[0],
             pTableHead = tableBlock.getElementsByTagName("tbody")[0],
             searchInput = container.getElementsByClassName("lpt-searchInput")[0],
             searchInputSize = searchInput ? container.offsetWidth - this.SEARCHBOX_LEFT_MARGIN : 0,
@@ -523,19 +525,35 @@ PivotView.prototype.recalculateSizes = function (container) {
         var pagedHeight = (this.pagination.on ? this.PAGINATION_BLOCK_HEIGHT : 0)
                 + (this.SEARCH_ENABLED ? this.PAGINATION_BLOCK_HEIGHT : 0),
             headerW = Math.max(leftHeader.offsetWidth, headerContainer.offsetWidth),
-            headerH = topHeader.offsetHeight,
-            containerHeight = container.offsetHeight,
+            headerH = topHeader.offsetHeight;
+
+        topHeader.style.marginLeft = headerW + "px";
+
+        var containerHeight = container.offsetHeight,
             bodyHeight = containerHeight - headerH - pagedHeight,
             mainHeaderWidth = headerContainer.offsetWidth,
             IS_LISTING = lTableHead.offsetHeight === 0,
             hasVerticalScrollBar =
                 Math.max(lTableHead.offsetHeight, pTableHead.offsetHeight) > bodyHeight
                 && this.SCROLLBAR_WIDTH > 0,
-            addEggs = hasVerticalScrollBar && !IS_LISTING,
+            hasHorizontalScrollBar =
+                tTableHead.offsetWidth >
+                    topHeader.offsetWidth - (hasVerticalScrollBar ? this.SCROLLBAR_WIDTH : 0);
+
+        // horizontal scroll bar may change vertical scroll bar, so we need recalculate
+        if (!hasVerticalScrollBar && hasHorizontalScrollBar) {
+            hasVerticalScrollBar =
+                Math.max(lTableHead.offsetHeight, pTableHead.offsetHeight) > bodyHeight - this.SCROLLBAR_WIDTH
+                && this.SCROLLBAR_WIDTH > 0;
+        }
+
+        var addEggs = hasVerticalScrollBar && !IS_LISTING,
             cell, tr, cellWidths = [], columnHeights = [], i,
             headerCellApplied = false;
 
         var applyExtraTopHeadCell = function () {
+            if (!_.controller.CONFIG.stretchColumns &&
+                hasVerticalScrollBar && !hasHorizontalScrollBar) return;
             headerCellApplied = true;
             tr = document.createElement("th");
             tr.className = "lpt-extraCell";
@@ -546,7 +564,6 @@ PivotView.prototype.recalculateSizes = function (container) {
             tTableHead.childNodes[0].appendChild(tr);
         };
 
-        topHeader.style.marginLeft = headerW + "px";
         //return;
         //console.log(lTableHead.offsetHeight, pTableHead.offsetHeight, bodyHeight, this.SCROLLBAR_WIDTH);
         if (hasVerticalScrollBar && tTableHead.childNodes[0]) {
@@ -578,6 +595,10 @@ PivotView.prototype.recalculateSizes = function (container) {
         tableBlock.style.height = containerHeight - headerH - pagedHeight + "px";
         headerContainer.style.height = headerH + "px";
         headerContainer.style.width = headerW + "px";
+        if (!this.controller.CONFIG.stretchColumns) {
+            topHeaderTable.style.width = "auto";
+            mainContentTable.style.width = hasHorizontalScrollBar ? "100%" : "auto";
+        }
 
         // @TEST beta.13
         //for (i in container["_primaryRows"]) {
@@ -1006,7 +1027,7 @@ PivotView.prototype.renderRawData = function (data) {
                     data["conditionalFormatting"],
                     (y - info.topHeaderRowsNumber + 1) + "," + (x - info.leftHeaderColumnsNumber + 1),
                     rawData[y][x].value,
-                    td
+                    div
                 );
             }
 
@@ -1066,6 +1087,9 @@ PivotView.prototype.renderRawData = function (data) {
     pivotBottomSection.appendChild(tableBlock);
     container.appendChild(pivotTopSection);
     container.appendChild(pivotBottomSection);
+    if (!this.controller.CONFIG.stretchColumns) {
+        THTable.style.width = "auto"; // required for correct 1st resizing
+    }
 
     if (pageSwitcher) {
         pageSwitcher.className = "lpt-pageSwitcher";