render algorithm change, step 1

Author: nikitaeverywhere

source/css/LightPivot.css

@@ -2,10 +2,11 @@
     position: relative;
     width: 100%;
     height: 100%;
-    border-radius: 5px;
     background: white;
-    font-size: 13px;
     overflow: hidden;
+    border-radius: 0;
+    font-family: Arial, sans-serif;
+    font-size: 10pt;
 }
 
 .lpt .formatLeft {
@@ -68,11 +69,11 @@
     background: #FF9B47;
 }
 
-.lpt table tr:first-child th:first-child {
-    position: relative;
-    white-space: nowrap;
-    vertical-align: bottom;
-}
+/*.lpt table tr:first-child th:first-child {*/
+    /*position: relative;*/
+    /*white-space: nowrap;*/
+    /*vertical-align: bottom;*/
+/*}*/
 
 .lpt .drillDownIcon {
     position: relative;
@@ -129,20 +130,20 @@
 }
 
 .lpt table {
-    position: relative;
+    border-collapse: collapse;
     width: 100%;
 }
 
-.lpt .fixedHeader {
-    position: absolute;
-    left: 0;
-    top: 0;
-    background: white;
-}
+/*.lpt .fixedHeader {*/
+    /*position: absolute;*/
+    /*left: 0;*/
+    /*top: 0;*/
+    /*background: white;*/
+/*}*/
 
 .lpt > .tableContainer {
     position: absolute;
-    overflow: auto;
+    overflow: hidden;
     width: 100%;
     height: 100%;
     -webkit-transition: left .5s ease;
@@ -151,86 +152,124 @@
     transition: left .5s ease;
 }
 
-.lpt > .tableContainer > table {
-    min-width: 100%;
-}
+/*.lpt > .tableContainer > table {*/
+    /*min-width: 100%;*/
+/*}*/
+
+/*.lpt > .tableContainer td, .lpt > .tableContainer th {*/
+    /*border-radius: 3px;*/
+    /*padding: .4em;*/
+/*}*/
+
+/*.lpt > .tableContainer tbody.fixedHeader th:last-child:hover {*/
+    /*background: #FFEEAA;*/
+    /*box-shadow: inset 0 0 15px #FFFFFF;*/
+/*}*/
+
+/*.lpt th {*/
+    /*background: #F0F0F0;*/
+    /*text-align: left;*/
+    /*font-weight: bold;*/
+    /*box-shadow: inset 0 -5px 10px rgb(216, 216, 216);*/
+/*}*/
+
+/*.lpt thead tr:last-child th {*/
+    /*cursor: pointer;*/
+    /*-webkit-transition: all .3s ease;*/
+    /*-moz-transition: all .3s ease;*/
+    /*-o-transition: all .3s ease;*/
+    /*transition: all .3s ease;*/
+/*}*/
+
+/*.lpt thead tr:last-child th:first-child ~ th:hover {*/
+    /*background: #e2c8ff;*/
+    /*background: #FFEEAA;*/
+    /*box-shadow: inset 0 0 15px #FFFFFF;*/
+/*}*/
+
+/*.lpt td {*/
+    /*background: #E1E8FF;*/
+    /*background: #FFFFFF;*/
+    /*box-shadow: inset 0 0 2px rgb(216, 216, 216);*/
+    /*text-align: right;*/
+    /*-webkit-transition: all .3s ease;*/
+    /*-moz-transition: all .3s ease;*/
+    /*-o-transition: all .3s ease;*/
+    /*transition: all .3s ease;*/
+/*}*/
 
-.lpt > .tableContainer td, .lpt > .tableContainer th {
-    border-radius: 3px;
-    padding: .4em;
+.lpt tr:hover td {
+    background: #FFF7D7;
 }
 
-.lpt > .tableContainer tbody.fixedHeader th:last-child:hover {
-    /*background: #e2c8ff;*/
+.lpt table td:hover {
     background: #FFEEAA;
-    box-shadow: inset 0 0 15px #FFFFFF;
 }
 
-.lpt th {
-    /*background: #C0CDFF;*/
-    background: #F0F0F0;
-    text-align: left;
-    box-shadow: inset 0 -5px 10px rgb(216, 216, 216);
-}
+/* DeepSee theme */
 
-.lpt thead tr:last-child th {
-    cursor: pointer;
-    -webkit-transition: all .3s ease;
-    -moz-transition: all .3s ease;
-    -o-transition: all .3s ease;
-    transition: all .3s ease;
+.lpt th, .lpt td, .lpt .lpt-headerValue  {
+    box-shadow: none;
+    text-align: left;
+    border-radius: 0;
+    padding: 3px 6px 3px 6px;
+    border: 1px solid rgb(208, 208, 208);
 }
 
-.lpt thead tr:last-child th:first-child ~ th:hover {
-    /*background: #e2c8ff;*/
-    background: #FFEEAA;
-    box-shadow: inset 0 0 15px #FFFFFF;
+.lpt th, .lpt .lpt-headerValue {
+    background: #F0F0F0;
 }
 
-.lpt td {
-    /*background: #E1E8FF;*/
-    background: #FFFFFF;
-    box-shadow: inset 0 0 2px rgb(216, 216, 216);
-    text-align: right;
-    -webkit-transition: all .3s ease;
-    -moz-transition: all .3s ease;
-    -o-transition: all .3s ease;
-    transition: all .3s ease;
+/* new */
+.lpt .lpt-tableBlock table {
+    table-layout: fixed;
 }
 
 .lpt th, .lpt td {
     white-space: nowrap;
+    box-sizing: border-box;
 }
 
-.lpt tr:hover td {
-    /*background: #ffe6cf;*/
-    background: #FFF7D7;
+.lpt .tableContainer .lpt-topSection, .lpt .tableContainer .lpt-bottomSection {
+    position: relative;
+    overflow: hidden;
 }
 
-.lpt table td:hover {
-    /*background: #e2c8ff;*/
-    background: #FFEEAA;
+.lpt .tableContainer .lpt-header {
+    position: relative;
+    float: left;
+    /*width: 100px;*/
 }
 
-.lpt tbody > tr > th {
-    cursor: pointer;
+.lpt .tableContainer .lpt-topHeader {
+    position: relative;
+    overflow: hidden;
+    /*margin-left: 100px;*/
 }
 
-/* DeepSee theme */
+.lpt .tableContainer .lpt-leftHeader {
+    position: relative;
+    overflow: hidden;
+    float: left;
+    /*width: 100px;*/
+}
 
-.lpt {
-    border-radius: 0;
-    font-family: Arial, sans-serif;
-    font-size: 10pt;
+.lpt .tableContainer .lpt-tableBlock {
+    position: relative;
+    overflow: auto;
+    /*margin-left: 100px;*/
 }
 
-.lpt table {
-    border-collapse: collapse;
+.lpt .tableContainer .lpt-headerValue {
+    font-weight: bold;
+    border-right: none;
+    border-bottom: none;
 }
 
-.lpt .tableContainer th, .lpt .tableContainer td {
-    box-shadow: none;
-    border-radius: 0;
-    padding: 3px 6px 3px 6px;
-    border: 1px solid rgb(208, 208, 208);
+.lpt .tableContainer .lpt-leftHeader th {
+    border-right: none;
+}
+
+.lpt .tableContainer .lpt-topHeader th {
+    border-bottom: none;
 }

source/js/LightPivotTable.js

@@ -117,7 +117,7 @@ LightPivotTable.prototype.popDataSource = function () {
  */
 LightPivotTable.prototype.dataIsChanged = function () {
 
-    this.pivotView.renderRawData(this.dataController.getData().rawData);
+    this.pivotView.renderRawData(this.dataController.getData());
 
 };