[feature] Dynamic Row Height

dist/frappe-datatable.cjs.js

@@ -3230,8 +3230,9 @@ class Style {
     }
 
     setDefaultCellHeight() {
+        if (this.options.dynamicRowHeight) return;
         if (this.__cellHeightSet) return;
-        const $firstCell = $('.data-table-cell', this.instance.bodyScrollable);
+        const $firstCell = $('.data-table-cell[data-is-header]', this.instance.header);
         if (!$firstCell) return;
 
         const height = this.options.cellHeight || $.style($firstCell, 'height');
@@ -3282,6 +3283,14 @@ class Style {
             width: width + 'px'
         });
 
+        const $body = $('.data-table-body', this.bodyScrollable);
+
+        if ($body) {
+            $.style($body, {
+                height: '0px'
+            });
+        }
+
         $.style(this.bodyScrollable, {
             marginTop: $.style(this.header, 'height') + 'px'
         });
@@ -3419,7 +3428,8 @@ var DEFAULT_OPTIONS = {
     cellHeight: null,
     inlineFilters: false,
     treeView: false,
-    checkedRowStatus: true
+    checkedRowStatus: true,
+    dynamicRowHeight: false
 };
 
 class DataTable {
@@ -3614,7 +3624,7 @@ class DataTable {
 DataTable.instances = 0;
 
 var name = "frappe-datatable";
-var version = "0.0.3";
+var version = "0.0.4";
 var description = "A modern datatable library for the web";
 var main = "dist/frappe-datatable.cjs.js";
 var scripts = {"start":"yarn run dev","build":"rollup -c","dev":"rollup -c -w","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js","test:watch":"mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"};

dist/frappe-datatable.css

@@ -209,6 +209,7 @@
 		padding: 8px;
 		padding: 0.5rem;
 		border: 2px solid transparent;
+		height: 100%;
 	}
 
 .data-table-cell .content.ellipsis {

dist/frappe-datatable.js

@@ -3229,8 +3229,9 @@ class Style {
     }
 
     setDefaultCellHeight() {
+        if (this.options.dynamicRowHeight) return;
         if (this.__cellHeightSet) return;
-        const $firstCell = $('.data-table-cell', this.instance.bodyScrollable);
+        const $firstCell = $('.data-table-cell[data-is-header]', this.instance.header);
         if (!$firstCell) return;
 
         const height = this.options.cellHeight || $.style($firstCell, 'height');
@@ -3281,6 +3282,14 @@ class Style {
             width: width + 'px'
         });
 
+        const $body = $('.data-table-body', this.bodyScrollable);
+
+        if ($body) {
+            $.style($body, {
+                height: '0px'
+            });
+        }
+
         $.style(this.bodyScrollable, {
             marginTop: $.style(this.header, 'height') + 'px'
         });
@@ -3418,7 +3427,8 @@ var DEFAULT_OPTIONS = {
     cellHeight: null,
     inlineFilters: false,
     treeView: false,
-    checkedRowStatus: true
+    checkedRowStatus: true,
+    dynamicRowHeight: false
 };
 
 class DataTable {
@@ -3613,7 +3623,7 @@ class DataTable {
 DataTable.instances = 0;
 
 var name = "frappe-datatable";
-var version = "0.0.3";
+var version = "0.0.4";
 var description = "A modern datatable library for the web";
 var main = "dist/frappe-datatable.cjs.js";
 var scripts = {"start":"yarn run dev","build":"rollup -c","dev":"rollup -c -w","test":"mocha --compilers js:babel-core/register --colors ./test/*.spec.js","test:watch":"mocha --compilers js:babel-core/register --colors -w ./test/*.spec.js"};

src/defaults.js

@@ -50,5 +50,6 @@ export default {
     cellHeight: null,
     inlineFilters: false,
     treeView: false,
-    checkedRowStatus: true
+    checkedRowStatus: true,
+    dynamicRowHeight: false
 };

src/style.css

@@ -201,6 +201,7 @@
 	.content {
 		padding: var(--spacer-2);
 		border: 2px solid transparent;
+		height: 100%;
 
 		&.ellipsis {
 			text-overflow: ellipsis;

src/style.js

@@ -220,8 +220,9 @@ export default class Style {
     }
 
     setDefaultCellHeight() {
+        if (this.options.dynamicRowHeight) return;
         if (this.__cellHeightSet) return;
-        const $firstCell = $('.data-table-cell', this.instance.bodyScrollable);
+        const $firstCell = $('.data-table-cell[data-is-header]', this.instance.header);
         if (!$firstCell) return;
 
         const height = this.options.cellHeight || $.style($firstCell, 'height');
@@ -272,6 +273,14 @@ export default class Style {
             width: width + 'px'
         });
 
+        const $body = $('.data-table-body', this.bodyScrollable);
+
+        if ($body) {
+            $.style($body, {
+                height: '0px'
+            });
+        }
+
         $.style(this.bodyScrollable, {
             marginTop: $.style(this.header, 'height') + 'px'
         });