jattac.libs.web.responsive-table 0.2.15 → 0.2.16

package/dist/index.js

@@ -183,919 +183,114 @@ class InfiniteScrollPlugin {
     }
 }
 
-function _extends() {
-  return _extends = Object.assign ? Object.assign.bind() : function (n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends.apply(null, arguments);
-}
-
-function _assertThisInitialized(e) {
-  if (void 0 === e) throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
-  return e;
-}
-
-function _setPrototypeOf(t, e) {
-  return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) {
-    return t.__proto__ = e, t;
-  }, _setPrototypeOf(t, e);
-}
-
-function _inheritsLoose(t, o) {
-  t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o);
-}
-
-var safeIsNaN = Number.isNaN ||
-    function ponyfill(value) {
-        return typeof value === 'number' && value !== value;
-    };
-function isEqual(first, second) {
-    if (first === second) {
-        return true;
-    }
-    if (safeIsNaN(first) && safeIsNaN(second)) {
-        return true;
-    }
-    return false;
-}
-function areInputsEqual(newInputs, lastInputs) {
-    if (newInputs.length !== lastInputs.length) {
-        return false;
-    }
-    for (var i = 0; i < newInputs.length; i++) {
-        if (!isEqual(newInputs[i], lastInputs[i])) {
-            return false;
-        }
-    }
-    return true;
-}
-
-function memoizeOne(resultFn, isEqual) {
-    if (isEqual === void 0) { isEqual = areInputsEqual; }
-    var lastThis;
-    var lastArgs = [];
-    var lastResult;
-    var calledOnce = false;
-    function memoized() {
-        var newArgs = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            newArgs[_i] = arguments[_i];
-        }
-        if (calledOnce && lastThis === this && isEqual(newArgs, lastArgs)) {
-            return lastResult;
-        }
-        lastResult = resultFn.apply(this, newArgs);
-        calledOnce = true;
-        lastThis = this;
-        lastArgs = newArgs;
-        return lastResult;
-    }
-    return memoized;
-}
-
-// Animation frame based implementation of setTimeout.
-// Inspired by Joe Lambert, https://gist.github.com/joelambert/1002116#file-requesttimeout-js
-var hasNativePerformanceNow = typeof performance === 'object' && typeof performance.now === 'function';
-var now = hasNativePerformanceNow ? function () {
-  return performance.now();
-} : function () {
-  return Date.now();
-};
-function cancelTimeout(timeoutID) {
-  cancelAnimationFrame(timeoutID.id);
-}
-function requestTimeout(callback, delay) {
-  var start = now();
-
-  function tick() {
-    if (now() - start >= delay) {
-      callback.call(null);
-    } else {
-      timeoutID.id = requestAnimationFrame(tick);
-    }
-  }
-
-  var timeoutID = {
-    id: requestAnimationFrame(tick)
-  };
-  return timeoutID;
-}
-
-var size = -1; // This utility copied from "dom-helpers" package.
-
-function getScrollbarSize(recalculate) {
-  if (recalculate === void 0) {
-    recalculate = false;
-  }
-
-  if (size === -1 || recalculate) {
-    var div = document.createElement('div');
-    var style = div.style;
-    style.width = '50px';
-    style.height = '50px';
-    style.overflow = 'scroll';
-    document.body.appendChild(div);
-    size = div.offsetWidth - div.clientWidth;
-    document.body.removeChild(div);
-  }
-
-  return size;
-}
-var cachedRTLResult = null; // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
-// Chrome does not seem to adhere; its scrollLeft values are positive (measured relative to the left).
-// Safari's elastic bounce makes detecting this even more complicated wrt potential false positives.
-// The safest way to check this is to intentionally set a negative offset,
-// and then verify that the subsequent "scroll" event matches the negative offset.
-// If it does not match, then we can assume a non-standard RTL scroll implementation.
-
-function getRTLOffsetType(recalculate) {
-  if (recalculate === void 0) {
-    recalculate = false;
-  }
-
-  if (cachedRTLResult === null || recalculate) {
-    var outerDiv = document.createElement('div');
-    var outerStyle = outerDiv.style;
-    outerStyle.width = '50px';
-    outerStyle.height = '50px';
-    outerStyle.overflow = 'scroll';
-    outerStyle.direction = 'rtl';
-    var innerDiv = document.createElement('div');
-    var innerStyle = innerDiv.style;
-    innerStyle.width = '100px';
-    innerStyle.height = '100px';
-    outerDiv.appendChild(innerDiv);
-    document.body.appendChild(outerDiv);
-
-    if (outerDiv.scrollLeft > 0) {
-      cachedRTLResult = 'positive-descending';
-    } else {
-      outerDiv.scrollLeft = 1;
-
-      if (outerDiv.scrollLeft === 0) {
-        cachedRTLResult = 'negative';
-      } else {
-        cachedRTLResult = 'positive-ascending';
-      }
-    }
-
-    document.body.removeChild(outerDiv);
-    return cachedRTLResult;
-  }
-
-  return cachedRTLResult;
-}
-
-if (process.env.NODE_ENV !== 'production') ;
-
-var IS_SCROLLING_DEBOUNCE_INTERVAL$1 = 150;
-
-var defaultItemKey$1 = function defaultItemKey(index, data) {
-  return index;
-}; // In DEV mode, this Set helps us only log a warning once per component instance.
-// This avoids spamming the console every time a render happens.
-
-
-var devWarningsDirection = null;
-var devWarningsTagName$1 = null;
-
-if (process.env.NODE_ENV !== 'production') {
-  if (typeof window !== 'undefined' && typeof window.WeakSet !== 'undefined') {
-    devWarningsDirection = /*#__PURE__*/new WeakSet();
-    devWarningsTagName$1 = /*#__PURE__*/new WeakSet();
-  }
-}
-
-function createListComponent(_ref) {
-  var _class;
-
-  var getItemOffset = _ref.getItemOffset,
-      getEstimatedTotalSize = _ref.getEstimatedTotalSize,
-      getItemSize = _ref.getItemSize,
-      getOffsetForIndexAndAlignment = _ref.getOffsetForIndexAndAlignment,
-      getStartIndexForOffset = _ref.getStartIndexForOffset,
-      getStopIndexForStartIndex = _ref.getStopIndexForStartIndex,
-      initInstanceProps = _ref.initInstanceProps,
-      shouldResetStyleCacheOnItemSizeChange = _ref.shouldResetStyleCacheOnItemSizeChange,
-      validateProps = _ref.validateProps;
-  return _class = /*#__PURE__*/function (_PureComponent) {
-    _inheritsLoose(List, _PureComponent);
-
-    // Always use explicit constructor for React components.
-    // It produces less code after transpilation. (#26)
-    // eslint-disable-next-line no-useless-constructor
-    function List(props) {
-      var _this;
-
-      _this = _PureComponent.call(this, props) || this;
-      _this._instanceProps = initInstanceProps(_this.props, _assertThisInitialized(_this));
-      _this._outerRef = void 0;
-      _this._resetIsScrollingTimeoutId = null;
-      _this.state = {
-        instance: _assertThisInitialized(_this),
-        isScrolling: false,
-        scrollDirection: 'forward',
-        scrollOffset: typeof _this.props.initialScrollOffset === 'number' ? _this.props.initialScrollOffset : 0,
-        scrollUpdateWasRequested: false
-      };
-      _this._callOnItemsRendered = void 0;
-      _this._callOnItemsRendered = memoizeOne(function (overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) {
-        return _this.props.onItemsRendered({
-          overscanStartIndex: overscanStartIndex,
-          overscanStopIndex: overscanStopIndex,
-          visibleStartIndex: visibleStartIndex,
-          visibleStopIndex: visibleStopIndex
-        });
-      });
-      _this._callOnScroll = void 0;
-      _this._callOnScroll = memoizeOne(function (scrollDirection, scrollOffset, scrollUpdateWasRequested) {
-        return _this.props.onScroll({
-          scrollDirection: scrollDirection,
-          scrollOffset: scrollOffset,
-          scrollUpdateWasRequested: scrollUpdateWasRequested
-        });
-      });
-      _this._getItemStyle = void 0;
-
-      _this._getItemStyle = function (index) {
-        var _this$props = _this.props,
-            direction = _this$props.direction,
-            itemSize = _this$props.itemSize,
-            layout = _this$props.layout;
-
-        var itemStyleCache = _this._getItemStyleCache(shouldResetStyleCacheOnItemSizeChange && itemSize, shouldResetStyleCacheOnItemSizeChange && layout, shouldResetStyleCacheOnItemSizeChange && direction);
-
-        var style;
-
-        if (itemStyleCache.hasOwnProperty(index)) {
-          style = itemStyleCache[index];
-        } else {
-          var _offset = getItemOffset(_this.props, index, _this._instanceProps);
-
-          var size = getItemSize(_this.props, index, _this._instanceProps); // TODO Deprecate direction "horizontal"
-
-          var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
-          var isRtl = direction === 'rtl';
-          var offsetHorizontal = isHorizontal ? _offset : 0;
-          itemStyleCache[index] = style = {
-            position: 'absolute',
-            left: isRtl ? undefined : offsetHorizontal,
-            right: isRtl ? offsetHorizontal : undefined,
-            top: !isHorizontal ? _offset : 0,
-            height: !isHorizontal ? size : '100%',
-            width: isHorizontal ? size : '100%'
-          };
-        }
-
-        return style;
-      };
-
-      _this._getItemStyleCache = void 0;
-      _this._getItemStyleCache = memoizeOne(function (_, __, ___) {
-        return {};
-      });
-
-      _this._onScrollHorizontal = function (event) {
-        var _event$currentTarget = event.currentTarget,
-            clientWidth = _event$currentTarget.clientWidth,
-            scrollLeft = _event$currentTarget.scrollLeft,
-            scrollWidth = _event$currentTarget.scrollWidth;
-
-        _this.setState(function (prevState) {
-          if (prevState.scrollOffset === scrollLeft) {
-            // Scroll position may have been updated by cDM/cDU,
-            // In which case we don't need to trigger another render,
-            // And we don't want to update state.isScrolling.
-            return null;
-          }
-
-          var direction = _this.props.direction;
-          var scrollOffset = scrollLeft;
-
-          if (direction === 'rtl') {
-            // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
-            // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
-            // It's also easier for this component if we convert offsets to the same format as they would be in for ltr.
-            // So the simplest solution is to determine which browser behavior we're dealing with, and convert based on it.
-            switch (getRTLOffsetType()) {
-              case 'negative':
-                scrollOffset = -scrollLeft;
-                break;
-
-              case 'positive-descending':
-                scrollOffset = scrollWidth - clientWidth - scrollLeft;
-                break;
-            }
-          } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
-
-
-          scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
-          return {
-            isScrolling: true,
-            scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
-            scrollOffset: scrollOffset,
-            scrollUpdateWasRequested: false
-          };
-        }, _this._resetIsScrollingDebounced);
-      };
-
-      _this._onScrollVertical = function (event) {
-        var _event$currentTarget2 = event.currentTarget,
-            clientHeight = _event$currentTarget2.clientHeight,
-            scrollHeight = _event$currentTarget2.scrollHeight,
-            scrollTop = _event$currentTarget2.scrollTop;
-
-        _this.setState(function (prevState) {
-          if (prevState.scrollOffset === scrollTop) {
-            // Scroll position may have been updated by cDM/cDU,
-            // In which case we don't need to trigger another render,
-            // And we don't want to update state.isScrolling.
-            return null;
-          } // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
-
-
-          var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
-          return {
-            isScrolling: true,
-            scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
-            scrollOffset: scrollOffset,
-            scrollUpdateWasRequested: false
-          };
-        }, _this._resetIsScrollingDebounced);
-      };
-
-      _this._outerRefSetter = function (ref) {
-        var outerRef = _this.props.outerRef;
-        _this._outerRef = ref;
-
-        if (typeof outerRef === 'function') {
-          outerRef(ref);
-        } else if (outerRef != null && typeof outerRef === 'object' && outerRef.hasOwnProperty('current')) {
-          outerRef.current = ref;
-        }
-      };
-
-      _this._resetIsScrollingDebounced = function () {
-        if (_this._resetIsScrollingTimeoutId !== null) {
-          cancelTimeout(_this._resetIsScrollingTimeoutId);
-        }
-
-        _this._resetIsScrollingTimeoutId = requestTimeout(_this._resetIsScrolling, IS_SCROLLING_DEBOUNCE_INTERVAL$1);
-      };
-
-      _this._resetIsScrolling = function () {
-        _this._resetIsScrollingTimeoutId = null;
-
-        _this.setState({
-          isScrolling: false
-        }, function () {
-          // Clear style cache after state update has been committed.
-          // This way we don't break pure sCU for items that don't use isScrolling param.
-          _this._getItemStyleCache(-1, null);
-        });
-      };
-
-      return _this;
-    }
-
-    List.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
-      validateSharedProps$1(nextProps, prevState);
-      validateProps(nextProps);
-      return null;
-    };
-
-    var _proto = List.prototype;
-
-    _proto.scrollTo = function scrollTo(scrollOffset) {
-      scrollOffset = Math.max(0, scrollOffset);
-      this.setState(function (prevState) {
-        if (prevState.scrollOffset === scrollOffset) {
-          return null;
-        }
-
-        return {
-          scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
-          scrollOffset: scrollOffset,
-          scrollUpdateWasRequested: true
-        };
-      }, this._resetIsScrollingDebounced);
-    };
-
-    _proto.scrollToItem = function scrollToItem(index, align) {
-      if (align === void 0) {
-        align = 'auto';
-      }
-
-      var _this$props2 = this.props,
-          itemCount = _this$props2.itemCount,
-          layout = _this$props2.layout;
-      var scrollOffset = this.state.scrollOffset;
-      index = Math.max(0, Math.min(index, itemCount - 1)); // The scrollbar size should be considered when scrolling an item into view, to ensure it's fully visible.
-      // But we only need to account for its size when it's actually visible.
-      // This is an edge case for lists; normally they only scroll in the dominant direction.
-
-      var scrollbarSize = 0;
-
-      if (this._outerRef) {
-        var outerRef = this._outerRef;
-
-        if (layout === 'vertical') {
-          scrollbarSize = outerRef.scrollWidth > outerRef.clientWidth ? getScrollbarSize() : 0;
-        } else {
-          scrollbarSize = outerRef.scrollHeight > outerRef.clientHeight ? getScrollbarSize() : 0;
-        }
-      }
-
-      this.scrollTo(getOffsetForIndexAndAlignment(this.props, index, align, scrollOffset, this._instanceProps, scrollbarSize));
-    };
-
-    _proto.componentDidMount = function componentDidMount() {
-      var _this$props3 = this.props,
-          direction = _this$props3.direction,
-          initialScrollOffset = _this$props3.initialScrollOffset,
-          layout = _this$props3.layout;
-
-      if (typeof initialScrollOffset === 'number' && this._outerRef != null) {
-        var outerRef = this._outerRef; // TODO Deprecate direction "horizontal"
-
-        if (direction === 'horizontal' || layout === 'horizontal') {
-          outerRef.scrollLeft = initialScrollOffset;
-        } else {
-          outerRef.scrollTop = initialScrollOffset;
-        }
-      }
-
-      this._callPropsCallbacks();
-    };
-
-    _proto.componentDidUpdate = function componentDidUpdate() {
-      var _this$props4 = this.props,
-          direction = _this$props4.direction,
-          layout = _this$props4.layout;
-      var _this$state = this.state,
-          scrollOffset = _this$state.scrollOffset,
-          scrollUpdateWasRequested = _this$state.scrollUpdateWasRequested;
-
-      if (scrollUpdateWasRequested && this._outerRef != null) {
-        var outerRef = this._outerRef; // TODO Deprecate direction "horizontal"
-
-        if (direction === 'horizontal' || layout === 'horizontal') {
-          if (direction === 'rtl') {
-            // TRICKY According to the spec, scrollLeft should be negative for RTL aligned elements.
-            // This is not the case for all browsers though (e.g. Chrome reports values as positive, measured relative to the left).
-            // So we need to determine which browser behavior we're dealing with, and mimic it.
-            switch (getRTLOffsetType()) {
-              case 'negative':
-                outerRef.scrollLeft = -scrollOffset;
-                break;
-
-              case 'positive-ascending':
-                outerRef.scrollLeft = scrollOffset;
-                break;
-
-              default:
-                var clientWidth = outerRef.clientWidth,
-                    scrollWidth = outerRef.scrollWidth;
-                outerRef.scrollLeft = scrollWidth - clientWidth - scrollOffset;
-                break;
-            }
-          } else {
-            outerRef.scrollLeft = scrollOffset;
-          }
-        } else {
-          outerRef.scrollTop = scrollOffset;
-        }
-      }
-
-      this._callPropsCallbacks();
-    };
-
-    _proto.componentWillUnmount = function componentWillUnmount() {
-      if (this._resetIsScrollingTimeoutId !== null) {
-        cancelTimeout(this._resetIsScrollingTimeoutId);
-      }
-    };
-
-    _proto.render = function render() {
-      var _this$props5 = this.props,
-          children = _this$props5.children,
-          className = _this$props5.className,
-          direction = _this$props5.direction,
-          height = _this$props5.height,
-          innerRef = _this$props5.innerRef,
-          innerElementType = _this$props5.innerElementType,
-          innerTagName = _this$props5.innerTagName,
-          itemCount = _this$props5.itemCount,
-          itemData = _this$props5.itemData,
-          _this$props5$itemKey = _this$props5.itemKey,
-          itemKey = _this$props5$itemKey === void 0 ? defaultItemKey$1 : _this$props5$itemKey,
-          layout = _this$props5.layout,
-          outerElementType = _this$props5.outerElementType,
-          outerTagName = _this$props5.outerTagName,
-          style = _this$props5.style,
-          useIsScrolling = _this$props5.useIsScrolling,
-          width = _this$props5.width;
-      var isScrolling = this.state.isScrolling; // TODO Deprecate direction "horizontal"
-
-      var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
-      var onScroll = isHorizontal ? this._onScrollHorizontal : this._onScrollVertical;
-
-      var _this$_getRangeToRend = this._getRangeToRender(),
-          startIndex = _this$_getRangeToRend[0],
-          stopIndex = _this$_getRangeToRend[1];
-
-      var items = [];
-
-      if (itemCount > 0) {
-        for (var _index = startIndex; _index <= stopIndex; _index++) {
-          items.push(React.createElement(children, {
-            data: itemData,
-            key: itemKey(_index, itemData),
-            index: _index,
-            isScrolling: useIsScrolling ? isScrolling : undefined,
-            style: this._getItemStyle(_index)
-          }));
-        }
-      } // Read this value AFTER items have been created,
-      // So their actual sizes (if variable) are taken into consideration.
-
-
-      var estimatedTotalSize = getEstimatedTotalSize(this.props, this._instanceProps);
-      return React.createElement(outerElementType || outerTagName || 'div', {
-        className: className,
-        onScroll: onScroll,
-        ref: this._outerRefSetter,
-        style: _extends({
-          position: 'relative',
-          height: height,
-          width: width,
-          overflow: 'auto',
-          WebkitOverflowScrolling: 'touch',
-          willChange: 'transform',
-          direction: direction
-        }, style)
-      }, React.createElement(innerElementType || innerTagName || 'div', {
-        children: items,
-        ref: innerRef,
-        style: {
-          height: isHorizontal ? '100%' : estimatedTotalSize,
-          pointerEvents: isScrolling ? 'none' : undefined,
-          width: isHorizontal ? estimatedTotalSize : '100%'
-        }
-      }));
-    };
-
-    _proto._callPropsCallbacks = function _callPropsCallbacks() {
-      if (typeof this.props.onItemsRendered === 'function') {
-        var itemCount = this.props.itemCount;
-
-        if (itemCount > 0) {
-          var _this$_getRangeToRend2 = this._getRangeToRender(),
-              _overscanStartIndex = _this$_getRangeToRend2[0],
-              _overscanStopIndex = _this$_getRangeToRend2[1],
-              _visibleStartIndex = _this$_getRangeToRend2[2],
-              _visibleStopIndex = _this$_getRangeToRend2[3];
-
-          this._callOnItemsRendered(_overscanStartIndex, _overscanStopIndex, _visibleStartIndex, _visibleStopIndex);
-        }
-      }
-
-      if (typeof this.props.onScroll === 'function') {
-        var _this$state2 = this.state,
-            _scrollDirection = _this$state2.scrollDirection,
-            _scrollOffset = _this$state2.scrollOffset,
-            _scrollUpdateWasRequested = _this$state2.scrollUpdateWasRequested;
-
-        this._callOnScroll(_scrollDirection, _scrollOffset, _scrollUpdateWasRequested);
-      }
-    } // Lazily create and cache item styles while scrolling,
-    // So that pure component sCU will prevent re-renders.
-    // We maintain this cache, and pass a style prop rather than index,
-    // So that List can clear cached styles and force item re-render if necessary.
-    ;
-
-    _proto._getRangeToRender = function _getRangeToRender() {
-      var _this$props6 = this.props,
-          itemCount = _this$props6.itemCount,
-          overscanCount = _this$props6.overscanCount;
-      var _this$state3 = this.state,
-          isScrolling = _this$state3.isScrolling,
-          scrollDirection = _this$state3.scrollDirection,
-          scrollOffset = _this$state3.scrollOffset;
-
-      if (itemCount === 0) {
-        return [0, 0, 0, 0];
-      }
-
-      var startIndex = getStartIndexForOffset(this.props, scrollOffset, this._instanceProps);
-      var stopIndex = getStopIndexForStartIndex(this.props, startIndex, scrollOffset, this._instanceProps); // Overscan by one item in each direction so that tab/focus works.
-      // If there isn't at least one extra item, tab loops back around.
-
-      var overscanBackward = !isScrolling || scrollDirection === 'backward' ? Math.max(1, overscanCount) : 1;
-      var overscanForward = !isScrolling || scrollDirection === 'forward' ? Math.max(1, overscanCount) : 1;
-      return [Math.max(0, startIndex - overscanBackward), Math.max(0, Math.min(itemCount - 1, stopIndex + overscanForward)), startIndex, stopIndex];
-    };
-
-    return List;
-  }(React.PureComponent), _class.defaultProps = {
-    direction: 'ltr',
-    itemData: undefined,
-    layout: 'vertical',
-    overscanCount: 2,
-    useIsScrolling: false
-  }, _class;
-} // NOTE: I considered further wrapping individual items with a pure ListItem component.
-// This would avoid ever calling the render function for the same index more than once,
-// But it would also add the overhead of a lot of components/fibers.
-// I assume people already do this (render function returning a class component),
-// So my doing it would just unnecessarily double the wrappers.
-
-var validateSharedProps$1 = function validateSharedProps(_ref2, _ref3) {
-  var children = _ref2.children,
-      direction = _ref2.direction,
-      height = _ref2.height,
-      layout = _ref2.layout,
-      innerTagName = _ref2.innerTagName,
-      outerTagName = _ref2.outerTagName,
-      width = _ref2.width;
-  var instance = _ref3.instance;
-
-  if (process.env.NODE_ENV !== 'production') {
-    if (innerTagName != null || outerTagName != null) {
-      if (devWarningsTagName$1 && !devWarningsTagName$1.has(instance)) {
-        devWarningsTagName$1.add(instance);
-        console.warn('The innerTagName and outerTagName props have been deprecated. ' + 'Please use the innerElementType and outerElementType props instead.');
-      }
-    } // TODO Deprecate direction "horizontal"
-
-
-    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
-
-    switch (direction) {
-      case 'horizontal':
-      case 'vertical':
-        if (devWarningsDirection && !devWarningsDirection.has(instance)) {
-          devWarningsDirection.add(instance);
-          console.warn('The direction prop should be either "ltr" (default) or "rtl". ' + 'Please use the layout prop to specify "vertical" (default) or "horizontal" orientation.');
-        }
-
-        break;
-
-      case 'ltr':
-      case 'rtl':
-        // Valid values
-        break;
-
-      default:
-        throw Error('An invalid "direction" prop has been specified. ' + 'Value should be either "ltr" or "rtl". ' + ("\"" + direction + "\" was specified."));
-    }
-
-    switch (layout) {
-      case 'horizontal':
-      case 'vertical':
-        // Valid values
-        break;
-
-      default:
-        throw Error('An invalid "layout" prop has been specified. ' + 'Value should be either "horizontal" or "vertical". ' + ("\"" + layout + "\" was specified."));
-    }
-
-    if (children == null) {
-      throw Error('An invalid "children" prop has been specified. ' + 'Value should be a React component. ' + ("\"" + (children === null ? 'null' : typeof children) + "\" was specified."));
-    }
-
-    if (isHorizontal && typeof width !== 'number') {
-      throw Error('An invalid "width" prop has been specified. ' + 'Horizontal lists must specify a number for width. ' + ("\"" + (width === null ? 'null' : typeof width) + "\" was specified."));
-    } else if (!isHorizontal && typeof height !== 'number') {
-      throw Error('An invalid "height" prop has been specified. ' + 'Vertical lists must specify a number for height. ' + ("\"" + (height === null ? 'null' : typeof height) + "\" was specified."));
-    }
-  }
-};
-
-var FixedSizeList = /*#__PURE__*/createListComponent({
-  getItemOffset: function getItemOffset(_ref, index) {
-    var itemSize = _ref.itemSize;
-    return index * itemSize;
-  },
-  getItemSize: function getItemSize(_ref2, index) {
-    var itemSize = _ref2.itemSize;
-    return itemSize;
-  },
-  getEstimatedTotalSize: function getEstimatedTotalSize(_ref3) {
-    var itemCount = _ref3.itemCount,
-        itemSize = _ref3.itemSize;
-    return itemSize * itemCount;
-  },
-  getOffsetForIndexAndAlignment: function getOffsetForIndexAndAlignment(_ref4, index, align, scrollOffset, instanceProps, scrollbarSize) {
-    var direction = _ref4.direction,
-        height = _ref4.height,
-        itemCount = _ref4.itemCount,
-        itemSize = _ref4.itemSize,
-        layout = _ref4.layout,
-        width = _ref4.width;
-    // TODO Deprecate direction "horizontal"
-    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
-    var size = isHorizontal ? width : height;
-    var lastItemOffset = Math.max(0, itemCount * itemSize - size);
-    var maxOffset = Math.min(lastItemOffset, index * itemSize);
-    var minOffset = Math.max(0, index * itemSize - size + itemSize + scrollbarSize);
-
-    if (align === 'smart') {
-      if (scrollOffset >= minOffset - size && scrollOffset <= maxOffset + size) {
-        align = 'auto';
-      } else {
-        align = 'center';
-      }
-    }
-
-    switch (align) {
-      case 'start':
-        return maxOffset;
-
-      case 'end':
-        return minOffset;
-
-      case 'center':
-        {
-          // "Centered" offset is usually the average of the min and max.
-          // But near the edges of the list, this doesn't hold true.
-          var middleOffset = Math.round(minOffset + (maxOffset - minOffset) / 2);
-
-          if (middleOffset < Math.ceil(size / 2)) {
-            return 0; // near the beginning
-          } else if (middleOffset > lastItemOffset + Math.floor(size / 2)) {
-            return lastItemOffset; // near the end
-          } else {
-            return middleOffset;
-          }
-        }
-
-      case 'auto':
-      default:
-        if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
-          return scrollOffset;
-        } else if (scrollOffset < minOffset) {
-          return minOffset;
-        } else {
-          return maxOffset;
-        }
-
-    }
-  },
-  getStartIndexForOffset: function getStartIndexForOffset(_ref5, offset) {
-    var itemCount = _ref5.itemCount,
-        itemSize = _ref5.itemSize;
-    return Math.max(0, Math.min(itemCount - 1, Math.floor(offset / itemSize)));
-  },
-  getStopIndexForStartIndex: function getStopIndexForStartIndex(_ref6, startIndex, scrollOffset) {
-    var direction = _ref6.direction,
-        height = _ref6.height,
-        itemCount = _ref6.itemCount,
-        itemSize = _ref6.itemSize,
-        layout = _ref6.layout,
-        width = _ref6.width;
-    // TODO Deprecate direction "horizontal"
-    var isHorizontal = direction === 'horizontal' || layout === 'horizontal';
-    var offset = startIndex * itemSize;
-    var size = isHorizontal ? width : height;
-    var numVisibleItems = Math.ceil((size + scrollOffset - offset) / itemSize);
-    return Math.max(0, Math.min(itemCount - 1, startIndex + numVisibleItems - 1 // -1 is because stop index is inclusive
-    ));
-  },
-  initInstanceProps: function initInstanceProps(props) {// Noop
-  },
-  shouldResetStyleCacheOnItemSizeChange: true,
-  validateProps: function validateProps(_ref7) {
-    var itemSize = _ref7.itemSize;
-
-    if (process.env.NODE_ENV !== 'production') {
-      if (typeof itemSize !== 'number') {
-        throw Error('An invalid "itemSize" prop has been specified. ' + 'Value should be a number. ' + ("\"" + (itemSize === null ? 'null' : typeof itemSize) + "\" was specified."));
-      }
-    }
-  }
-});
-
-// Class component
 class InfiniteTable extends React.Component {
     constructor(props) {
         super(props);
         this.tableContainerRef = React.createRef();
         this.headerRef = React.createRef();
-        this.resizeObserver = null;
-        this.measureHeader = () => {
-            if (this.headerRef.current) {
-                const ths = Array.from(this.headerRef.current.querySelectorAll('th'));
-                const widths = ths.map((th) => th.getBoundingClientRect().width);
-                if (widths.some((w) => w > 0)) {
-                    this.setState({ columnWidths: widths });
-                }
-            }
+        this.handleResize = () => {
+            this.setState({
+                isMobile: window.innerWidth <= (this.props.mobileBreakpoint || 600),
+            });
         };
-        this.handleScroll = () => {
-            if (this.headerRef.current && !this.props.maxHeight) {
+        this.handleScroll = (event) => {
+            const { currentTarget } = event;
+            const { scrollHeight, scrollTop, clientHeight } = currentTarget;
+            const { infiniteScrollProps } = this.props;
+            const { isLoadingMore } = this.state;
+            // Page-level sticky header logic
+            if (this.props.enablePageLevelStickyHeader !== false && this.headerRef.current) {
                 const { top } = this.headerRef.current.getBoundingClientRect();
                 const isSticky = top <= 0;
                 if (isSticky !== this.state.isHeaderSticky) {
                     this.setState({ isHeaderSticky: isSticky });
                 }
             }
+            // Infinite scroll loading logic
+            if ((infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.hasMore) &&
+                !isLoadingMore &&
+                scrollHeight - scrollTop - clientHeight < 100 // 100px threshold from bottom
+            ) {
+                this.setState({ isLoadingMore: true }, () => __awaiter(this, void 0, void 0, function* () {
+                    var _a;
+                    yield ((_a = infiniteScrollProps.onLoadMore) === null || _a === void 0 ? void 0 : _a.call(infiniteScrollProps, this.props.data));
+                    this.setState({ isLoadingMore: false });
+                }));
+            }
         };
-        this.handleResize = () => {
-            this.setState({
-                isMobile: window.innerWidth <= this.mobileBreakpoint,
+        this.getColumnDefinition = (colDef, rowIndex) => {
+            if (typeof colDef === 'function') {
+                return colDef(this.data[rowIndex], rowIndex);
+            }
+            return colDef;
+        };
+        this.getRawColumnDefinition = (colDef) => {
+            if (typeof colDef === 'function') {
+                return colDef(this.data[0], 0);
+            }
+            return colDef;
+        };
+        this.onHeaderClickCallback = (colDef) => {
+            var _a;
+            const raw = this.getRawColumnDefinition(colDef);
+            return (_a = raw.interactivity) === null || _a === void 0 ? void 0 : _a.onHeaderClick;
+        };
+        this.getClickableHeaderClassName = (colDef) => {
+            var _a;
+            const raw = this.getRawColumnDefinition(colDef);
+            return ((_a = raw.interactivity) === null || _a === void 0 ? void 0 : _a.onHeaderClick) ? raw.interactivity.className || styles.clickableHeader : '';
+        };
+        this.getHeaderProps = (colDef) => {
+            var _a;
+            const headerProps = {};
+            (_a = this.props.plugins) === null || _a === void 0 ? void 0 : _a.forEach(plugin => {
+                if (plugin.getHeaderProps) {
+                    Object.assign(headerProps, plugin.getHeaderProps(this.getRawColumnDefinition(colDef)));
+                }
             });
+            return headerProps;
         };
         this.state = {
             isMobile: false,
             processedData: props.data,
             isLoadingMore: false,
             isHeaderSticky: false,
-            columnWidths: [],
         };
         this.debouncedResize = this.debounce(this.handleResize, 200);
     }
-    get mobileBreakpoint() {
-        return this.props.mobileBreakpoint || 600;
-    }
-    debounce(func, delay) {
-        let timeout;
-        return () => {
-            clearTimeout(timeout);
-            timeout = setTimeout(() => func(), delay);
-        };
-    }
-    get data() {
-        if (Array.isArray(this.state.processedData) && this.state.processedData.length > 0) {
-            return this.state.processedData;
-        }
-        else {
-            return [];
-        }
-    }
-    get noDataSvg() {
-        return (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "#ccc", height: "40", width: "40", viewBox: "0 0 24 24" },
-            React.createElement("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1-14h2v6h-2zm0 8h2v2h-2z" })));
-    }
-    get hasData() {
-        return this.data.length > 0;
-    }
-    get noDataComponent() {
-        return (this.props.noDataComponent || (React.createElement("div", { className: styles.noDataWrapper },
-            this.noDataSvg,
-            React.createElement("div", { className: styles.noData }, "No data"))));
-    }
+    // --- Lifecycle & Event Handlers ---
     componentDidMount() {
-        this.handleResize(); // Initial check
+        this.handleResize();
         window.addEventListener('resize', this.debouncedResize);
-        if (this.props.enablePageLevelStickyHeader !== false) {
-            window.addEventListener('scroll', this.handleScroll);
-        }
         this.initializePlugins();
-        if (this.headerRef.current) {
-            this.measureHeader();
-            this.resizeObserver = new ResizeObserver(this.measureHeader);
-            this.resizeObserver.observe(this.headerRef.current);
-        }
     }
     componentWillUnmount() {
         window.removeEventListener('resize', this.debouncedResize);
-        if (this.props.enablePageLevelStickyHeader !== false) {
-            window.removeEventListener('scroll', this.handleScroll);
-        }
-        if (this.resizeObserver && this.headerRef.current) {
-            this.resizeObserver.unobserve(this.headerRef.current);
-        }
     }
     componentDidUpdate(prevProps) {
-        var _a, _b, _c;
         if (prevProps.data !== this.props.data) {
             this.processData();
         }
-        if (prevProps.columnDefinitions.length !== this.props.columnDefinitions.length) {
-            this.measureHeader();
-        }
-        // Handle infinite scroll loading
-        if (((_a = this.props.infiniteScrollProps) === null || _a === void 0 ? void 0 : _a.enableInfiniteScroll) && ((_b = this.props.infiniteScrollProps) === null || _b === void 0 ? void 0 : _b.hasMore) && !this.state.isLoadingMore && ((_c = this.props.infiniteScrollProps) === null || _c === void 0 ? void 0 : _c.onLoadMore)) ;
     }
+    debounce(func, delay) {
+        let timeout;
+        return () => {
+            clearTimeout(timeout);
+            timeout = setTimeout(() => func(), delay);
+        };
+    }
+    // --- Data & Plugin Management ---
     initializePlugins() {
-        var _a, _b;
+        var _a;
+        // This logic is identical to ResponsiveTable to ensure plugins work the same way
         const activePlugins = [];
-        // Add explicitly provided plugins first
         if (this.props.plugins) {
             activePlugins.push(...this.props.plugins);
         }
-        // Automatically add FilterPlugin if filterProps are provided and not already present
         if (((_a = this.props.filterProps) === null || _a === void 0 ? void 0 : _a.showFilter) && !activePlugins.some(p => p.id === 'filter')) {
             activePlugins.push(new FilterPlugin());
         }
-        // Automatically add InfiniteScrollPlugin if infiniteScrollProps are provided and not already present
-        if (((_b = this.props.infiniteScrollProps) === null || _b === void 0 ? void 0 : _b.enableInfiniteScroll) && !activePlugins.some(p => p.id === 'infinite-scroll')) {
-            activePlugins.push(new InfiniteScrollPlugin());
-        }
+        // We don't auto-add the InfiniteScrollPlugin here as this component IS the infinite scroll implementation
         activePlugins.forEach((plugin) => {
             if (plugin.onPluginInit) {
                 plugin.onPluginInit({
@@ -1108,8 +303,11 @@ class InfiniteTable extends React.Component {
                 });
             }
         });
-        // Process data with all active plugins
+        this.processData(activePlugins);
+    }
+    processData(plugins = null) {
         let processedData = [...this.props.data];
+        const activePlugins = plugins || this.props.plugins || [];
         activePlugins.forEach((plugin) => {
             if (plugin.processData) {
                 processedData = plugin.processData(processedData);
@@ -1117,217 +315,72 @@ class InfiniteTable extends React.Component {
         });
         this.setState({ processedData });
     }
-    processData() {
-        let processedData = [...this.props.data];
-        if (this.props.plugins) {
-            this.props.plugins.forEach((plugin) => {
-                if (plugin.processData) {
-                    processedData = plugin.processData(processedData);
-                }
-            });
-        }
-        this.setState({ processedData });
-    }
-    getColumnDefinition(columnDefinition, rowIndex) {
-        if (!this.hasData) {
-            return { displayLabel: '', cellRenderer: () => '' };
-        }
-        return columnDefinition instanceof Function ? columnDefinition(this.data[0], rowIndex) : columnDefinition;
-    }
-    getRawColumnDefinition(columnDefinition) {
-        let rawColumnDefinition = {};
-        if (columnDefinition instanceof Function) {
-            rawColumnDefinition = columnDefinition(this.data[0], 0);
-        }
-        else {
-            rawColumnDefinition = columnDefinition;
-        }
-        return rawColumnDefinition;
-    }
-    onHeaderClickCallback(columnDefinition) {
-        const rawColumnDefinition = this.getRawColumnDefinition(columnDefinition);
-        if (rawColumnDefinition.interactivity && rawColumnDefinition.interactivity.onHeaderClick) {
-            return rawColumnDefinition.interactivity.onHeaderClick;
-        }
-        else {
-            return undefined;
-        }
+    // --- Getters for data, state, and props ---
+    // All of these are identical to ResponsiveTable to ensure consistent behavior
+    get data() {
+        return this.state.processedData || [];
     }
-    getClickableHeaderClassName(onHeaderClickCallback, colDef) {
-        const rawColumnDefinition = this.getRawColumnDefinition(colDef);
-        const clickableHeaderClassName = onHeaderClickCallback
-            ? rawColumnDefinition.interactivity.className || styles.clickableHeader
-            : '';
-        return clickableHeaderClassName;
+    get hasData() {
+        return this.data.length > 0;
     }
-    getHeaderProps(columnDefinition) {
-        const headerProps = {};
-        if (this.props.plugins) {
-            this.props.plugins.forEach((plugin) => {
-                if (plugin.getHeaderProps) {
-                    Object.assign(headerProps, plugin.getHeaderProps(this.getRawColumnDefinition(columnDefinition)));
-                }
-            });
-        }
-        return headerProps;
+    get noDataComponent() {
+        return this.props.noDataComponent || React.createElement("div", { className: styles.noData }, "No data");
     }
     get rowClickFunction() {
-        if (this.props.onRowClick) {
-            return this.props.onRowClick;
-        }
-        else {
-            return () => { };
-        }
+        return this.props.onRowClick || (() => { });
     }
     get rowClickStyle() {
-        if (this.props.onRowClick) {
-            return { cursor: 'pointer' };
-        }
-        else {
-            return {};
-        }
-    }
-    get tableFooter() {
-        if (!this.props.footerRows || this.props.footerRows.length === 0) {
-            return null;
-        }
-        return (React.createElement("tfoot", null, this.props.footerRows.map((row, rowIndex) => (React.createElement("tr", { key: rowIndex }, row.columns.map((col, colIndex) => (React.createElement("td", { key: colIndex, colSpan: col.colSpan, className: `${styles.footerCell} ${col.className || ''} ${col.onCellClick ? styles.clickableFooterCell : ''}`, onClick: col.onCellClick }, col.cellRenderer()))))))));
-    }
-    get mobileFooter() {
-        if (!this.props.footerRows || this.props.footerRows.length === 0) {
-            return null;
-        }
-        return (React.createElement("div", { className: styles.footerCard },
-            React.createElement("div", { className: styles['footer-card-body'] }, this.props.footerRows.map((row, rowIndex) => {
-                let currentColumnIndex = 0;
-                return (React.createElement("div", { key: rowIndex }, row.columns.map((col, colIndex) => {
-                    let label = col.displayLabel;
-                    if (!label && col.colSpan === 1) {
-                        const header = this.props.columnDefinitions[currentColumnIndex];
-                        if (header) {
-                            label = this.getRawColumnDefinition(header).displayLabel;
-                        }
-                    }
-                    currentColumnIndex += col.colSpan;
-                    return (React.createElement("p", { key: colIndex, className: `${styles['footer-card-row']} ${col.className || ''} ${col.onCellClick ? styles.clickableFooterCell : ''}`, onClick: col.onCellClick },
-                        label && React.createElement("span", { className: styles['card-label'] }, label),
-                        React.createElement("span", { className: styles['card-value'] }, col.cellRenderer())));
-                })));
-            }))));
-    }
-    get skeletonView() {
-        const skeletonRowCount = 5; // Or make this configurable
-        const columnCount = this.props.columnDefinitions.length;
-        if (this.state.isMobile) {
-            return (React.createElement("div", null, [...Array(skeletonRowCount)].map((_, i) => (React.createElement("div", { key: i, className: styles.skeletonCard }, [...Array(columnCount)].map((_, j) => (React.createElement("div", { key: j, className: `${styles.skeleton} ${styles.skeletonText}`, style: { marginBottom: '0.5rem' } }))))))));
-        }
-        return (React.createElement("table", { className: styles.responsiveTable },
-            React.createElement("thead", null,
-                React.createElement("tr", null, [...Array(columnCount)].map((_, i) => (React.createElement("th", { key: i },
-                    React.createElement("div", { className: `${styles.skeleton} ${styles.skeletonText}` })))))),
-            React.createElement("tbody", null, [...Array(skeletonRowCount)].map((_, i) => (React.createElement("tr", { key: i }, [...Array(columnCount)].map((_, j) => (React.createElement("td", { key: j },
-                React.createElement("div", { className: `${styles.skeleton} ${styles.skeletonText}` }))))))))));
+        return this.props.onRowClick ? { cursor: 'pointer' } : {};
     }
+    // --- View Renderers ---
     get mobileView() {
-        return (React.createElement("div", null,
-            this.data.map((row, rowIndex) => {
-                var _a;
-                return (React.createElement("div", { key: rowIndex, className: `${styles['card']} ${((_a = this.props.animationProps) === null || _a === void 0 ? void 0 : _a.animateOnLoad) ? styles.animatedRow : ''}`, style: { animationDelay: `${rowIndex * 0.05}s` }, onClick: (e) => {
-                        this.rowClickFunction(row);
-                        e.stopPropagation();
-                        e.preventDefault();
-                    } },
-                    React.createElement("div", { className: styles['card-header'] }, " "),
-                    React.createElement("div", { className: styles['card-body'] }, this.props.columnDefinitions.map((columnDefinition, colIndex) => {
-                        const colDef = this.getColumnDefinition(columnDefinition, rowIndex);
-                        const onHeaderClickCallback = this.onHeaderClickCallback(colDef);
-                        const clickableHeaderClassName = this.getClickableHeaderClassName(onHeaderClickCallback, colDef);
-                        return (React.createElement("div", { key: colIndex, className: styles['card-row'] },
-                            React.createElement("p", null,
-                                React.createElement("span", { className: `${styles['card-label']} ${clickableHeaderClassName}`, onClick: onHeaderClickCallback ? () => onHeaderClickCallback(colDef.interactivity.id) : undefined }, colDef.displayLabel),
-                                React.createElement("span", { className: styles['card-value'] }, colDef.cellRenderer(row)))));
-                    }))));
-            }),
-            this.mobileFooter));
+        // This view is identical to ResponsiveTable's mobile view
+        return (React.createElement("div", null, this.data.map((row, rowIndex) => {
+            var _a;
+            return (React.createElement("div", { key: rowIndex, className: `${styles['card']} ${((_a = this.props.animationProps) === null || _a === void 0 ? void 0 : _a.animateOnLoad) ? styles.animatedRow : ''}`, style: { animationDelay: `${rowIndex * 0.05}s` }, onClick: () => this.rowClickFunction(row) },
+                React.createElement("div", { className: styles['card-body'] }, this.props.columnDefinitions.map((colDef, colIndex) => {
+                    const column = this.getColumnDefinition(colDef, rowIndex);
+                    return (React.createElement("div", { key: colIndex, className: styles['card-row'] },
+                        React.createElement("p", null,
+                            React.createElement("span", { className: styles['card-label'] }, column.displayLabel),
+                            React.createElement("span", { className: styles['card-value'] }, column.cellRenderer(row)))));
+                }))));
+        })));
     }
     get largeScreenView() {
-        const useFixedHeaders = this.props.maxHeight ? true : false;
-        const fixedHeadersStyle = useFixedHeaders
-            ? { maxHeight: this.props.maxHeight, overflowY: 'auto' }
-            : {};
-        const itemData = {
-            rows: this.data,
-            columnWidths: this.state.columnWidths,
-            columnDefinitions: this.props.columnDefinitions,
-            animationProps: this.props.animationProps,
-            getColumnDefinition: this.getColumnDefinition.bind(this),
-            rowClickFunction: this.rowClickFunction,
-            rowClickStyle: this.rowClickStyle,
-        };
-        return (React.createElement("div", { style: fixedHeadersStyle, ref: this.tableContainerRef },
-            React.createElement("table", { className: styles['responsiveTable'], style: { tableLayout: 'fixed' } },
+        const { infiniteScrollProps } = this.props;
+        const { isLoadingMore } = this.state;
+        return (React.createElement("div", { ref: this.tableContainerRef, onScroll: this.handleScroll, style: { maxHeight: this.props.maxHeight, overflowY: 'auto' } },
+            React.createElement("table", { className: styles['responsiveTable'] },
                 React.createElement("thead", { ref: this.headerRef, className: this.state.isHeaderSticky ? styles.stickyHeader : '' },
-                    React.createElement("tr", null, this.props.columnDefinitions.map((columnDefinition, colIndex) => {
-                        const onHeaderClickCallback = this.onHeaderClickCallback(columnDefinition);
-                        const clickableHeaderClassName = this.getClickableHeaderClassName(onHeaderClickCallback, columnDefinition);
-                        const headerProps = this.getHeaderProps(columnDefinition);
-                        // Combine class names: existing clickable, and plugin-provided (mapped to CSS Modules)
-                        const combinedClassName = `${clickableHeaderClassName} ${headerProps.className ? styles[headerProps.className] : ''}`.trim();
-                        // Remove className from headerProps to avoid duplication
+                    React.createElement("tr", null, this.props.columnDefinitions.map((colDef, colIndex) => {
+                        const rawColDef = this.getRawColumnDefinition(colDef);
+                        const headerProps = this.getHeaderProps(rawColDef);
+                        const onHeaderClickCallback = this.onHeaderClickCallback(rawColDef);
+                        const combinedClassName = `${this.getClickableHeaderClassName(rawColDef)} ${headerProps.className ? styles[headerProps.className] : ''}`.trim();
                         // eslint-disable-next-line @typescript-eslint/no-unused-vars
                         const { className } = headerProps, restHeaderProps = __rest(headerProps, ["className"]);
-                        return (React.createElement("th", Object.assign({ key: colIndex, className: combinedClassName }, restHeaderProps, { style: { width: this.state.columnWidths[colIndex], boxSizing: 'border-box' } }),
+                        return (React.createElement("th", Object.assign({ key: colIndex, className: combinedClassName }, restHeaderProps, { onClick: onHeaderClickCallback ? () => onHeaderClickCallback(rawColDef.interactivity.id) : undefined }),
                             React.createElement("div", { className: styles.headerInnerWrapper },
-                                React.createElement("div", { className: styles.headerContent }, this.getColumnDefinition(columnDefinition, 0).displayLabel),
+                                React.createElement("div", { className: styles.headerContent }, rawColDef.displayLabel),
                                 React.createElement("span", { className: styles.sortIcon }))));
                     }))),
-                React.createElement(FixedSizeList, { height: fixedHeadersStyle.maxHeight ? (typeof fixedHeadersStyle.maxHeight === 'string' ? parseFloat(fixedHeadersStyle.maxHeight) : fixedHeadersStyle.maxHeight) : 500, itemCount: this.data.length, itemSize: 50, width: '100%', itemData: itemData, outerRef: this.tableContainerRef, outerElementType: React.forwardRef((props, ref) => React.createElement("tbody", Object.assign({ ref: ref }, props))) }, ({ index, style, data }) => {
-                    const { rows, columnWidths, getColumnDefinition, rowClickFunction, rowClickStyle, columnDefinitions, animationProps, } = data;
-                    const row = rows[index];
-                    if (!row)
-                        return null;
-                    return (React.createElement("tr", { key: index, className: (animationProps === null || animationProps === void 0 ? void 0 : animationProps.animateOnLoad) ? styles.animatedRow : '', style: Object.assign(Object.assign({}, style), { animationDelay: `${index * 0.05}s` }) }, columnDefinitions.map((columnDefinition, colIndex) => (React.createElement("td", { onClick: () => rowClickFunction(row), key: colIndex, style: { width: columnWidths[colIndex], boxSizing: 'border-box' } },
-                        React.createElement("span", { style: Object.assign({}, rowClickStyle) }, getColumnDefinition(columnDefinition, index).cellRenderer(row)))))));
-                }),
-                this.tableFooter),
-            this.renderPluginFooters()));
-    }
-    renderPluginHeaders() {
-        if (!this.props.plugins) {
-            return null;
-        }
-        return this.props.plugins.map((plugin) => {
-            if (plugin.renderHeader) {
-                // For sort plugin, only render header in mobile view
-                if (plugin.id === 'sort' && !this.state.isMobile) {
-                    return null;
-                }
-                return React.createElement("div", { key: plugin.id }, plugin.renderHeader());
-            }
-            return null;
-        });
-    }
-    renderPluginFooters() {
-        if (!this.props.plugins) {
-            return null;
-        }
-        return this.props.plugins.map((plugin) => {
-            if (plugin.renderFooter) {
-                return React.createElement("div", { key: plugin.id + '-footer' }, plugin.renderFooter());
-            }
-            return null;
-        });
+                React.createElement("tbody", null, this.data.map((row, rowIndex) => {
+                    var _a;
+                    return (React.createElement("tr", { key: rowIndex, className: ((_a = this.props.animationProps) === null || _a === void 0 ? void 0 : _a.animateOnLoad) ? styles.animatedRow : '', style: { animationDelay: `${rowIndex * 0.05}s` } }, this.props.columnDefinitions.map((colDef, colIndex) => (React.createElement("td", { key: colIndex, onClick: () => this.rowClickFunction(row), style: this.rowClickStyle }, this.getColumnDefinition(colDef, rowIndex).cellRenderer(row))))));
+                }))),
+            isLoadingMore && (infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.loadingMoreComponent),
+            !isLoadingMore && !(infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.hasMore) && (infiniteScrollProps === null || infiniteScrollProps === void 0 ? void 0 : infiniteScrollProps.noMoreDataComponent)));
     }
     render() {
         var _a;
-        if ((_a = this.props.animationProps) === null || _a === void 0 ? void 0 : _a.isLoading) {
-            return this.skeletonView;
+        if (((_a = this.props.animationProps) === null || _a === void 0 ? void 0 : _a.isLoading) && !this.hasData) {
+            // Show skeleton only on initial load
+            return React.createElement("div", null, "Skeleton View Placeholder"); // Placeholder for skeleton view
         }
         return (React.createElement("div", null,
-            this.renderPluginHeaders(),
             !this.hasData && this.noDataComponent,
-            this.hasData && this.state.isMobile && this.mobileView,
-            this.hasData && !this.state.isMobile && this.largeScreenView));
+            this.hasData && (this.state.isMobile ? this.mobileView : this.largeScreenView)));
     }
 }