jquery.dgtable 0.6.0 → 0.6.1

package/README.md

@@ -73,7 +73,7 @@ To create a new table, just use `var myTable = new DGTable(INIT_OPTIONS)`.
   * `DGTable.Width.AUTO`: Sets the width automatically
   * `DGTable.Width.SCROLL`: Creates a horizontal scroll when required
 * **virtualTable**: `boolean=true` When set, the table will work in virtual mode, which means only the visible rows are rendered. Rows must have fixed height in this mode.
-* **estimatedRowHeight**: `number=40` Sets the estimated row height for the table. This is used for virtual table mode, to calculate the estimated scroll size.
+* **estimatedRowHeight**: `number?` Sets the estimated row height for the table. This is used for virtual table mode, to calculate the estimated scroll size. Will be auto calculated by default.
 * **resizableColumns**: `boolean=true` Turns on or off the resizable columns globally.
 * **movableColumns**: `boolean=true` Turns on or off the movable columns globally.
 * **sortableColumns**: `number=1` How many columns can you sort by, one after another?

package/dist/jquery.dgtable.cjs.js

@@ -1,5 +1,5 @@
 /*!
- * jquery.dgtable 0.6.0
+ * jquery.dgtable 0.6.1
  * git://github.com/danielgindi/jquery.dgtable.git
  */
 'use strict';
@@ -3219,7 +3219,7 @@ DGTable.prototype.initialize = function (options) {
   /**
    * @private
    * @field {number} estimatedRowHeight */
-  o.estimatedRowHeight = options.estimatedRowHeight === undefined ? 40 : options.estimatedRowHeight;
+  o.estimatedRowHeight = options.estimatedRowHeight || undefined;
 
   /**
    * @private
@@ -3481,7 +3481,7 @@ DGTable.prototype._setupVirtualTable = function () {
     autoVirtualWrapperWidth: false,
     virtual: true,
     buffer: o.rowsBufferSize,
-    estimatedItemHeight: o.estimatedRowHeight || 40,
+    estimatedItemHeight: o.estimatedRowHeight ? o.estimatedRowHeight : p.virtualRowHeight || 40,
     itemElementCreatorFn: () => {
       return createElement('div');
     },
@@ -6417,6 +6417,41 @@ DGTable.prototype._renderSkeletonBody = function () {
 
   let tableClassName = o.tableClassName;
 
+  // Calculate virtual row heights
+  if (o.virtualTable && !p.virtualRowHeight) {
+    let createDummyRow = function () {
+      let row = createElement('div'),
+        cell = row.appendChild(createElement('div')),
+        cellInner = cell.appendChild(createElement('div'));
+      row.className = tableClassName + '-row';
+      cell.className = tableClassName + '-cell';
+      cellInner.innerHTML = '0';
+      row.style.visibility = 'hidden';
+      row.style.position = 'absolute';
+      return row;
+    };
+
+    let $dummyTbody,$dummyWrapper = $('<div>').
+      addClass(that.el.className).
+      css({ 'z-index': -1, 'position': 'absolute', left: '0', top: '-9999px', width: '1px', overflow: 'hidden' }).
+      append(
+      $('<div>').addClass(tableClassName).append(
+      $dummyTbody = $('<div>').addClass(tableClassName + '-body').css('width', 99999)));
+
+
+
+    $dummyWrapper.appendTo(document.body);
+
+    let row1 = createDummyRow(),row2 = createDummyRow(),row3 = createDummyRow();
+    $dummyTbody.append(row1, row2, row3);
+
+    p.virtualRowHeightFirst = Css.getElementHeight(row1, true, true, true);
+    p.virtualRowHeight = Css.getElementHeight(row2, true, true, true);
+    p.virtualRowHeightLast = Css.getElementHeight(row3, true, true, true);
+
+    $dummyWrapper.remove();
+  }
+
   // Create inner table and tbody
   if (!p.$table) {