primereact 6.5.0 → 7.0.0-rc.1

package/virtualscroller/virtualscroller.esm.js

@@ -74,6 +74,8 @@ function _typeof(obj) {
 function _possibleConstructorReturn(self, call) {
   if (call && (_typeof(call) === "object" || typeof call === "function")) {
     return call;
+  } else if (call !== void 0) {
+    throw new TypeError("Derived constructors may only return object or undefined");
   }
 
   return _assertThisInitialized(self);
@@ -136,7 +138,8 @@ var VirtualScroller = /*#__PURE__*/function (_Component) {
         cols: 0
       } : 0,
       numToleratedItems: props.numToleratedItems,
-      loading: false
+      loading: props.loading,
+      loaderArr: []
     };
     _this.onScroll = _this.onScroll.bind(_assertThisInitialized(_this));
     _this.lastScrollPos = isBoth ? {
@@ -149,7 +152,7 @@ var VirtualScroller = /*#__PURE__*/function (_Component) {
   _createClass(VirtualScroller, [{
     key: "scrollTo",
     value: function scrollTo(options) {
-      this.element && this.element.scrollTo(options);
+      this.el && this.el.scrollTo(options);
     }
   }, {
     key: "scrollToIndex",
@@ -160,17 +163,20 @@ var VirtualScroller = /*#__PURE__*/function (_Component) {
       var isBoth = this.isBoth();
       var isHorizontal = this.isHorizontal();
       var first = this.state.first;
+      var numToleratedItems = this.state.numToleratedItems;
       var itemSize = this.props.itemSize;
-      var contentPadding = this.getContentPadding();
+      var contentPos = this.getContentPosition();
 
       var calculateFirst = function calculateFirst() {
         var _index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
 
-        return _index <= _this2.state.numToleratedItems ? 0 : _index;
+        var _numT = arguments.length > 1 ? arguments[1] : undefined;
+
+        return _index <= _numT ? 0 : _index;
       };
 
-      var calculateCoord = function calculateCoord(_first, _size, _padding) {
-        return _first * _size + _padding;
+      var calculateCoord = function calculateCoord(_first, _size, _cpos) {
+        return _first * _size + _cpos;
       };
 
       var scrollTo = function scrollTo() {
@@ -185,15 +191,24 @@ var VirtualScroller = /*#__PURE__*/function (_Component) {
 
       if (isBoth) {
         var newFirst = {
-          rows: calculateFirst(index[0]),
-          cols: calculateFirst(index[1])
+          rows: calculateFirst(index[0], numToleratedItems[0]),
+          cols: calculateFirst(index[1], numToleratedItems[1])
         };
-        (newFirst.rows !== first.rows || newFirst.cols !== first.cols) && scrollTo(calculateCoord(newFirst.cols, itemSize[1], contentPadding.left), calculateCoord(newFirst.rows, itemSize[0], contentPadding.top));
+
+        if (newFirst.rows !== first.rows || newFirst.cols !== first.cols) {
+          scrollTo(calculateCoord(newFirst.cols, itemSize[1], contentPos.left), calculateCoord(newFirst.rows, itemSize[0], contentPos.top));
+          this.setState({
+            first: newFirst
+          });
+        }
       } else {
-        var _newFirst = calculateFirst(index);
+        var _newFirst = calculateFirst(index, numToleratedItems);
 
         if (_newFirst !== first) {
-          isHorizontal ? scrollTo(calculateCoord(_newFirst, itemSize, contentPadding.left), 0) : scrollTo(0, calculateCoord(_newFirst, itemSize, contentPadding.top));
+          isHorizontal ? scrollTo(calculateCoord(_newFirst, itemSize, contentPos.left), 0) : scrollTo(0, calculateCoord(_newFirst, itemSize, contentPos.top));
+          this.setState({
+            first: _newFirst
+          });
         }
       }
     }
@@ -259,6 +274,25 @@ var VirtualScroller = /*#__PURE__*/function (_Component) {
         this.scrollToIndex(index, behavior);
       }
     }
+  }, {
+    key: "getRows",
+    value: function getRows() {
+      return this.state.loading ? this.props.loaderDisabled ? this.state.loaderArr : [] : this.loadedItems();
+    }
+  }, {
+    key: "getColumns",
+    value: function getColumns() {
+      if (this.props.columns) {
+        var isBoth = this.isBoth();
+        var isHorizontal = this.isHorizontal();
+
+        if (isBoth || isHorizontal) {
+          return this.state.loading && this.props.loaderDisabled ? isBoth ? this.state.loaderArr[0] : this.state.loaderArr : this.props.columns.slice(isBoth ? this.state.first.cols : this.state.first, isBoth ? this.state.last.cols : this.state.last);
+        }
+      }
+
+      return this.props.columns;
+    }
   }, {
     key: "getRenderedRange",
     value: function getRenderedRange() {
@@ -277,9 +311,9 @@ var VirtualScroller = /*#__PURE__*/function (_Component) {
       var firstInViewport = first;
       var lastInViewport = 0;
 
-      if (this.element) {
-        var scrollTop = this.element.scrollTop;
-        var scrollLeft = this.element.scrollLeft;
+      if (this.el) {
+        var scrollTop = this.el.scrollTop;
+        var scrollLeft = this.el.scrollLeft;
 
         if (isBoth) {
           firstInViewport = {
@@ -306,6 +340,11 @@ var VirtualScroller = /*#__PURE__*/function (_Component) {
         }
       };
     }
+  }, {
+    key: "isVertical",
+    value: function isVertical() {
+      return this.props.orientation === 'vertical';
+    }
   }, {
     key: "isHorizontal",
     value: function isHorizontal() {
@@ -325,28 +364,32 @@ var VirtualScroller = /*#__PURE__*/function (_Component) {
       var isHorizontal = this.isHorizontal();
       var first = this.state.first;
       var itemSize = this.props.itemSize;
-      var contentPadding = this.getContentPadding();
-      var contentWidth = this.element ? this.element.offsetWidth - contentPadding.left : 0;
-      var contentHeight = this.element ? this.element.offsetHeight - contentPadding.top : 0;
+      var contentPos = this.getContentPosition();
+      var contentWidth = this.el ? this.el.offsetWidth - contentPos.left : 0;
+      var contentHeight = this.el ? this.el.offsetHeight - contentPos.top : 0;
 
       var calculateNumItemsInViewport = function calculateNumItemsInViewport(_contentSize, _itemSize) {
         return Math.ceil(_contentSize / (_itemSize || _contentSize));
       };
 
+      var calculateNumToleratedItems = function calculateNumToleratedItems(_numItems) {
+        return Math.ceil(_numItems / 2);
+      };
+
       var numItemsInViewport = isBoth ? {
         rows: calculateNumItemsInViewport(contentHeight, itemSize[0]),
         cols: calculateNumItemsInViewport(contentWidth, itemSize[1])
       } : calculateNumItemsInViewport(isHorizontal ? contentWidth : contentHeight, itemSize);
-      var numToleratedItems = this.state.numToleratedItems || Math.ceil((isBoth ? numItemsInViewport.rows : numItemsInViewport) / 2);
+      var numToleratedItems = this.state.numToleratedItems || (isBoth ? [calculateNumToleratedItems(numItemsInViewport.rows), calculateNumToleratedItems(numItemsInViewport.cols)] : calculateNumToleratedItems(numItemsInViewport));
 
-      var calculateLast = function calculateLast(_first, _num, _isCols) {
-        return _this4.getLast(_first + _num + (_first < numToleratedItems ? 2 : 3) * numToleratedItems, _isCols);
+      var calculateLast = function calculateLast(_first, _num, _numT, _isCols) {
+        return _this4.getLast(_first + _num + (_first < _numT ? 2 : 3) * _numT, _isCols);
       };
 
       var last = isBoth ? {
-        rows: calculateLast(first.rows, numItemsInViewport.rows),
-        cols: calculateLast(first.cols, numItemsInViewport.cols, true)
-      } : calculateLast(first, numItemsInViewport);
+        rows: calculateLast(first.rows, numItemsInViewport.rows, numToleratedItems[0]),
+        cols: calculateLast(first.cols, numItemsInViewport.cols, numToleratedItems[1], true)
+      } : calculateLast(first, numItemsInViewport, numToleratedItems);
       var state = {
         numItemsInViewport: numItemsInViewport,
         last: last,
@@ -354,8 +397,14 @@ var VirtualScroller = /*#__PURE__*/function (_Component) {
       };
 
       if (this.props.showLoader) {
-        state['loaderArr'] = Array.from({
-          length: isBoth ? numItemsInViewport.rows : numItemsInViewport
+        state['loaderArr'] = isBoth ? Array.from({
+          length: numItemsInViewport.rows
+        }).map(function () {
+          return Array.from({
+            length: numItemsInViewport.cols
+          });
+        }) : Array.from({
+          length: numItemsInViewport
         });
       }
 
@@ -370,18 +419,25 @@ var VirtualScroller = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "getLast",
-    value: function getLast(last, isCols) {
-      return this.props.items ? Math.min(isCols ? this.props.items[0].length : this.props.items.length, last) : 0;
+    value: function getLast() {
+      var last = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+      var isCols = arguments.length > 1 ? arguments[1] : undefined;
+
+      if (this.props.items) {
+        return Math.min(isCols ? (this.props.columns || this.props.items[0]).length : this.props.items.length, last);
+      }
+
+      return 0;
     }
   }, {
-    key: "getContentPadding",
-    value: function getContentPadding() {
+    key: "getContentPosition",
+    value: function getContentPosition() {
       if (this.content) {
         var style = getComputedStyle(this.content);
-        var left = parseInt(style.paddingLeft, 10);
-        var right = parseInt(style.paddingRight, 10);
-        var top = parseInt(style.paddingTop, 10);
-        var bottom = parseInt(style.paddingBottom, 10);
+        var left = parseInt(style.paddingLeft, 10) + Math.max(parseInt(style.left, 10), 0);
+        var right = parseInt(style.paddingRight, 10) + Math.max(parseInt(style.right, 10), 0);
+        var top = parseInt(style.paddingTop, 10) + Math.max(parseInt(style.top, 10), 0);
+        var bottom = parseInt(style.paddingBottom, 10) + Math.max(parseInt(style.bottom, 10), 0);
         return {
           left: left,
           right: right,
@@ -406,22 +462,22 @@ var VirtualScroller = /*#__PURE__*/function (_Component) {
     value: function setSize() {
       var _this5 = this;
 
-      if (this.element) {
+      if (this.el) {
         var isBoth = this.isBoth();
         var isHorizontal = this.isHorizontal();
-        var parentElement = this.element.parentElement;
-        var width = this.props.scrollWidth || "".concat(this.element.offsetWidth || parentElement.offsetWidth, "px");
-        var height = this.props.scrollHeight || "".concat(this.element.offsetHeight || parentElement.offsetHeight, "px");
+        var parentElement = this.el.parentElement;
+        var width = this.props.scrollWidth || "".concat(this.el.offsetWidth || parentElement.offsetWidth, "px");
+        var height = this.props.scrollHeight || "".concat(this.el.offsetHeight || parentElement.offsetHeight, "px");
 
         var setProp = function setProp(_name, _value) {
-          return _this5.element.style[_name] = _value;
+          return _this5.el.style[_name] = _value;
         };
 
-        if (isBoth) {
+        if (isBoth || isHorizontal) {
           setProp('height', height);
           setProp('width', width);
         } else {
-          isHorizontal ? setProp('width', width) : setProp('height', height);
+          setProp('height', height);
         }
       }
     }
@@ -436,19 +492,19 @@ var VirtualScroller = /*#__PURE__*/function (_Component) {
         var isBoth = this.isBoth();
         var isHorizontal = this.isHorizontal();
         var itemSize = this.props.itemSize;
-        var contentPadding = this.getContentPadding();
+        var contentPos = this.getContentPosition();
 
         var setProp = function setProp(_name, _value, _size) {
-          var _padding = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+          var _cpos = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
 
-          return _this6.spacer.style[_name] = (_value || []).length * _size + _padding + 'px';
+          return _this6.spacer.style[_name] = (_value || []).length * _size + _cpos + 'px';
         };
 
         if (isBoth) {
-          setProp('height', items[0], itemSize[0], contentPadding.y);
-          setProp('width', items[1], itemSize[1], contentPadding.x);
+          setProp('height', items, itemSize[0], contentPos.y);
+          setProp('width', this.props.columns || items[1], itemSize[1], contentPos.x);
         } else {
-          isHorizontal ? setProp('width', items, itemSize, contentPadding.x) : setProp('height', items, itemSize, contentPadding.y);
+          isHorizontal ? setProp('width', this.props.columns || items, itemSize, contentPos.x) : setProp('height', items, itemSize, contentPos.y);
         }
       }
     }
@@ -472,7 +528,8 @@ var VirtualScroller = /*#__PURE__*/function (_Component) {
 
           var _y = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
 
-          return _this7.content.style.transform = "translate3d(".concat(_x, "px, ").concat(_y, "px, 0)");
+          _this7.content.style.transform = "translate3d(".concat(_x, "px, ").concat(_y, "px, 0)");
+          _this7.sticky && (_this7.sticky.style.top = "".concat(_y, "px"));
         };
 
         if (isBoth) {
@@ -497,36 +554,36 @@ var VirtualScroller = /*#__PURE__*/function (_Component) {
           numItemsInViewport = _this$state2.numItemsInViewport,
           numToleratedItems = _this$state2.numToleratedItems;
       var itemSize = this.props.itemSize;
-      var contentPadding = this.getContentPadding();
+      var contentPos = this.getContentPosition();
 
-      var calculateScrollPos = function calculateScrollPos(_pos, _padding) {
-        return _pos ? _pos > _padding ? _pos - _padding : _pos : 0;
+      var calculateScrollPos = function calculateScrollPos(_pos, _cpos) {
+        return _pos ? _pos > _cpos ? _pos - _cpos : _pos : 0;
       };
 
       var calculateCurrentIndex = function calculateCurrentIndex(_pos, _size) {
         return Math.floor(_pos / (_size || _pos));
       };
 
-      var calculateTriggerIndex = function calculateTriggerIndex(_currentIndex, _first, _last, _num, _isScrollDownOrRight) {
-        return _currentIndex <= numToleratedItems ? numToleratedItems : _isScrollDownOrRight ? _last - _num - numToleratedItems : _first + numToleratedItems - 1;
+      var calculateTriggerIndex = function calculateTriggerIndex(_currentIndex, _first, _last, _num, _numT, _isScrollDownOrRight) {
+        return _currentIndex <= _numT ? _numT : _isScrollDownOrRight ? _last - _num - _numT : _first + _numT - 1;
       };
 
-      var calculateFirst = function calculateFirst(_currentIndex, _triggerIndex, _first, _last, _num, _isScrollDownOrRight) {
-        if (_currentIndex <= numToleratedItems) return 0;else return _isScrollDownOrRight ? _currentIndex < _triggerIndex ? _first : _currentIndex - numToleratedItems : _currentIndex > _triggerIndex ? _first : _currentIndex - 2 * numToleratedItems;
+      var calculateFirst = function calculateFirst(_currentIndex, _triggerIndex, _first, _last, _num, _numT, _isScrollDownOrRight) {
+        if (_currentIndex <= _numT) return 0;else return _isScrollDownOrRight ? _currentIndex < _triggerIndex ? _first : _currentIndex - _numT : _currentIndex > _triggerIndex ? _first : _currentIndex - 2 * _numT;
       };
 
-      var calculateLast = function calculateLast(_currentIndex, _first, _last, _num, _isCols) {
-        var lastValue = _first + _num + 2 * numToleratedItems;
+      var calculateLast = function calculateLast(_currentIndex, _first, _last, _num, _numT, _isCols) {
+        var lastValue = _first + _num + 2 * _numT;
 
-        if (_currentIndex >= numToleratedItems) {
-          lastValue += numToleratedItems + 1;
+        if (_currentIndex >= _numT) {
+          lastValue += _numT + 1;
         }
 
         return _this8.getLast(lastValue, _isCols);
       };
 
-      var scrollTop = calculateScrollPos(target.scrollTop, contentPadding.top);
-      var scrollLeft = calculateScrollPos(target.scrollLeft, contentPadding.left);
+      var scrollTop = calculateScrollPos(target.scrollTop, contentPos.top);
+      var scrollLeft = calculateScrollPos(target.scrollLeft, contentPos.left);
       var newFirst = 0;
       var newLast = last;
       var isRangeChanged = false;
@@ -539,18 +596,18 @@ var VirtualScroller = /*#__PURE__*/function (_Component) {
           cols: calculateCurrentIndex(scrollLeft, itemSize[1])
         };
         var triggerIndex = {
-          rows: calculateTriggerIndex(currentIndex.rows, first.rows, last.rows, numItemsInViewport.rows, isScrollDown),
-          cols: calculateTriggerIndex(currentIndex.cols, first.cols, last.cols, numItemsInViewport.cols, isScrollRight)
+          rows: calculateTriggerIndex(currentIndex.rows, first.rows, last.rows, numItemsInViewport.rows, numToleratedItems[0], isScrollDown),
+          cols: calculateTriggerIndex(currentIndex.cols, first.cols, last.cols, numItemsInViewport.cols, numToleratedItems[1], isScrollRight)
         };
         newFirst = {
-          rows: calculateFirst(currentIndex.rows, triggerIndex.rows, first.rows, last.rows, numItemsInViewport.rows, isScrollDown),
-          cols: calculateFirst(currentIndex.cols, triggerIndex.cols, first.cols, last.cols, numItemsInViewport.cols, isScrollRight)
+          rows: calculateFirst(currentIndex.rows, triggerIndex.rows, first.rows, last.rows, numItemsInViewport.rows, numToleratedItems[0], isScrollDown),
+          cols: calculateFirst(currentIndex.cols, triggerIndex.cols, first.cols, last.cols, numItemsInViewport.cols, numToleratedItems[1], isScrollRight)
         };
         newLast = {
-          rows: calculateLast(currentIndex.rows, newFirst.rows, last.rows, numItemsInViewport.rows),
-          cols: calculateLast(currentIndex.cols, newFirst.cols, last.cols, numItemsInViewport.cols, true)
+          rows: calculateLast(currentIndex.rows, newFirst.rows, last.rows, numItemsInViewport.rows, numToleratedItems[0]),
+          cols: calculateLast(currentIndex.cols, newFirst.cols, last.cols, numItemsInViewport.cols, numToleratedItems[1], true)
         };
-        isRangeChanged = newFirst.rows !== first.rows || newFirst.cols !== first.cols || newLast.rows !== last.rows || newLast.cols !== last.cols;
+        isRangeChanged = newFirst.rows !== first.rows && newLast.rows !== last.rows || newFirst.cols !== first.cols && newLast.cols !== last.cols;
         this.lastScrollPos = {
           top: scrollTop,
           left: scrollLeft
@@ -561,11 +618,11 @@ var VirtualScroller = /*#__PURE__*/function (_Component) {
 
         var _currentIndex2 = calculateCurrentIndex(scrollPos, itemSize);
 
-        var _triggerIndex2 = calculateTriggerIndex(_currentIndex2, first, last, numItemsInViewport, isScrollDownOrRight);
+        var _triggerIndex2 = calculateTriggerIndex(_currentIndex2, first, last, numItemsInViewport, numToleratedItems, isScrollDownOrRight);
 
-        newFirst = calculateFirst(_currentIndex2, _triggerIndex2, first, last, numItemsInViewport, isScrollDownOrRight);
-        newLast = calculateLast(_currentIndex2, newFirst, last, numItemsInViewport);
-        isRangeChanged = newFirst !== first || newLast !== last;
+        newFirst = calculateFirst(_currentIndex2, _triggerIndex2, first, last, numItemsInViewport, numToleratedItems, isScrollDownOrRight);
+        newLast = calculateLast(_currentIndex2, newFirst, last, numItemsInViewport, numToleratedItems);
+        isRangeChanged = newFirst !== first && newLast !== last;
         this.lastScrollPos = scrollPos;
       }
 
@@ -591,13 +648,12 @@ var VirtualScroller = /*#__PURE__*/function (_Component) {
           last: last
         };
         this.setContentPosition(newState);
-
-        if (this.props.lazy) {
-          this.props.onLazyLoad && this.props.onLazyLoad(newState);
-        }
-
         this.setState(newState, function () {
           _this9.props.onScrollIndexChange && _this9.props.onScrollIndexChange(newState);
+
+          if (_this9.props.lazy) {
+            _this9.props.onLazyLoad && _this9.props.onLazyLoad(newState);
+          }
         });
       }
     }
@@ -637,7 +693,10 @@ var VirtualScroller = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "getOptions",
-    value: function getOptions(index, count) {
+    value: function getOptions(renderedIndex) {
+      var first = this.state.first;
+      var count = (this.props.items || []).length;
+      var index = this.isBoth() ? first.rows + renderedIndex : first + renderedIndex;
       return {
         index: index,
         count: count,
@@ -648,6 +707,40 @@ var VirtualScroller = /*#__PURE__*/function (_Component) {
         props: this.props
       };
     }
+  }, {
+    key: "loaderOptions",
+    value: function loaderOptions(index, extOptions) {
+      var count = this.state.loaderArr.length;
+      return _objectSpread({
+        index: index,
+        count: count,
+        first: index === 0,
+        last: index === count - 1,
+        even: index % 2 === 0,
+        odd: index % 2 !== 0,
+        props: this.props
+      }, extOptions);
+    }
+  }, {
+    key: "loadedItems",
+    value: function loadedItems() {
+      var _this11 = this;
+
+      var items = this.props.items;
+
+      if (items && !this.state.loading) {
+        var isBoth = this.isBoth();
+        var isHorizontal = this.isHorizontal();
+        var _this$state3 = this.state,
+            first = _this$state3.first,
+            last = _this$state3.last;
+        if (isBoth) return items.slice(first.rows, last.rows).map(function (item) {
+          return _this11.props.columns ? item : item.slice(first.cols, last.cols);
+        });else if (isHorizontal && this.props.columns) return items;else return items.slice(first, last);
+      }
+
+      return [];
+    }
   }, {
     key: "init",
     value: function init() {
@@ -663,7 +756,7 @@ var VirtualScroller = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
-      if (prevProps.itemSize !== this.props.itemSize || !prevProps.items || prevProps.items.length !== (this.props.items || []).length) {
+      if (!ObjectUtils.equals(prevProps.itemSize, this.props.itemSize) || !prevProps.items || prevProps.items.length !== (this.props.items || []).length) {
         this.init();
       }
 
@@ -680,50 +773,11 @@ var VirtualScroller = /*#__PURE__*/function (_Component) {
         } : 0;
       }
     }
-  }, {
-    key: "renderItem",
-    value: function renderItem(item, index, count, passedItem) {
-      var options = this.getOptions(index, count);
-      var content = ObjectUtils.getJSXElement(this.props.itemTemplate, passedItem || item, options);
-      return /*#__PURE__*/React.createElement(React.Fragment, {
-        key: index
-      }, content);
-    }
-  }, {
-    key: "renderItems",
-    value: function renderItems() {
-      var _this11 = this;
-
-      var items = this.props.items;
-
-      if (items && !this.state.loading) {
-        var isBoth = this.isBoth();
-        var _this$state3 = this.state,
-            first = _this$state3.first,
-            last = _this$state3.last;
-        var count = items.length;
-
-        if (isBoth) {
-          return items.slice(first.rows, last.rows).map(function (item, i) {
-            var items = item.slice(first.cols, last.cols);
-            var index = first.rows + i;
-            return _this11.renderItem(item, index, count, items);
-          });
-        } else {
-          return items.slice(first, last).map(function (item, i) {
-            var index = first + i;
-            return _this11.renderItem(item, index, count);
-          });
-        }
-      }
-
-      return null;
-    }
   }, {
     key: "renderLoaderItem",
-    value: function renderLoaderItem(index, count, extOptions) {
-      var options = _objectSpread(_objectSpread({}, this.getOptions(index, count)), extOptions || {});
-
+    value: function renderLoaderItem(index) {
+      var extOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+      var options = this.loaderOptions(index, extOptions);
       var content = ObjectUtils.getJSXElement(this.props.loadingTemplate, options);
       return /*#__PURE__*/React.createElement(React.Fragment, {
         key: index
@@ -734,7 +788,7 @@ var VirtualScroller = /*#__PURE__*/function (_Component) {
     value: function renderLoader() {
       var _this12 = this;
 
-      if (this.state.loading) {
+      if (!this.props.loaderDisabled && this.props.showLoader && this.state.loading) {
         var className = classNames('p-virtualscroller-loader', {
           'p-component-overlay': !this.props.loadingTemplate
         });
@@ -745,9 +799,8 @@ var VirtualScroller = /*#__PURE__*/function (_Component) {
         if (this.props.loadingTemplate) {
           var isBoth = this.isBoth();
           var numItemsInViewport = this.state.numItemsInViewport;
-          var length = isBoth ? numItemsInViewport.rows : numItemsInViewport;
           content = this.state.loaderArr.map(function (_, index) {
-            return _this12.renderLoaderItem(index, length, isBoth && {
+            return _this12.renderLoaderItem(index, isBoth && {
               numCols: numItemsInViewport.cols
             });
           });
@@ -760,35 +813,87 @@ var VirtualScroller = /*#__PURE__*/function (_Component) {
 
       return null;
     }
+  }, {
+    key: "renderSpacer",
+    value: function renderSpacer() {
+      var _this13 = this;
+
+      if (this.props.showSpacer) {
+        return /*#__PURE__*/React.createElement("div", {
+          ref: function ref(el) {
+            return _this13.spacer = el;
+          },
+          className: "p-virtualscroller-spacer"
+        });
+      }
+
+      return null;
+    }
+  }, {
+    key: "renderItem",
+    value: function renderItem(item, index) {
+      var options = this.getOptions(index);
+      var content = ObjectUtils.getJSXElement(this.props.itemTemplate, item, options);
+      return /*#__PURE__*/React.createElement(React.Fragment, {
+        key: options.index
+      }, content);
+    }
+  }, {
+    key: "renderItems",
+    value: function renderItems(loadedItems) {
+      var _this14 = this;
+
+      return loadedItems.map(function (item, index) {
+        return _this14.renderItem(item, index);
+      });
+    }
   }, {
     key: "renderContent",
     value: function renderContent() {
-      var _this13 = this;
+      var _this15 = this;
 
-      var items = this.renderItems();
+      var loadedItems = this.loadedItems();
+      var items = this.renderItems(loadedItems);
+      var className = classNames('p-virtualscroller-content', {
+        'p-virtualscroller-loading': this.state.loading
+      });
       var content = /*#__PURE__*/React.createElement("div", {
-        className: "p-virtualscroller-content",
+        className: className,
         ref: function ref(el) {
-          return _this13.content = el;
+          return _this15.content = el;
         }
       }, items);
 
       if (this.props.contentTemplate) {
-        var _this$state4 = this.state,
-            loading = _this$state4.loading,
-            first = _this$state4.first,
-            last = _this$state4.last;
         var defaultOptions = {
-          className: 'p-virtualscroller-content',
-          ref: function ref(el) {
-            return _this13.content = el;
+          className: className,
+          contentRef: function contentRef(el) {
+            return _this15.content = el;
+          },
+          spacerRef: function spacerRef(el) {
+            return _this15.spacer = el;
+          },
+          stickyRef: function stickyRef(el) {
+            return _this15.sticky = el;
+          },
+          items: loadedItems,
+          getItemOptions: function getItemOptions(index) {
+            return _this15.getOptions(index);
           },
           children: items,
           element: content,
           props: this.props,
-          loading: loading,
-          first: first,
-          last: last
+          loading: this.state.loading,
+          getLoaderOptions: function getLoaderOptions(index, ext) {
+            return _this15.loaderOptions(index, ext);
+          },
+          loadingTemplate: this.props.loadingTemplate,
+          itemSize: this.props.itemSize,
+          rows: this.getRows(),
+          columns: this.getColumns(),
+          vertical: this.isVertical(),
+          horizontal: this.isHorizontal(),
+          both: this.isBoth()
         };
         return ObjectUtils.getJSXElement(this.props.contentTemplate, defaultOptions);
       }
@@ -798,30 +903,37 @@ var VirtualScroller = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this14 = this;
+      var _this16 = this;
 
-      var isBoth = this.isBoth();
-      var isHorizontal = this.isHorizontal();
-      var className = classNames('p-virtualscroller', {
-        'p-both-scroll': isBoth,
-        'p-horizontal-scroll': isHorizontal
-      }, this.props.className);
-      var loader = this.renderLoader();
-      var content = this.renderContent();
-      return /*#__PURE__*/React.createElement("div", {
-        ref: function ref(el) {
-          return _this14.element = el;
-        },
-        className: className,
-        tabIndex: 0,
-        style: this.props.style,
-        onScroll: this.onScroll
-      }, content, /*#__PURE__*/React.createElement("div", {
-        ref: function ref(el) {
-          return _this14.spacer = el;
-        },
-        className: "p-virtualscroller-spacer"
-      }), loader);
+      if (this.props.disabled) {
+        var content = ObjectUtils.getJSXElement(this.props.contentTemplate, {
+          items: this.props.items,
+          rows: this.props.items,
+          columns: this.props.columns
+        });
+        return /*#__PURE__*/React.createElement(React.Fragment, null, this.props.children, content);
+      } else {
+        var isBoth = this.isBoth();
+        var isHorizontal = this.isHorizontal();
+        var className = classNames('p-virtualscroller', {
+          'p-both-scroll': isBoth,
+          'p-horizontal-scroll': isHorizontal
+        }, this.props.className);
+        var loader = this.renderLoader();
+
+        var _content = this.renderContent();
+
+        var spacer = this.renderSpacer();
+        return /*#__PURE__*/React.createElement("div", {
+          ref: function ref(el) {
+            return _this16.el = el;
+          },
+          className: className,
+          tabIndex: 0,
+          style: this.props.style,
+          onScroll: this.onScroll
+        }, _content, spacer, loader);
+      }
     }
   }]);
 
@@ -840,6 +952,11 @@ _defineProperty(VirtualScroller, "defaultProps", {
   numToleratedItems: null,
   delay: 0,
   lazy: false,
+  disabled: false,
+  loaderDisabled: false,
+  columns: null,
+  loading: false,
+  showSpacer: true,
   showLoader: false,
   loadingTemplate: null,
   itemTemplate: null,