jquery.dgtable 0.6.0 → 0.6.2

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.2
  * git://github.com/danielgindi/jquery.dgtable.git
  */
 'use strict';
@@ -1786,6 +1786,45 @@ class SelectionHelper {
 
 const hasOwnProperty$1 = Object.prototype.hasOwnProperty;
 
+const hasInsertAdjacentElement = Element.prototype.insertAdjacentElement !== undefined;
+
+function insertBefore(el, before, parent) {
+  if (!before)
+  parent.appendChild(el);else
+  if (hasInsertAdjacentElement === true)
+  before.insertAdjacentElement('beforebegin', el);else
+  parent.insertBefore(el, before);
+}
+
+/**
+ *
+ * @param {Element} itemEl
+ * @param {DocumentFragment|null} fragment
+ * @param {Node|undefined} before
+ * @param {Element} itemParent
+ * @returns {DocumentFragment|null}
+ */
+function insertBeforeWithFragment(itemEl, fragment, before, itemParent) {
+  if (itemEl.parentNode !== itemParent) {
+    if (!fragment)
+    fragment = document.createDocumentFragment();
+    fragment.appendChild(itemEl);
+  } else {
+    // insert fragment
+    if (fragment && fragment.childNodes.length > 0) {
+      insertBefore(fragment, before, itemParent);
+      fragment = null;
+    }
+
+    // insert element
+    if (itemEl.nextSibling !== before) {
+      insertBefore(itemEl, before, itemParent);
+    }
+  }
+
+  return fragment;
+}
+
 class VirtualListHelper {
   /**
    * @param {VirtualListHelper~Options} opts
@@ -2164,6 +2203,7 @@ class VirtualListHelper {
     const list = p.list;
     const virtual = p.virtual;
     let virtualWrapper = p.virtualWrapper;
+    let itemParent = p.currentItemsParent;
     let scrollTop = list.scrollTop;
     let visibleHeight = list.clientHeight;
     let visibleBottom = scrollTop + visibleHeight;
@@ -2184,6 +2224,7 @@ class VirtualListHelper {
         }
 
         this._resetCurrentItemsParent();
+        itemParent = p.currentItemsParent;
 
         if (p.autoVirtualWrapperWidth) {
           virtualWrapper.style.width = '100%';
@@ -2213,12 +2254,18 @@ class VirtualListHelper {
       let renderPos = this._calculateItemPosition(index);
       let bufferEnd = buffer;
 
-      /** @type Node|undefined */
-      let lastEl = undefined;
+      // we want to render until viewport's bottom + buffer items
+      let maxIndexToRender = Math.max(index, binarySearchPosition(p.cachedItemPositions, visibleBottom - 1) + 1 + buffer);
+
+      let insertedItems = [];
 
-      // If rendering position has not reached the viewport bottom
-      //    AND we have not rendered all the buffer items yet
-      while ((renderPos < visibleBottom || bufferEnd-- > 0) && index < count) {
+      /** @type DocumentFragment|null */
+      let fragment = null;
+
+      // Find the element to insert before
+      let before = virtualWrapper.childNodes[0];
+
+      const findElementToReuse = function (index) {
         // Find existing element to reuse
         /** @type Element|undefined */
         let existingEl = undefined;
@@ -2240,20 +2287,53 @@ class VirtualListHelper {
           delete existingEl[ReuseElSymbol];
         }
 
-        // Find the element to insert before
-        let insertBefore = lastEl ? lastEl.nextSibling : virtualWrapper.childNodes[0];
-        if (insertBefore && insertBefore === existingEl)
-        insertBefore = insertBefore.nextSibling;
+        return existingEl;
+      };
+
+      // First we iterate and try to add all at once in a fragment, as much as we can.
+      // And then reflow the at once.
+      for (; index < count && index < maxIndexToRender; index++) {
+        let existingEl = findElementToReuse(index);
+
+        if (before && before === existingEl)
+        before = before.nextSibling;
 
         // Dequeue the element by reusing or creating a new one
-        lastEl = this._dequeueElementForIndex(existingEl, index, insertBefore);
+        const itemEl = this._dequeueElementForIndex(existingEl, index, before, true);
+        insertedItems.push([itemEl, index]);
+
+        fragment = insertBeforeWithFragment(itemEl, fragment, before, itemParent);
+      }
 
-        // Increment pointers
+      // Insert any remaining fragment
+      if (fragment && fragment.childNodes.length > 0) {
+        insertBefore(fragment, before, itemParent);
+      }
+
+      // Iterate on inserted items and reflow them
+      for (let item of insertedItems) {
+        const index = item[1];
+        this._insertItemAndFlow(item[0], index, false /* inserted already */);
         renderPos = p.cachedItemPositions[index] + p.cachedItemHeights[index];
-        index++;
       }
 
-      // Calculate up to date scroll height
+      // See if we still need to insert more items
+      if (renderPos < visibleBottom) {
+        for (; (renderPos < visibleBottom || bufferEnd-- > 0) && index < count; index++) {
+          let existingEl = findElementToReuse(index);
+
+          if (before && before === existingEl)
+          before = before.nextSibling;
+
+          // Dequeue the element by reusing or creating a new one
+          this._dequeueElementForIndex(existingEl, index, before, false);
+
+          // Increment pointers
+          renderPos = p.cachedItemPositions[index] + p.cachedItemHeights[index];
+        }
+      }
+
+      // Calculate up-to-date scroll height
       let scrollHeight = this.estimateFullHeight();
       p.virtualWrapper.style.height = scrollHeight + 'px';
 
@@ -2265,8 +2345,12 @@ class VirtualListHelper {
           existingEls[i][ReuseElSymbol] = true;
         }
 
-        /** @type Node|undefined */
-        let lastEl = undefined;
+        // Find the element to insert before
+        let before = list.childNodes[0];
+
+        /** @type DocumentFragment|null */
+        let fragment = null;
+
         for (let index = 0; index < count; index++) {
           // Find existing element to reuse
           let existingEl = existingEls.find((x) => x[ItemIndexSymbol] === index && x[ReuseElSymbol] === true);
@@ -2275,13 +2359,18 @@ class VirtualListHelper {
             delete existingEl[ReuseElSymbol];
           }
 
-          // Find the element to insert before
-          let insertBefore = lastEl ? lastEl.nextSibling : list.childNodes[0];
-          if (insertBefore && insertBefore === existingEl)
-          insertBefore = insertBefore.nextSibling;
+          if (before && before === existingEl)
+          before = before.nextSibling;
 
           // Dequeue the element by reusing or creating a new one
-          lastEl = this._dequeueElementForIndex(existingEl, index, insertBefore);
+          const itemEl = this._dequeueElementForIndex(existingEl, index, before, true);
+
+          fragment = insertBeforeWithFragment(itemEl, fragment, before, itemParent);
+        }
+
+        // Insert any remaining fragment
+        if (fragment && fragment.childNodes.length > 0) {
+          insertBefore(fragment, before, itemParent);
         }
       }
     }
@@ -2337,16 +2426,28 @@ class VirtualListHelper {
       if (existingRange.firstValidArrayIndex === -1)
       return this;
 
+      const itemParent = p.currentItemsParent;
+
       let startIndex = existingRange.firstValidArrayIndex + atIndex - existingRange.firstIndex;
 
       this._pushItemIndexesAt(atIndex, count);
 
       /** @type Node|undefined */
-      let lastEl = existingEls[startIndex - 1];
+      let before = existingEls[startIndex - 1] ?
+      existingEls[startIndex - 1].nextSibling :
+      existingEls[0];
+
+      /** @type DocumentFragment|null */
+      let fragment = null;
 
       for (let index = atIndex, end = atIndex + count; index < end; index++) {
-        let insertBefore = lastEl ? lastEl.nextSibling : existingEls[0];
-        lastEl = this._dequeueElementForIndex(undefined, index, insertBefore);
+        const itemEl = this._dequeueElementForIndex(undefined, index, before, true);
+        fragment = insertBeforeWithFragment(itemEl, fragment, before, itemParent);
+      }
+
+      // Insert any remaining fragment
+      if (fragment && fragment.childNodes.length > 0) {
+        insertBefore(fragment, before, itemParent);
       }
     }
 
@@ -2429,7 +2530,7 @@ class VirtualListHelper {
       if (index >= existingRange.firstIndex && index <= existingRange.lastIndex) {
         let itemEl = existingEls[existingRange.firstValidArrayIndex + index - existingRange.firstIndex];
         delete itemEl[ItemIndexSymbol];
-        this._dequeueElementForIndex(itemEl, index, itemEl.nextSibling);
+        this._dequeueElementForIndex(itemEl, index, itemEl.nextSibling, false);
       }
     }
 
@@ -2572,7 +2673,7 @@ class VirtualListHelper {
   createGhostItemElement(ghostIndex, append, ghostTester) {
     const p = this._p;
 
-    let itemEl = this._dequeueElementForIndex(null, ghostIndex, false);
+    let itemEl = this._dequeueElementForIndex(null, ghostIndex, false, true);
     try {
       if (append) {
         p.currentItemsParent.appendChild(itemEl);
@@ -2823,13 +2924,14 @@ class VirtualListHelper {
    * @param {Element|undefined} itemEl
    * @param {number} index
    * @param {Node|boolean|undefined} insertBefore
+   * @param {boolean|undefined} avoidDomReflow
    * @returns {Element}
    * @private
    */
-  _dequeueElementForIndex(itemEl, index, insertBefore) {
+  _dequeueElementForIndex(itemEl, index, insertBefore, avoidDomReflow) {
     const p = this._p;
     const virtualWrapper = p.virtualWrapper;
-    const itemParent = p.currentItemsParent;
+    p.currentItemsParent;
     const existingEls = p.existingEls;
     const onItemRender = p.onItemRender;
     const onItemUnrender = p.onItemUnrender;
@@ -2864,12 +2966,6 @@ class VirtualListHelper {
       if (!(insertBefore instanceof Node))
       insertBefore = null;
 
-      // Insert into DOM
-      if (itemEl.parentNode !== itemParent ||
-      itemEl.nextSibling !== insertBefore) {
-        itemParent.insertBefore(itemEl, insertBefore);
-      }
-
       // Remove from existing list
       if (!isNew) {
         let i = existingEls.indexOf(itemEl);
@@ -2885,37 +2981,65 @@ class VirtualListHelper {
         existingEls.splice(beforeIndex, 0, itemEl);
       }
 
-      if (virtualWrapper) {
-        // Calculate height
-        let itemHeight = itemEl.getBoundingClientRect().height;
+      if (!avoidDomReflow) {
+        this._insertItemAndFlow(itemEl, index, insertBefore);
+      }
+    }
 
-        // Put calculated height into cache, and invalidate positions if it's different
-        let cachedItemHeight = p.cachedItemHeights[index];
-        if (cachedItemHeight !== itemHeight) {
-          p.cachedItemHeights[index] = itemHeight;
-        }
+    // Add index metadata to item
+    itemEl[ItemIndexSymbol] = index;
 
-        if (cachedItemHeight !== undefined && itemHeight !== cachedItemHeight ||
-        cachedItemHeight === undefined && itemHeight !== p.cachedItemEstimatedHeights[index]) {
-          this._setItemPositionsNeedsUpdate(index + 1);
-        }
+    return itemEl;
+  }
+
+  /**
+   * Insert item element into the DOM, set it's flow in the DOM, and update the item's position. <br />
+   * @param {Element|undefined} itemEl
+   * @param {number} index
+   * @param {Node|boolean|undefined} before
+   * @private
+   */
+  _insertItemAndFlow(itemEl, index, before) {
+    const p = this._p;
+    const virtualWrapper = p.virtualWrapper;
+    const itemParent = p.currentItemsParent;
 
-        // Set item top position
-        let pos = this._calculateItemPosition(index);
-        const supportedTransform = getSupportedTransform();
+    if (before !== false) {
+      if (!(before instanceof Node))
+      before = null;
 
-        if (supportedTransform === false) {
-          /**@type ElementCSSInlineStyle*/itemEl.style.top = `${pos}px`;
-        } else {
-          /**@type ElementCSSInlineStyle*/itemEl.style[supportedTransform] = `translateY(${pos}px)`;
-        }
+      // Insert into DOM
+      if (itemEl.parentNode !== itemParent ||
+      itemEl.nextSibling !== before) {
+        insertBefore(itemEl, before, itemParent);
       }
     }
 
-    // Add index metadata to item
-    itemEl[ItemIndexSymbol] = index;
+    if (virtualWrapper) {
+      // Calculate height
+      let itemHeight = itemEl.getBoundingClientRect().height;
 
-    return itemEl;
+      // Put calculated height into cache, and invalidate positions if it's different
+      let cachedItemHeight = p.cachedItemHeights[index];
+      if (cachedItemHeight !== itemHeight) {
+        p.cachedItemHeights[index] = itemHeight;
+      }
+
+      if (cachedItemHeight !== undefined && itemHeight !== cachedItemHeight ||
+      cachedItemHeight === undefined && itemHeight !== p.cachedItemEstimatedHeights[index]) {
+        this._setItemPositionsNeedsUpdate(index + 1);
+      }
+
+      // Set item top position
+      let pos = this._calculateItemPosition(index);
+      const supportedTransform = getSupportedTransform();
+
+      if (supportedTransform === false) {
+        /**@type ElementCSSInlineStyle*/itemEl.style.top = `${pos}px`;
+      } else {
+        /**@type ElementCSSInlineStyle*/itemEl.style[supportedTransform] = `translateY(${pos}px)`;
+      }
+    }
   }
 
   /**
@@ -3219,7 +3343,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 +3605,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 +6541,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) {