From cfbb891737535677dc4eab5428afa9ffa90f0f0a Mon Sep 17 00:00:00 2001
From: Faris Ansari <netchamp.faris@gmail.com>
Date: Thu, 1 Nov 2018 15:26:11 +0530
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9B=20Adapt=20container=20heigh?=
 =?UTF-8?q?t=20when=20there=20are=20less=20rows?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html           | 12 +++++++++---
 src/body-renderer.js | 28 ++++++++--------------------
 src/style.css        |  9 ++++++++-
 src/style.js         | 12 +++++++++++-
 4 files changed, 36 insertions(+), 25 deletions(-)
diff --git a/index.html b/index.html
index 1e4bc63..de3b983 100644
--- a/index.html
+++ b/index.html
@@ -19,6 +19,7 @@
 <body>
 	<h1>Frappé DataTable</h1>
 	<button onclick="datatable.render()">Refresh</button>
+	<button onclick="switchToTreeView()" data-action="treeview">TreeView</button>
 	<label>
 		<input type="checkbox" id="input-large-data" />
 		<span>Large Data</span>
@@ -150,7 +151,7 @@
 				}
 			}
 
-			function makeDatatable() {
+			function makeDatatable(treeView = false) {
 				console.log('No of Rows:', data.length)
 
 				const start = performance.now();
@@ -162,7 +163,7 @@
 					data,
 					inlineFilters: true,
 					dynamicRowHeight: true,
-					// treeView: true,
+					treeView: treeView,
 					// filterRows(keyword, cells, colIndex) {
 					// 	return cells
 					// 		.filter(cell => cell.content.includes(keyword))
@@ -198,8 +199,13 @@
 				window.datatable = datatable;
 			}
 
+			window.switchToTreeView = function() {
+				datatable.destroy();
+				buildTreeData();
+				makeDatatable(true);
+			}
+
 			buildData();
-			// buildTreeData();
 			makeDatatable();
 		})
 	</script>
diff --git a/src/body-renderer.js b/src/body-renderer.js
index f5addb7..03e84c6 100644
--- a/src/body-renderer.js
+++ b/src/body-renderer.js
@@ -24,31 +24,19 @@ export default class BodyRenderer {
                 return el.children[0];
             }
         };
-        this.hyperlist.refresh(this.bodyDiv, config);
+
+        if (!this.hyperlist) {
+            this.hyperlist = new HyperList(this.bodyDiv, config);
+        } else {
+            this.hyperlist.refresh(this.bodyDiv, config);
+        }
+
         this.visibleRows = rows.map(row => row.meta.rowIndex);
     }
 
     render() {
         const rows = this.datamanager.getRowsForView();
-
-        let config = {
-            itemHeight: this.options.cellHeight,
-            total: rows.length,
-            generate: (index) => {
-                const el = document.createElement('div');
-                const rowHTML = this.rowmanager.getRowHTML(rows[index], rows[index].meta);
-                el.innerHTML = rowHTML;
-                return el.children[0];
-            }
-        };
-
-        if (!this.hyperlist) {
-            this.hyperlist = new HyperList(this.bodyDiv, config);
-            this.visibleRows = rows.map(row => row.meta.rowIndex);
-        } else {
-            this.renderRows(rows);
-        }
-
+        this.renderRows(rows);
         // setDimensions requires atleast 1 row to exist in dom
         this.instance.setDimensions();
     }
diff --git a/src/style.css b/src/style.css
index 2417c15..14adb08 100644
--- a/src/style.css
+++ b/src/style.css
@@ -46,7 +46,6 @@
     height: 40vw;
     overflow: auto;
     border-bottom: 1px solid var(--dt-border-color);
-    border-right: 1px solid var(--dt-border-color);
 
     &--highlight-all {
         background-color: var(--dt-selection-highlight-color);
@@ -74,6 +73,10 @@
     &--hide {
         display: none;
     }
+
+    &:last-child {
+        border-bottom: 1px solid var(--dt-border-color);
+    }
 }
 
 .dt-cell {
@@ -168,6 +171,10 @@
             display: flex;
         }
     }
+
+    &:last-child {
+        border-right: 1px solid var(--dt-border-color);
+    }
 }
 
 .icon-open, .icon-close {
diff --git a/src/style.js b/src/style.js
index 6a947f1..0d7e102 100644
--- a/src/style.js
+++ b/src/style.js
@@ -12,7 +12,7 @@ export default class Style {
         linkProperties(this, this.instance, [
             'options', 'datamanager', 'columnmanager',
             'header', 'bodyScrollable', 'datatableWrapper',
-            'getColumn'
+            'getColumn', 'bodyRenderer'
         ]);
 
         this.scopeClass = 'dt-instance-' + instance.constructor.instances;
@@ -311,6 +311,16 @@ export default class Style {
                 width: width + 'px'
             });
 
+            // when there are less rows than the container
+            // adapt the container height
+            const height = $.getStyle(this.bodyScrollable, 'height');
+            const scrollHeight = (this.bodyRenderer.hyperlist || {})._scrollHeight || Infinity;
+            if (scrollHeight < height) {
+                $.style(this.bodyScrollable, {
+                    height: (scrollHeight + 1) + 'px'
+                });
+            }
+
             $.style(this.bodyScrollable, {
                 marginTop: $.style(this.header, 'height') + 'px'
             });
