@synerise/ds-table 0.48.1 → 0.48.3

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.48.3](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.48.2...@synerise/ds-table@0.48.3) (2024-04-03)
+
+**Note:** Version bump only for package @synerise/ds-table
+
+
+
+
+
+## [0.48.2](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.48.1...@synerise/ds-table@0.48.2) (2024-04-02)
+
+**Note:** Version bump only for package @synerise/ds-table
+
+
+
+
+
 ## [0.48.1](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.48.0...@synerise/ds-table@0.48.1) (2024-03-29)
 
 **Note:** Version bump only for package @synerise/ds-table

package/dist/InfiniteScroll/BackToTopButton.js

@@ -10,7 +10,8 @@ export var BackToTopButton = function BackToTopButton(props) {
     color: "grey",
     icon: /*#__PURE__*/React.createElement(Icon, {
       component: /*#__PURE__*/React.createElement(ArrowUpCircleM, null)
-    })
+    }),
+    className: "virtual-table-back-to-top-button"
   }, props));
 };
 export default BackToTopButton;

package/dist/InfiniteScroll/InfiniteLoaderItem.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { LoaderItemProps } from './InfiniteLoaderItem.types';
-declare const InfiniteLoaderItem: ({ infiniteScroll }: LoaderItemProps) => React.ReactElement;
+declare const InfiniteLoaderItem: ({ infiniteScroll, position }: LoaderItemProps) => React.ReactElement;
 export default InfiniteLoaderItem;

package/dist/InfiniteScroll/InfiniteLoaderItem.js

@@ -51,19 +51,24 @@ var ErrorItem = function ErrorItem(_ref) {
 };
 
 var InfiniteLoaderItem = function InfiniteLoaderItem(_ref2) {
-  var infiniteScroll = _ref2.infiniteScroll;
+  var infiniteScroll = _ref2.infiniteScroll,
+      position = _ref2.position;
   var hasMore = infiniteScroll.hasMore,
       isLoading = infiniteScroll.isLoading,
       hasError = infiniteScroll.hasError,
       onRetryButtonClick = infiniteScroll.onRetryButtonClick,
       render = infiniteScroll.render;
 
+  var handleRetryClick = function handleRetryClick() {
+    onRetryButtonClick && onRetryButtonClick(position);
+  };
+
   if (typeof render === 'function') {
     return render(infiniteScrollPropsToState(infiniteScroll));
   }
 
   return /*#__PURE__*/React.createElement(React.Fragment, null, isLoading && /*#__PURE__*/React.createElement(LoadingItem, null), !isLoading && !hasMore && /*#__PURE__*/React.createElement(NoMoreItem, null), !isLoading && hasError && /*#__PURE__*/React.createElement(ErrorItem, {
-    onRetryClick: onRetryButtonClick
+    onRetryClick: handleRetryClick
   }));
 };
 

package/dist/InfiniteScroll/InfiniteLoaderItem.types.d.ts

@@ -1,4 +1,5 @@
-import { ReactElement, MouseEvent as ReactMouseEvent } from 'react';
+import { ReactElement } from 'react';
+export type LoaderItemPosition = 'TOP' | 'BOTTOM';
 export type InfiniteScrollState = {
     hasError: boolean;
     hasMore: boolean;
@@ -7,11 +8,15 @@ export type InfiniteScrollState = {
 export type InfiniteScrollProps = InfiniteScrollState & {
     maxScroll?: number;
     showBackToTopButton?: boolean;
+    nextPage?: InfiniteScrollState;
+    prevPage?: InfiniteScrollState;
     render?: (state: InfiniteScrollState) => ReactElement;
-    onRetryButtonClick?: (event: ReactMouseEvent<HTMLElement, MouseEvent>) => void;
-    onScrollEndReach: () => void;
+    onRetryButtonClick?: (position: LoaderItemPosition | undefined) => void;
+    onScrollEndReach?: () => void;
     onScrollTopReach?: () => void;
+    onBackToTop?: () => void;
 };
 export type LoaderItemProps = {
-    infiniteScroll: InfiniteScrollProps;
+    infiniteScroll: InfiniteScrollProps & InfiniteScrollState;
+    position?: LoaderItemPosition;
 };

package/dist/InfiniteScroll/utils.d.ts

@@ -1,6 +1,17 @@
+/// <reference types="react" />
 import { InfiniteScrollProps, InfiniteScrollState } from './InfiniteLoaderItem.types';
-export declare const infiniteScrollPropsToState: ({ hasError, hasMore, isLoading, }: InfiniteScrollProps) => InfiniteScrollState;
+export declare const infiniteScrollPropsToState: ({ hasError, hasMore, isLoading, }: InfiniteScrollProps & InfiniteScrollState) => InfiniteScrollState;
 declare const _default: {
-    infiniteScrollPropsToState: ({ hasError, hasMore, isLoading, }: InfiniteScrollProps) => InfiniteScrollState;
+    infiniteScrollPropsToState: ({ hasError, hasMore, isLoading, }: InfiniteScrollState & {
+        maxScroll?: number | undefined;
+        showBackToTopButton?: boolean | undefined;
+        nextPage?: InfiniteScrollState | undefined;
+        prevPage?: InfiniteScrollState | undefined;
+        render?: ((state: InfiniteScrollState) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) | undefined;
+        onRetryButtonClick?: ((position: import("./InfiniteLoaderItem.types").LoaderItemPosition | undefined) => void) | undefined;
+        onScrollEndReach?: (() => void) | undefined;
+        onScrollTopReach?: (() => void) | undefined;
+        onBackToTop?: (() => void) | undefined;
+    }) => InfiniteScrollState;
 };
 export default _default;

package/dist/Table.styles.js

@@ -67,7 +67,7 @@ export var InputWrapper = styled.div.withConfig({
 export var Selection = styled.div.withConfig({
   displayName: "Tablestyles__Selection",
   componentId: "dacfhr-11"
-})(["display:flex;align-items:center;justify-content:flex-start;width:64px;margin-right:24px;border-radius:3px;&:hover{background-color:", ";}.ant-btn.ds-button:first-of-type{border-top-right-radius:0;border-bottom-right-radius:0;}.ant-btn.ds-button:last-of-type{border-top-left-radius:0;border-bottom-left-radius:0;}", "{padding:0;}"], function (_ref2) {
+})(["display:flex;align-items:center;justify-content:flex-start;max-width:64px;margin-right:24px;border-radius:3px;&:hover{background-color:", ";}.ant-btn.ds-button:first-of-type{border-top-right-radius:0;border-bottom-right-radius:0;}.ant-btn.ds-button:last-of-type{border-top-left-radius:0;border-bottom-left-radius:0;}", "{padding:0;}"], function (_ref2) {
   var theme = _ref2.theme;
   return theme.palette['grey-100'];
 }, CheckboxWrapper);

package/dist/Table.types.d.ts

@@ -52,6 +52,7 @@ export type Locale = TableLocale & {
         groups?: string;
     };
     selectRowTooltip?: string;
+    selectVisible?: string;
     selectAllTooltip?: string;
     starRowTooltip?: string;
     selectionOptionsTooltip?: string;

package/dist/TableHeader/TableSelection.js

@@ -167,10 +167,11 @@ function TableSelection(_ref) {
     }, 0) : selectedRowKeys.length;
     return allRecordsCount === selectedKeysInDataSourceCount;
   }, [isEmpty, selection, dataSource, isShowingSubset, getSelectableChildren, getRowKey]);
+  var selectionTooltipTitle = !allSelected ? locale == null ? void 0 : locale.selectAllTooltip : locale == null ? void 0 : locale.unselectAll;
   return selection != null && selection.selectedRowKeys ? /*#__PURE__*/React.createElement(S.Selection, {
     "data-popup-container": true
   }, /*#__PURE__*/React.createElement(Tooltip, {
-    title: locale == null ? void 0 : locale.selectAllTooltip
+    title: selectionTooltipTitle
   }, /*#__PURE__*/React.createElement(Button.Checkbox, {
     disabled: isEmpty,
     "data-testid": "ds-table-batch-selection-button",

package/dist/VirtualTable/VirtualTable.d.ts

@@ -1,5 +1,6 @@
 import React, { Ref, ReactElement } from 'react';
 import { FixedSizeList as List } from 'react-window';
+import { TableSticky } from 'rc-table/lib/interface';
 import { RowType, DSTableProps } from '../Table.types';
 import { Props, VirtualTableRef } from './VirtualTable.types';
 declare const _default: <T extends object & RowType<T> & {
@@ -12,11 +13,13 @@ declare const _default: <T extends object & RowType<T> & {
         x?: number | undefined;
         y: number;
     };
-    sticky?: ((boolean | import("rc-table/lib/interface").TableSticky | undefined) & {
+    sticky?: ((boolean | TableSticky | undefined) & {
         scrollThreshold?: number | undefined;
     }) | undefined;
     onListRefChange?: ((ref: React.RefObject<List<any>>) => void) | undefined;
     onRowClick?: ((row: T) => void) | undefined;
+    onItemsRendered?: ((props: import("react-window").ListOnItemsRenderedProps) => void) | undefined;
+    onScrollToRecordIndex?: ((recordIndex: number, callback?: (() => void) | undefined) => void) | undefined;
 } & {
     ref?: React.Ref<VirtualTableRef> | undefined;
 }) => ReactElement;

package/dist/VirtualTable/VirtualTable.js

@@ -13,25 +13,26 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import React, { useCallback, useState, useRef, forwardRef, useEffect, useMemo, useImperativeHandle } from 'react';
 import { FixedSizeList as List } from 'react-window';
 import ResizeObserver from 'rc-resize-observer';
-import classNames from 'classnames';
 import { compact } from 'lodash';
 import { useIntl } from 'react-intl';
 import { infiniteLoaderItemHeight } from '../InfiniteScroll/constants';
 import BackToTopButton from '../InfiniteScroll/BackToTopButton';
 import OuterListElement from '../InfiniteScroll/OuterListElement';
 import DSTable from '../Table';
-import VirtualTableRow from './VirtualTableRow';
+import VirtualTableRow, { INFINITE_LOADED_ITEM_HEIGHT } from './VirtualTableRow';
 import * as S from './VirtualTable.styles';
 import { useTableLocale, calculatePixels } from '../utils';
 import { useRowKey } from '../hooks/useRowKey';
 import { useRowStar } from '../hooks/useRowStar';
 import { RowSelectionColumn } from '../RowSelection';
-import { EXPANDED_ROW_PROPERTY, HEADER_ROW_HEIGHT } from './constants';
+import { EXPANDED_ROW_PROPERTY, HEADER_ROW_HEIGHT, LOAD_DATA_OFFSET } from './constants';
 var relativeInlineStyle = {
   position: 'relative'
 };
 
 var VirtualTable = function VirtualTable(props, ref) {
+  var _infiniteScroll$prevP2;
+
   var _props$columns = props.columns,
       columns = _props$columns === void 0 ? [] : _props$columns,
       scroll = props.scroll,
@@ -52,7 +53,9 @@ var VirtualTable = function VirtualTable(props, ref) {
       locale = props.locale,
       loading = props.loading,
       sticky = props.sticky,
-      onListRefChange = props.onListRefChange;
+      onListRefChange = props.onListRefChange,
+      onItemsRendered = props.onItemsRendered,
+      onScrollToRecordIndex = props.onScrollToRecordIndex;
   var intl = useIntl();
   var tableLocale = useTableLocale(intl, locale);
   var listRef = useRef(null);
@@ -60,6 +63,77 @@ var VirtualTable = function VirtualTable(props, ref) {
   var containerRef = useRef(null);
   var horizontalScrollRef = useRef(null);
   var customBodyOnScrollRef = useRef();
+
+  var _React$useState = React.useState(null),
+      firstItem = _React$useState[0],
+      setFirstItem = _React$useState[1];
+
+  var updateFirstItem = useCallback(function (findFirstItem) {
+    var prevFirstItemIndex = dataSource.findIndex(findFirstItem);
+    setFirstItem(dataSource[0]);
+
+    if (prevFirstItemIndex >= 0 && listRef != null && listRef.current) {
+      if (onScrollToRecordIndex) {
+        onScrollToRecordIndex(prevFirstItemIndex, function () {
+          // error    Expected an assignment or function call and instead saw an expression
+          (listRef == null ? void 0 : listRef.current) && listRef.current.scrollToItem(prevFirstItemIndex, 'start');
+        });
+      } else {
+        listRef.current.scrollToItem(prevFirstItemIndex, 'start');
+      }
+    }
+  }, [dataSource, setFirstItem, onScrollToRecordIndex]);
+  React.useEffect(function () {
+    try {
+      if (!(infiniteScroll != null && infiniteScroll.prevPage) || dataSource.length === 0) {
+        return;
+      }
+
+      if (firstItem === null) {
+        setFirstItem(dataSource[0]);
+        return;
+      }
+
+      if (rowKey === undefined) {
+        var firstItemStringified = JSON.stringify(firstItem);
+
+        if (JSON.stringify(dataSource[0]) !== firstItemStringified) {
+          updateFirstItem(function (item) {
+            return JSON.stringify(item) === firstItemStringified;
+          });
+        }
+
+        return;
+      }
+
+      if (typeof rowKey === 'string') {
+        if (dataSource[0][rowKey] !== firstItem[rowKey]) {
+          updateFirstItem(function (item) {
+            return item[rowKey] === firstItem[rowKey];
+          });
+        }
+
+        return;
+      }
+
+      if (typeof rowKey === 'function') {
+        if (rowKey(dataSource[0]) !== rowKey(firstItem)) {
+          updateFirstItem(function (item) {
+            return rowKey(item) === rowKey(firstItem);
+          });
+        }
+      }
+    } catch (error) {
+      throw new Error('Cannot find firs item');
+    }
+  }, [dataSource, dataSource.length, rowKey, firstItem, infiniteScroll, updateFirstItem]);
+  React.useEffect(function () {
+    var _infiniteScroll$prevP;
+
+    if (listRef.current && infiniteScroll != null && (_infiniteScroll$prevP = infiniteScroll.prevPage) != null && _infiniteScroll$prevP.hasMore) {
+      listRef.current.scrollTo(INFINITE_LOADED_ITEM_HEIGHT);
+    }
+  }, [listRef, infiniteScroll == null ? void 0 : (_infiniteScroll$prevP2 = infiniteScroll.prevPage) == null ? void 0 : _infiniteScroll$prevP2.hasMore]);
   useImperativeHandle(ref, function () {
     return {
       virtualListRef: listRef,
@@ -229,12 +303,15 @@ var VirtualTable = function VirtualTable(props, ref) {
       });
     }
   }, []);
+  var offsetScroll = sticky && sticky !== true ? sticky.offsetScroll : 0;
   var renderBody = useCallback(function (rawData, meta, defaultTableProps) {
     var _expandable$expandedR;
 
     customBodyOnScrollRef.current = meta.onScroll;
 
     var renderVirtualList = function renderVirtualList(data) {
+      var _infiniteScroll$nextP, _infiniteScroll$prevP3;
+
       var listHeight = data.length * cellHeight - scroll.y + infiniteLoaderItemHeight;
       var listMaxScroll = sticky && sticky.scrollThreshold && infiniteScroll != null && infiniteScroll.maxScroll ? (infiniteScroll == null ? void 0 : infiniteScroll.maxScroll) - sticky.scrollThreshold : listHeight;
 
@@ -248,11 +325,11 @@ var VirtualTable = function VirtualTable(props, ref) {
 
         var roundedOffset = Math.ceil(scrollOffset);
 
-        if (scrollDirection === 'forward' && roundedOffset >= listMaxScroll && typeof (infiniteScroll == null ? void 0 : infiniteScroll.onScrollEndReach) === 'function') {
+        if (scrollDirection === 'forward' && roundedOffset >= listMaxScroll - LOAD_DATA_OFFSET && typeof (infiniteScroll == null ? void 0 : infiniteScroll.onScrollEndReach) === 'function') {
           infiniteScroll.onScrollEndReach();
         }
 
-        if (scrollDirection === 'backward' && roundedOffset === 0 && typeof (infiniteScroll == null ? void 0 : infiniteScroll.onScrollTopReach) === 'function') {
+        if (scrollDirection === 'backward' && (offsetScroll && roundedOffset <= offsetScroll + LOAD_DATA_OFFSET || roundedOffset < LOAD_DATA_OFFSET) && typeof (infiniteScroll == null ? void 0 : infiniteScroll.onScrollTopReach) === 'function') {
           infiniteScroll.onScrollTopReach();
         }
       };
@@ -260,6 +337,10 @@ var VirtualTable = function VirtualTable(props, ref) {
       var itemData = createItemData(data, defaultTableProps);
       var scrollableHeight = sticky ? scroll.y - HEADER_ROW_HEIGHT : scroll.y;
 
+      if (infiniteScroll != null && (_infiniteScroll$nextP = infiniteScroll.nextPage) != null && _infiniteScroll$nextP.hasMore && (_infiniteScroll$prevP3 = infiniteScroll.prevPage) != null && _infiniteScroll$prevP3.hasMore) {
+        scrollableHeight += cellHeight;
+      }
+
       var handleBodyScroll = function handleBodyScroll(event) {
         var scrollLeft = event.currentTarget.scrollLeft;
         var info = {
@@ -287,6 +368,7 @@ var VirtualTable = function VirtualTable(props, ref) {
         ref: listRef,
         key: "virtual-list",
         onScroll: handleListScroll,
+        onItemsRendered: onItemsRendered,
         className: "virtual-grid",
         height: scrollableHeight,
         layout: "vertical",
@@ -326,10 +408,15 @@ var VirtualTable = function VirtualTable(props, ref) {
     }
 
     return renderVirtualList(rawData);
-  }, [cellHeight, createItemData, expandable == null ? void 0 : expandable.expandedRowKeys, getRowKey, infiniteScroll, listInnerElementType, loading, outerElement, scroll.y, sticky, tableWidth]);
+  }, [cellHeight, createItemData, expandable == null ? void 0 : expandable.expandedRowKeys, getRowKey, infiniteScroll, listInnerElementType, loading, outerElement, scroll.y, sticky, tableWidth, offsetScroll, onItemsRendered]);
   var columnsSliceStartIndex = Number(!!selection) + Number(!!rowStar); // eslint-disable-next-line
 
   var scrollValue = !dataSource || (dataSource == null ? void 0 : dataSource.length) === 0 ? undefined : props == null ? void 0 : props.scroll;
+  var classNames = React.useMemo(function () {
+    var infiniteScrollTableClassName = infiniteScroll ? 'virtual-table-infinite-scroll' : '';
+    var stickyClassName = sticky ? 'with-sticky-header' : '';
+    return "virtual-table " + className + " " + infiniteScrollTableClassName + " " + stickyClassName;
+  }, [className, infiniteScroll, sticky]);
   var finalColumns = mergedColumns.slice(columnsSliceStartIndex);
   useEffect(function () {
     if (containerRef != null && containerRef.current) {
@@ -337,7 +424,6 @@ var VirtualTable = function VirtualTable(props, ref) {
       headerElement && setScrollWidth(headerElement.scrollWidth);
     }
   }, [finalColumns]);
-  var offsetScroll = sticky && sticky !== true ? sticky.offsetScroll : 0;
   return /*#__PURE__*/React.createElement(S.VirtualTableWrapper, {
     isSticky: Boolean(sticky),
     style: sticky ? {} : relativeInlineStyle,
@@ -352,8 +438,7 @@ var VirtualTable = function VirtualTable(props, ref) {
     sticky: dataSource.length ? sticky : undefined,
     loading: loading,
     scroll: scrollValue,
-    className: classNames(className, 'virtual-table', !!infiniteScroll && 'virtual-table-infinite-scroll', Boolean(sticky) && 'with-sticky-header') // Remove columns which cause header columns indent
-    // @ts-ignore
+    className: classNames // @ts-ignore
     ,
     columns: finalColumns,
     pagination: false,

package/dist/VirtualTable/VirtualTable.types.d.ts

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { FixedSizeList as List } from 'react-window';
+import { FixedSizeList as List, ListOnItemsRenderedProps } from 'react-window';
 import { InfiniteScrollProps } from '../InfiniteScroll/InfiniteLoaderItem.types';
 import { DSTableProps } from '../Table.types';
 export type Props<T> = DSTableProps<T> & {
@@ -15,6 +15,8 @@ export type Props<T> = DSTableProps<T> & {
     };
     onListRefChange?: (ref: RefObject<List>) => void;
     onRowClick?: (row: T) => void;
+    onItemsRendered?: (props: ListOnItemsRenderedProps) => void;
+    onScrollToRecordIndex?: (recordIndex: number, callback?: () => void) => void;
 };
 export type VirtualTableRef = {
     virtualListRef: RefObject<List>;

package/dist/VirtualTable/VirtualTableRow.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { InfiniteScrollProps } from '../InfiniteScroll/InfiniteLoaderItem.types';
 import { RowSelection, DSTableProps } from '../Table.types';
 import { RowStar } from '../hooks/useRowStar';
+export declare const INFINITE_LOADED_ITEM_HEIGHT = 64;
 export interface VirtualTableRowProps<T> {
     data: {
         dataSource: T[];

package/dist/VirtualTable/VirtualTableRow.js

@@ -11,6 +11,7 @@ import InfiniteLoaderItem from '../InfiniteScroll/InfiniteLoaderItem';
 import { EXPANDED_ROW_PROPERTY } from './constants';
 import * as S from './VirtualTable.styles';
 import { getValueFromPath, calculatePixels } from '../utils';
+export var INFINITE_LOADED_ITEM_HEIGHT = 64;
 
 var isColumnSortingActive = function isColumnSortingActive(columns, column) {
   return !!columns.find(function (c) {
@@ -23,6 +24,8 @@ var calculateToPixelsIfDefined = function calculateToPixelsIfDefined(value) {
 };
 
 function VirtualTableRow(_ref) {
+  var _infiniteScroll$prevP3;
+
   var index = _ref.index,
       style = _ref.style,
       _ref$data = _ref.data,
@@ -44,22 +47,47 @@ function VirtualTableRow(_ref) {
   var rowData = React.useMemo(function () {
     return dataSource[index];
   }, [dataSource, index]);
-  var infiniteLoader = React.useMemo(function () {
-    return infiniteScroll && index === dataSource.length - 1 && /*#__PURE__*/React.createElement(S.RowWrapper, {
+  var infiniteLoader = React.useCallback(function (position) {
+    var isVisible = false;
+    var infiniteLoaderItemProps;
+    var top = style.top;
+
+    if (position === 'TOP') {
+      var _infiniteScroll$prevP;
+
+      isVisible = Boolean(infiniteScroll && ((_infiniteScroll$prevP = infiniteScroll.prevPage) == null ? void 0 : _infiniteScroll$prevP.hasMore) && index === 0);
+      infiniteLoaderItemProps = infiniteScroll == null ? void 0 : infiniteScroll.prevPage;
+      top = "0px";
+    }
+
+    if (position === 'BOTTOM') {
+      var _infiniteScroll$prevP2;
+
+      isVisible = Boolean(index === dataSource.length - 1);
+      infiniteLoaderItemProps = infiniteScroll == null ? void 0 : infiniteScroll.nextPage;
+      var prevDataInfiniteLoaderHeight = infiniteScroll != null && (_infiniteScroll$prevP2 = infiniteScroll.prevPage) != null && _infiniteScroll$prevP2.hasMore ? INFINITE_LOADED_ITEM_HEIGHT : 0;
+      top = Number(style.top) + cellHeight + prevDataInfiniteLoaderHeight + "px";
+    }
+
+    return infiniteLoaderItemProps && isVisible && /*#__PURE__*/React.createElement(S.RowWrapper, {
       style: _objectSpread({}, style, {
-        top: Number(style.top) + cellHeight + "px",
-        height: '64px',
+        top: top,
+        height: INFINITE_LOADED_ITEM_HEIGHT + "px",
         padding: '16px 24px'
       })
     }, /*#__PURE__*/React.createElement(InfiniteLoaderItem, {
-      infiniteScroll: infiniteScroll
+      infiniteScroll: _objectSpread({}, infiniteScroll, {}, infiniteLoaderItemProps),
+      position: position
     }));
   }, [cellHeight, dataSource.length, index, infiniteScroll, style]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.RowWrapper, {
+  var top = infiniteScroll != null && (_infiniteScroll$prevP3 = infiniteScroll.prevPage) != null && _infiniteScroll$prevP3.hasMore ? Number(style.top) + INFINITE_LOADED_ITEM_HEIGHT + "px" : style.top;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, infiniteLoader('TOP'), /*#__PURE__*/React.createElement(S.RowWrapper, {
     className: classNames('virtual-table-row', {
       'ds-expanded-row': rowData[EXPANDED_ROW_PROPERTY]
     }),
-    style: style,
+    style: _objectSpread({}, style, {
+      top: top
+    }),
     onClick: function onClick(event) {
       event.stopPropagation();
       onRowClick && onRowClick(rowData);
@@ -80,7 +108,7 @@ function VirtualTableRow(_ref) {
       width: column.width,
       maxWidth: calculateToPixelsIfDefined(column == null ? void 0 : column.maxWidth)
     }, renderColumn(column, rowData, columnIndex));
-  })), infiniteLoader);
+  })), infiniteLoader('BOTTOM'));
 }
 
 export default React.memo(VirtualTableRow, areEqual);

package/dist/VirtualTable/constants.d.ts

@@ -1,2 +1,3 @@
 export declare const HEADER_ROW_HEIGHT = 64;
 export declare const EXPANDED_ROW_PROPERTY = "expandedChild";
+export declare const LOAD_DATA_OFFSET = 800;

package/dist/VirtualTable/constants.js

@@ -1,2 +1,3 @@
 export var HEADER_ROW_HEIGHT = 64;
-export var EXPANDED_ROW_PROPERTY = 'expandedChild';
+export var EXPANDED_ROW_PROPERTY = 'expandedChild';
+export var LOAD_DATA_OFFSET = 800;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-table",
-  "version": "0.48.1",
+  "version": "0.48.3",
   "description": "Table UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -33,31 +33,31 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-alert": "^0.8.8",
-    "@synerise/ds-badge": "^0.6.54",
-    "@synerise/ds-button": "^0.19.5",
-    "@synerise/ds-button-group": "^0.6.45",
-    "@synerise/ds-checkbox": "^0.11.61",
-    "@synerise/ds-column-manager": "^0.11.36",
+    "@synerise/ds-alert": "^0.8.9",
+    "@synerise/ds-badge": "^0.6.55",
+    "@synerise/ds-button": "^0.19.6",
+    "@synerise/ds-button-group": "^0.6.46",
+    "@synerise/ds-checkbox": "^0.11.62",
+    "@synerise/ds-column-manager": "^0.11.38",
     "@synerise/ds-data-format": "^0.4.8",
-    "@synerise/ds-dropdown": "^0.17.102",
+    "@synerise/ds-dropdown": "^0.17.103",
     "@synerise/ds-flag": "^0.4.3",
-    "@synerise/ds-icon": "^0.60.5",
-    "@synerise/ds-input": "^0.20.3",
-    "@synerise/ds-loader": "^0.3.3",
-    "@synerise/ds-menu": "^0.18.17",
-    "@synerise/ds-modal": "^0.17.23",
-    "@synerise/ds-pagination": "^0.7.45",
-    "@synerise/ds-result": "^0.6.49",
-    "@synerise/ds-scrollbar": "^0.10.0",
-    "@synerise/ds-search": "^0.8.84",
-    "@synerise/ds-select": "^0.15.42",
-    "@synerise/ds-skeleton": "^0.5.3",
-    "@synerise/ds-status": "^0.5.106",
-    "@synerise/ds-tags": "^0.8.36",
-    "@synerise/ds-tooltip": "^0.14.22",
+    "@synerise/ds-icon": "^0.60.6",
+    "@synerise/ds-input": "^0.20.4",
+    "@synerise/ds-loader": "^0.3.4",
+    "@synerise/ds-menu": "^0.18.18",
+    "@synerise/ds-modal": "^0.17.24",
+    "@synerise/ds-pagination": "^0.7.46",
+    "@synerise/ds-result": "^0.6.50",
+    "@synerise/ds-scrollbar": "^0.10.1",
+    "@synerise/ds-search": "^0.8.85",
+    "@synerise/ds-select": "^0.15.43",
+    "@synerise/ds-skeleton": "^0.5.4",
+    "@synerise/ds-status": "^0.5.107",
+    "@synerise/ds-tags": "^0.8.37",
+    "@synerise/ds-tooltip": "^0.14.23",
     "@synerise/ds-typography": "^0.14.3",
-    "@synerise/ds-utils": "^0.26.1",
+    "@synerise/ds-utils": "^0.26.2",
     "@types/react-window": "^1.8.5",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
@@ -79,5 +79,5 @@
   "devDependencies": {
     "@testing-library/react": "10.0.1"
   },
-  "gitHead": "07304b7bf03826701df904c7be058d93588a9611"
+  "gitHead": "7506652551b234c2e30e3bb492d56ab822bdb5a1"
 }