primereact 6.5.1 → 7.0.0-rc.2

package/virtualscroller/virtualscroller.js

@@ -79,6 +79,8 @@ this.primereact.virtualscroller = (function (exports, React, core) {
   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);
@@ -141,7 +143,8 @@ this.primereact.virtualscroller = (function (exports, React, core) {
           cols: 0
         } : 0,
         numToleratedItems: props.numToleratedItems,
-        loading: false
+        loading: props.loading,
+        loaderArr: []
       };
       _this.onScroll = _this.onScroll.bind(_assertThisInitialized(_this));
       _this.lastScrollPos = isBoth ? {
@@ -154,7 +157,7 @@ this.primereact.virtualscroller = (function (exports, React, core) {
     _createClass(VirtualScroller, [{
       key: "scrollTo",
       value: function scrollTo(options) {
-        this.element && this.element.scrollTo(options);
+        this.el && this.el.scrollTo(options);
       }
     }, {
       key: "scrollToIndex",
@@ -165,17 +168,20 @@ this.primereact.virtualscroller = (function (exports, React, core) {
         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() {
@@ -190,15 +196,24 @@ this.primereact.virtualscroller = (function (exports, React, core) {
 
         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
+            });
           }
         }
       }
@@ -264,6 +279,25 @@ this.primereact.virtualscroller = (function (exports, React, core) {
           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() {
@@ -282,9 +316,9 @@ this.primereact.virtualscroller = (function (exports, React, core) {
         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 = {
@@ -311,6 +345,11 @@ this.primereact.virtualscroller = (function (exports, React, core) {
           }
         };
       }
+    }, {
+      key: "isVertical",
+      value: function isVertical() {
+        return this.props.orientation === 'vertical';
+      }
     }, {
       key: "isHorizontal",
       value: function isHorizontal() {
@@ -330,28 +369,32 @@ this.primereact.virtualscroller = (function (exports, React, core) {
         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,
@@ -359,8 +402,14 @@ this.primereact.virtualscroller = (function (exports, React, core) {
         };
 
         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
           });
         }
 
@@ -375,18 +424,25 @@ this.primereact.virtualscroller = (function (exports, React, core) {
       }
     }, {
       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,
@@ -411,22 +467,22 @@ this.primereact.virtualscroller = (function (exports, React, core) {
       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);
           }
         }
       }
@@ -441,19 +497,19 @@ this.primereact.virtualscroller = (function (exports, React, core) {
           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);
           }
         }
       }
@@ -477,7 +533,8 @@ this.primereact.virtualscroller = (function (exports, React, core) {
 
             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) {
@@ -502,36 +559,36 @@ this.primereact.virtualscroller = (function (exports, React, core) {
             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;
@@ -544,18 +601,18 @@ this.primereact.virtualscroller = (function (exports, React, core) {
             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
@@ -566,11 +623,11 @@ this.primereact.virtualscroller = (function (exports, React, core) {
 
           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;
         }
 
@@ -596,13 +653,12 @@ this.primereact.virtualscroller = (function (exports, React, core) {
             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);
+            }
           });
         }
       }
@@ -642,7 +698,10 @@ this.primereact.virtualscroller = (function (exports, React, core) {
       }
     }, {
       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,
@@ -653,6 +712,40 @@ this.primereact.virtualscroller = (function (exports, React, core) {
           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() {
@@ -668,7 +761,7 @@ this.primereact.virtualscroller = (function (exports, React, core) {
     }, {
       key: "componentDidUpdate",
       value: function componentDidUpdate(prevProps, prevState) {
-        if (prevProps.itemSize !== this.props.itemSize || !prevProps.items || prevProps.items.length !== (this.props.items || []).length) {
+        if (!core.ObjectUtils.equals(prevProps.itemSize, this.props.itemSize) || !prevProps.items || prevProps.items.length !== (this.props.items || []).length) {
           this.init();
         }
 
@@ -685,50 +778,11 @@ this.primereact.virtualscroller = (function (exports, React, core) {
           } : 0;
         }
       }
-    }, {
-      key: "renderItem",
-      value: function renderItem(item, index, count, passedItem) {
-        var options = this.getOptions(index, count);
-        var content = core.ObjectUtils.getJSXElement(this.props.itemTemplate, passedItem || item, options);
-        return /*#__PURE__*/React__default['default'].createElement(React__default['default'].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 = core.ObjectUtils.getJSXElement(this.props.loadingTemplate, options);
         return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, {
           key: index
@@ -739,7 +793,7 @@ this.primereact.virtualscroller = (function (exports, React, core) {
       value: function renderLoader() {
         var _this12 = this;
 
-        if (this.state.loading) {
+        if (!this.props.loaderDisabled && this.props.showLoader && this.state.loading) {
           var className = core.classNames('p-virtualscroller-loader', {
             'p-component-overlay': !this.props.loadingTemplate
           });
@@ -750,9 +804,8 @@ this.primereact.virtualscroller = (function (exports, React, core) {
           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
               });
             });
@@ -765,35 +818,87 @@ this.primereact.virtualscroller = (function (exports, React, core) {
 
         return null;
       }
+    }, {
+      key: "renderSpacer",
+      value: function renderSpacer() {
+        var _this13 = this;
+
+        if (this.props.showSpacer) {
+          return /*#__PURE__*/React__default['default'].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 = core.ObjectUtils.getJSXElement(this.props.itemTemplate, item, options);
+        return /*#__PURE__*/React__default['default'].createElement(React__default['default'].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 = core.classNames('p-virtualscroller-content', {
+          'p-virtualscroller-loading': this.state.loading
+        });
         var content = /*#__PURE__*/React__default['default'].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 core.ObjectUtils.getJSXElement(this.props.contentTemplate, defaultOptions);
         }
@@ -803,30 +908,37 @@ this.primereact.virtualscroller = (function (exports, React, core) {
     }, {
       key: "render",
       value: function render() {
-        var _this14 = this;
+        var _this16 = this;
 
-        var isBoth = this.isBoth();
-        var isHorizontal = this.isHorizontal();
-        var className = core.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__default['default'].createElement("div", {
-          ref: function ref(el) {
-            return _this14.element = el;
-          },
-          className: className,
-          tabIndex: 0,
-          style: this.props.style,
-          onScroll: this.onScroll
-        }, content, /*#__PURE__*/React__default['default'].createElement("div", {
-          ref: function ref(el) {
-            return _this14.spacer = el;
-          },
-          className: "p-virtualscroller-spacer"
-        }), loader);
+        if (this.props.disabled) {
+          var content = core.ObjectUtils.getJSXElement(this.props.contentTemplate, {
+            items: this.props.items,
+            rows: this.props.items,
+            columns: this.props.columns
+          });
+          return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, this.props.children, content);
+        } else {
+          var isBoth = this.isBoth();
+          var isHorizontal = this.isHorizontal();
+          var className = core.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__default['default'].createElement("div", {
+            ref: function ref(el) {
+              return _this16.el = el;
+            },
+            className: className,
+            tabIndex: 0,
+            style: this.props.style,
+            onScroll: this.onScroll
+          }, _content, spacer, loader);
+        }
       }
     }]);
 
@@ -845,6 +957,11 @@ this.primereact.virtualscroller = (function (exports, React, core) {
     numToleratedItems: null,
     delay: 0,
     lazy: false,
+    disabled: false,
+    loaderDisabled: false,
+    columns: null,
+    loading: false,
+    showSpacer: true,
     showLoader: false,
     loadingTemplate: null,
     itemTemplate: null,