listing search, fixed IE/FF header columns, style fixes

Author: nikitaeverywhere

example/index.html

@@ -119,6 +119,7 @@
             //, listingColumnMinWidth: 200 // minimal width of column in listing
             //, maxHeaderWidth: 100 // maximum width of header
             //, columnResizing: true // make columns resizable (default: true)
+            //, enableSearch: false // enables search panel in listing
         };
 
         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>63578,68626.779569</TimeChanged>
+<TimeChanged>63579,79833.277338</TimeChanged>
 <TimeCreated>63515,61322.546099</TimeCreated>
 
 <Parameter name="INCLUDEFILES">
@@ -50,6 +50,10 @@
 <Type>%Boolean</Type>
 </Property>
 
+<Property name="EnableSearch">
+<Type>%Boolean</Type>
+</Property>
+
 <Method name="%OnGetPortletName">
 <ClassMethod>1</ClassMethod>
 <ReturnType>%String</ReturnType>
@@ -79,6 +83,7 @@
     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")
     set pInfo($I(pInfo)) = $LB("ColumnResizing", 1, "%Boolean", $$$Text("Column resizing", "%DeepSee"), "Allow resizing columns with cursor")
+    set pInfo($I(pInfo)) = $LB("EnableSearch", 1, "%Boolean", $$$Text("Enable listing search", "%DeepSee"), "Show search tools in listing mode")
 
     quit $$$OK
 ]]></Implementation>
@@ -254,6 +259,7 @@
                 setup["showSummary"] = !!parseInt(container.getAttribute("show-summary"));
                 setup["attachTotals"] = !!parseInt(container.getAttribute("fixTotals"));
                 setup["columnResizing"] = !!parseInt(container.getAttribute("columnResizing"));
+                setup["enableSearch"] = !!parseInt(container.getAttribute("enableSearch"));
                 if (parseInt(container.getAttribute("pagination"))) {
                     setup["pagination"] = parseInt(container.getAttribute("pagination"))
                 }
@@ -388,7 +394,7 @@
     }
 
     &html<
-        <div columnResizing="#(..ColumnResizing)#" session="#(%session.CSPSessionCookie)#" 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 enableSearch="#(..EnableSearch)#" columnResizing="#(..ColumnResizing)#" session="#(%session.CSPSessionCookie)#" 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.7",
+  "version": "1.0.0-beta.8",
   "description": "A lightweight pivot table for MDX2JSON source for InterSystems Cache",
   "main": "test/testServer.js",
   "repository": {

readme.md

@@ -66,6 +66,7 @@ var setup = { // Object that contain settings. Any setting may be missed.
         [ , listingColumnMinWidth: 200 ] // minimal width of column in listing
         [ , maxHeaderWidth: 100 ] // maximum width of header
         [ , columnResizing: true ] // make columns resizable (default: true)
+        [ , enableSearch: true ] // enables search panel in listing (default: true)
     },
     lp = new LightPivotTable(setup);
 

source/css/LightPivot.css

@@ -173,7 +173,6 @@
 
 .lpt .lpt-pageSwitcher {
     position: absolute;
-    display: table;
     box-sizing: border-box;
     bottom: 0;
     width: 100%;
@@ -185,8 +184,6 @@
 
 .lpt .lpt-pageSwitcher > div {
     position: relative;
-    display: table-cell;
-    vertical-align: middle;
     height: 100%;
     text-align: center;
 }
@@ -368,17 +365,109 @@
     padding: 0 !important;
 }
 
+.lpt-searchBlock {
+    position: absolute;
+    box-sizing: border-box;
+    overflow: hidden;
+    bottom: 20px;
+    width: 100%;
+    height: 20px;
+    font-size: 14px;
+    border: 1px solid rgb(208, 208, 208);
+    background: #F0F0F0;
+}
+
+.lpt-searchSelectOuter {
+    position: relative;
+    display: inline-block;
+    width: 150px;
+    margin: 1px 0 0 5px;
+    overflow: hidden;
+    vertical-align: top;
+    background: #F0F0F0;
+    border: 1px solid #D0D0D0;
+    border-top: none;
+    border-bottom: none;
+    border-radius: 10px;
+}
+
+.lpt-searchSelectOuter:after {
+    content: "\25bc";
+    position: absolute;
+    top: 0;
+    right: 5px;
+    color: gray;
+}
+
+.lpt-searchSelectOuter select {
+    font-size: 13px;
+    padding: 0 0 0 2px;
+    width: 170px;
+    vertical-align: top;
+    height: 17px;
+    max-height: 20px;
+    background: transparent;
+    outline: medium none;
+    border: 0;
+    cursor: pointer;
+}
+
+/* relative positioning is incorrect here */
 .lpt-resizableColumn {
+
+}
+
+.lpt-searchIcon {
     position: relative;
+    display: inline-block;
+    vertical-align: top;
+    box-sizing: border-box;
+    margin: 1px 0 0 1px;
+    width: 17px;
+    height: 17px;
+    border-radius: 9px;
+    background: #ffffff;
+    border: 1px solid rgb(208, 208, 208);
 }
 
-.lpt-resizableColumn:after {
-    display: block;
+.lpt-searchIcon:before {
     position: absolute;
     content: "";
-    right: -5px;
-    top: 0;
-    width: 10px;
-    cursor: col-resize !important;
-    height: 100%;
+    left: 1px;
+    top: 1px;
+    width: 4px;
+    height: 4px;
+    border: 3px solid grey;
+    border-radius: 5px;
+}
+
+.lpt-searchIcon:after {
+    position: absolute;
+    content: "";
+    left: 9px;
+    top: 7px;
+    width: 3px;
+    height: 6px;
+    background: grey;
+    border-radius: 1px;
+    -webkit-transform: rotate(-45deg);
+    -moz-transform: rotate(-45deg);
+    -ms-transform: rotate(-45deg);
+    -o-transform: rotate(-45deg);
+    transform: rotate(-45deg);
+}
+
+.lpt-searchInput {
+    display: inline-block;
+    box-sizing: border-box;
+    font-size: 13px;
+    padding: 0 4px 0 4px;
+    margin: 1px 0 0 5px;
+    border-radius: 10px;
+    height: 17px;
+    background: #FFFFFF;
+    border: 1px solid #D0D0D0;
+    border-top: none;
+    border-bottom: none;
+    outline: none;
 }

source/js/DataController.js

@@ -530,8 +530,7 @@ DataController.prototype._trigger = function () {
 DataController.prototype.sortByColumn = function (columnIndex) {
 
     var data = this._dataStack[this._dataStack.length - 1].data,
-        totalsAttached = this.SUMMARY_SHOWN
-            && this.controller.CONFIG["attachTotals"] ? 1 : 0;
+        totalsAttached = this.SUMMARY_SHOWN && this.controller.CONFIG["attachTotals"] ? 1 : 0;
 
     if (this.SORT_STATE.column !== columnIndex) {
         order = this.SORT_STATE.order = 0;
@@ -579,4 +578,45 @@ DataController.prototype.sortByColumn = function (columnIndex) {
 
     this._trigger();
 
+};
+
+/**
+ * Filter raw data by part of value.
+ *
+ * @param {string} valuePart
+ * @param {number} columnIndex
+ */
+DataController.prototype.filterByValue = function (valuePart, columnIndex) {
+
+    var data = this._dataStack[this._dataStack.length - 1].data,
+        totalsAttached = this.SUMMARY_SHOWN && this.controller.CONFIG["attachTotals"] ? 1 : 0,
+        newRawData = data._rawDataOrigin.slice(
+            data.info.topHeaderRowsNumber,
+            data._rawDataOrigin.length - (this.SUMMARY_SHOWN && !totalsAttached ? 1 : 0)
+        ),
+        re = null;
+
+    try {
+        re = new RegExp(valuePart, "i");
+    } catch (e) {
+        try {
+            re = new RegExp(valuePart.replace(/([()[{*+.$^\\|?])/g, "\\$1"), "i");
+        } catch (e) {
+            return;
+        }
+    }
+
+    newRawData = newRawData.filter(function (row) {
+        return (row[columnIndex].value || "").toString().match(re);
+    });
+
+    data.rawData = data._rawDataOrigin.slice(0, data.info.topHeaderRowsNumber)
+        .concat(newRawData)
+        .concat(this.SUMMARY_SHOWN && !totalsAttached
+            ? [data._rawDataOrigin[data._rawDataOrigin.length - 1]]
+            : []
+    );
+
+    this._trigger();
+
 };

source/js/LightPivotTable.js

@@ -297,6 +297,7 @@ LightPivotTable.prototype.getPivotProperty = function (path) {
 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 (!config["triggers"]) config.triggers = {};
     if (!config["dataSource"]) config.dataSource = {};
 };