maximum header width setting

Author: nikitaeverywhere

example/index.html

@@ -116,7 +116,8 @@
             //, conditionalFormattingOn: true // enable conditional formatting rules
             //, defaultFilterSpecs: ["[Date].[H1].[month].&[]"] ] // default filters array
             //, drillDownTarget: "<dashboard name>" // undocumented, deepSee only
-            , listingColumnMinWidth: 200 // minimal width of column in listing
+            //, listingColumnMinWidth: 200 // minimal width of column in listing
+            //, maxHeaderWidth: 100 // maximum width of header
         };
 
         if (req.DrillDownExpression) { // set custom DrillDown on variant 10

export/LightPivotTable-DeepSeePortlet.xml

@@ -11,7 +11,7 @@
 
 <Class name="DeepSee.LightPivotTable">
 <Super>%DeepSee.Component.Portlet.abstractPortlet</Super>
-<TimeChanged>63575,78017.533889</TimeChanged>
+<TimeChanged>63575,80028.98656</TimeChanged>
 <TimeCreated>63515,61322.546099</TimeCreated>
 
 <Parameter name="INCLUDEFILES">
@@ -42,6 +42,10 @@
 <Type>%Integer</Type>
 </Property>
 
+<Property name="MaxHeaderWidth">
+<Type>%Integer</Type>
+</Property>
+
 <Method name="%OnGetPortletName">
 <ClassMethod>1</ClassMethod>
 <ReturnType>%String</ReturnType>
@@ -69,6 +73,7 @@
     set pInfo($I(pInfo)) = $LB("Pagination", 0, "%Integer", $$$Text("Pagination", "%DeepSee"), "Enable pagination")
     set pInfo($I(pInfo)) = $LB("FixTotals", 0, "%Boolean", $$$Text("Fix totals", "%DeepSee"), "Fix totals in header")
     set pInfo($I(pInfo)) = $LB("ListingColumnMinWidth", 0, "%Integer", $$$Text("Min cell width for listing", "%DeepSee"), "Minimal column width in listing")
+    set pInfo($I(pInfo)) = $LB("MaxHeaderWidth", 0, "%Integer", $$$Text("Max column width", "%DeepSee"), "Maximal column width for headers")
 
     quit $$$OK
 ]]></Implementation>
@@ -249,6 +254,9 @@
                 if (parseInt(container.getAttribute("listingColumnMinWidth"))) {
                     setup["listingColumnMinWidth"] = parseInt(container.getAttribute("listingColumnMinWidth"))
                 }
+                if (parseInt(container.getAttribute("maxHeaderWidth"))) {
+                    setup["maxHeaderWidth"] = parseInt(container.getAttribute("maxHeaderWidth"))
+                }
 
                 _.LightPivotTable = new LightPivotTable(setup);
 
@@ -345,7 +353,7 @@
     }
 
     &html<
-        <div listingColumnMinWidth="#(..ListingColumnMinWidth)#" fixTotals="#(..FixTotals)#" pagination="#(..Pagination)#" export-csv="#(..ExportCSV)#" data-source="#(..DataSource)#" show-summary="#(..ShowSummary)#" class="lpt-container" style="position: absolute; left: 0; bottom: 0; width: 100%; height: 100%;">
+        <div maxHeaderWidth="#(..MaxHeaderWidth)#" listingColumnMinWidth="#(..ListingColumnMinWidth)#" fixTotals="#(..FixTotals)#" pagination="#(..Pagination)#" export-csv="#(..ExportCSV)#" data-source="#(..DataSource)#" 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.5",
+  "version": "1.0.0-beta.6",
   "description": "A lightweight pivot table for MDX2JSON source for InterSystems Cache",
   "main": "test/testServer.js",
   "repository": {

readme.md

@@ -63,6 +63,8 @@ var setup = { // Object that contain settings. Any setting may be missed.
         [ , enableHeadersScrolling: false ] // enable scrolling both for table and headers. Useful for mobile devices.
         [ , defaultFilterSpecs: ["[Date].[H1].[month].&[]"] ] // default filters array
         [ , drillDownTarget: "<dashboard name>" ] // deepSee only - dashboard to open
+        [ , listingColumnMinWidth: 200 ] // minimal width of column in listing
+        [ , maxHeaderWidth: 100 ] // maximum width of header
     },
     lp = new LightPivotTable(setup);
 

source/css/LightPivot.css

@@ -89,6 +89,7 @@
 .lpt th, .lpt td {
     white-space: pre;
     box-sizing: border-box;
+    overflow: hidden;
 }
 
 .lpt .lpt-tableBlock td {

source/js/PivotView.js

@@ -465,13 +465,15 @@ PivotView.prototype.recalculateSizes = function (container) {
         }
 
         var pagedHeight = this.pagination.on ? this.PAGINATION_BLOCK_HEIGHT : 0,
-            headerW = leftHeader.offsetWidth,
+            headerW = Math.max(leftHeader.offsetWidth, headerContainer.offsetWidth),
             headerH = topHeader.offsetHeight,
             containerHeight = container.offsetHeight,
             bodyHeight = containerHeight - headerH - pagedHeight,
             mainHeaderWidth = headerContainer.offsetWidth,
-            hasVerticalScrollBar = lTableHead.offsetHeight > bodyHeight
+            hasVerticalScrollBar =
+                Math.max(lTableHead.offsetHeight, pTableHead.offsetHeight) > bodyHeight
                 && this.SCROLLBAR_WIDTH > 0,
+            addEggs = hasVerticalScrollBar && lTableHead.offsetHeight > 0,
             cell, tr, cellWidths = [], columnHeights = [], i;
 
         headerContainer.style.width = headerW + "px";
@@ -517,7 +519,7 @@ PivotView.prototype.recalculateSizes = function (container) {
             container["_primaryColumns"][i].style.width = cellWidths[i] + "px";
         }
 
-        if (hasVerticalScrollBar) { // horScroll?
+        if (addEggs) { // horScroll?
             tr = document.createElement("tr");
             tr.appendChild(cell = document.createElement("th"));
             lTableHead.appendChild(tr);
@@ -668,12 +670,20 @@ PivotView.prototype.renderRawData = function (data) {
                     tr.appendChild(
                         th = document.createElement(rawData[y][x].isCaption ? "th" : "td")
                     );
-                    th.textContent = rawData[y][x].value || " ";
+                    if (rawData[y][x].value) {
+                        th.textContent = rawData[y][x].value;
+                    } else th.innerHTML = "‌";
                     if (rawData[y][x].style) th.setAttribute("style", rawData[y][x].style);
                     if (info.leftHeaderColumnsNumber === 0
                         && _.controller.CONFIG["listingColumnMinWidth"]) { // if listing
                         th.style.minWidth = _.controller.CONFIG["listingColumnMinWidth"] + "px";
                     }
+                    if (info.leftHeaderColumnsNumber > 0
+                        && _.controller.CONFIG["maxHeaderWidth"]) {
+                        th.style.maxWidth = _.controller.CONFIG["maxHeaderWidth"] + "px";
+                        th.style.whiteSpace = "normal";
+                        th.style.wordWrap = "normal";
+                    }
                     if (rawData[y][x].className) th.className = rawData[y][x].className;
                     if (rawData[y][x].group) renderedGroups[rawData[y][x].group] = {
                         x: x,
@@ -727,6 +737,13 @@ PivotView.prototype.renderRawData = function (data) {
             _._backClickHandler.call(_, e);
         });
     }
+    if (info.leftHeaderColumnsNumber > 0
+        && _.controller.CONFIG["maxHeaderWidth"]) {
+        pivotHeader.style.maxWidth =
+            _.controller.CONFIG["maxHeaderWidth"]*info.leftHeaderColumnsNumber + "px";
+        pivotHeader.style.whiteSpace = "normal";
+        pivotHeader.style.wordWrap = "normal";
+    }
     if ( // hide unnecessary column
         (this.controller.CONFIG["hideButtons"] || this.tablesStack.length < 2)
         && info.leftHeaderColumnsNumber === 0