@synerise/ds-table 0.56.3 → 0.56.5

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.56.5](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.56.4...@synerise/ds-table@0.56.5) (2024-09-03)
+
+**Note:** Version bump only for package @synerise/ds-table
+
+
+
+
+
+## [0.56.4](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.56.3...@synerise/ds-table@0.56.4) (2024-08-30)
+
+
+### Bug Fixes
+
+* **table:** virtual table sticky header offsets ([177720d](https://github.com/synerise/synerise-design/commit/177720d7d92140f497c7c2234904dae73065348e))
+
+
+
+
+
 ## [0.56.3](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.56.2...@synerise/ds-table@0.56.3) (2024-08-27)
 
 **Note:** Version bump only for package @synerise/ds-table

package/README.md

@@ -60,6 +60,8 @@ Table UI Component
 | getPopupContainer           | the render container of dropdowns in table                                                                                                                                                                                                                                     | (triggerNode) => HTMLElement                                                                                                                                                    | `() => TableHtmlElement`                                                           |
 | renderSelectionTitle        | Function to render a custom title in table header when some items are selected                                                                                                                                                                                                 | ({selection: RowSelection, filters:Filter[] }) => React.ReactNode                                                                                                               | -                                                                                  |
 | rowStar                     | Configuration of row starring                                                                                                                                                                                                                                                  | RowStar                                                                                                                                                                         | -                                                                                  |
+| maxHeight                   | Defines the max height to which table skeleton (when loading) should be filled with rows. If undefined 10 skeleton rows will be rendered                                                                                                                                       | number                                                                                                                                                                          | -                                                                                  |
+
 
  
 ### VirtualTable

package/dist/Table.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import '@synerise/ds-core/dist/js/style';
 import './style/index.less';
 import { DSTableProps } from './Table.types';

package/dist/Table.js

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-import * as React from 'react';
+import React, { useMemo } from 'react';
 import '@synerise/ds-core/dist/js/style';
 import "./style/index.css";
 import Icon, { AngleLeftS, AngleRightS, SpinnerM } from '@synerise/ds-icon';
@@ -20,6 +20,7 @@ import DefaultTable from './DefaultTable/DefaultTable';
 import GroupTable from './GroupTable/GroupTable';
 import { useTableLocale, TableLocaleContext } from './utils/locale';
 import { getChildrenColumnName } from './utils/getChildrenColumnName';
+import { TableSkeleton } from './TableSkeleton/TableSkeleton';
 export var SELECTION_ALL = 'SELECTION_ALL';
 export var SELECTION_INVERT = 'SELECTION_INVERT';
 var ITEM_RENDER_TYPE = {
@@ -52,7 +53,8 @@ function DSTable(props) {
       renderSelectionTitle = props.renderSelectionTitle,
       hideTitlePart = props.hideTitlePart,
       disableColumnNamesLineBreak = props.disableColumnNamesLineBreak,
-      expandable = props.expandable;
+      expandable = props.expandable,
+      maxHeight = props.maxHeight;
   var tableLocale = useTableLocale(intl, locale);
 
   var _useDataFormat = useDataFormat(),
@@ -126,13 +128,27 @@ function DSTable(props) {
       }
     }, pagination);
   }, [pagination, formatValue, grouped, tableLocale, hideTitlePart]);
+  var defaultTableContent = useMemo(function () {
+    return loading && !(dataSource != null && dataSource.length) ? /*#__PURE__*/React.createElement(TableSkeleton, {
+      maxHeight: maxHeight
+    }) : /*#__PURE__*/React.createElement(DefaultTable, _extends({
+      scroll: {
+        x: 'auto'
+      },
+      tableLayout: "auto"
+    }, props, {
+      locale: tableLocale,
+      title: renderHeader,
+      pagination: dataSource != null && dataSource.length && pagination ? footerPagination : false
+    }));
+  }, [dataSource == null ? void 0 : dataSource.length, footerPagination, loading, pagination, props, renderHeader, maxHeight, tableLocale]);
   return /*#__PURE__*/React.createElement(TableLocaleContext.Provider, {
     value: tableLocale
   }, /*#__PURE__*/React.createElement(S.TableWrapper, {
     className: "ds-table ds-table-cell-size-" + cellSize + " " + (roundedHeader ? 'ds-table-rounded' : ''),
     hideColumnNames: hideColumnNames,
     disableColumnNamesLineBreak: disableColumnNamesLineBreak
-  }, loading && /*#__PURE__*/React.createElement(S.Spinner, {
+  }, !!(loading && dataSource != null && dataSource.length) && /*#__PURE__*/React.createElement(S.Spinner, {
     className: "spinner"
   }, /*#__PURE__*/React.createElement(Icon, {
     component: /*#__PURE__*/React.createElement(SpinnerM, null),
@@ -144,16 +160,7 @@ function DSTable(props) {
     locale: tableLocale,
     title: renderHeader,
     pagination: dataSource != null && dataSource.length && pagination ? footerPagination : false
-  })) : /*#__PURE__*/React.createElement(DefaultTable, _extends({
-    scroll: {
-      x: 'auto'
-    },
-    tableLayout: "auto"
-  }, props, {
-    locale: tableLocale,
-    title: renderHeader,
-    pagination: dataSource != null && dataSource.length && pagination ? footerPagination : false
-  }))));
+  })) : defaultTableContent));
 }
 
 DSTable.SELECTION_ALL = SELECTION_ALL;

package/dist/Table.types.d.ts

@@ -125,5 +125,6 @@ export type DSTableProps<T extends any & GroupType<T>> = AntTableProps<T> & {
     onSort?: OnSortFn;
     dataSourceFull?: T[];
     dataSourceTotalCount?: number;
+    maxHeight?: number;
 };
 export {};

package/dist/TableSkeleton/TableSkeleton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TableSkeletonProps } from './TableSkeleton.types';
+export declare const TableSkeleton: ({ maxHeight, ...htmlAttributes }: TableSkeletonProps) => React.JSX.Element;

package/dist/TableSkeleton/TableSkeleton.js

@@ -0,0 +1,24 @@
+var _excluded = ["maxHeight"];
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React, { useMemo } from 'react';
+import * as S from './TableSkeleton.styles';
+import { DEFAULT_ROW_COUNT, TABLE_HEADER, GAP, ROW_HEIGHT } from './constants';
+import { TableSkeletonHeader, TableSkeletonSubheader, TableSkeletonBody } from './components';
+export var TableSkeleton = function TableSkeleton(_ref) {
+  var maxHeight = _ref.maxHeight,
+      htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var rowCount = useMemo(function () {
+    if (!maxHeight) return DEFAULT_ROW_COUNT;
+    return Math.ceil((maxHeight - TABLE_HEADER - GAP) / (ROW_HEIGHT + GAP));
+  }, [maxHeight]);
+  return /*#__PURE__*/React.createElement(S.TableSkeletonWrapper, _extends({}, htmlAttributes, {
+    "data-testid": "ds-table-skeleton"
+  }), /*#__PURE__*/React.createElement(TableSkeletonHeader, null), /*#__PURE__*/React.createElement(TableSkeletonSubheader, null), /*#__PURE__*/React.createElement(TableSkeletonBody, {
+    rows: rowCount
+  }));
+};

package/dist/TableSkeleton/TableSkeleton.styles.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+export declare const TableSkeletonWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableSkeletonHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Skeleton: import("styled-components").StyledComponent<({ size, numberOfSkeletons, width, height, className }: import("@synerise/ds-skeleton").SkeletonProps) => import("react").JSX.Element, any, {}, never>;
+export declare const SkeletonWrapper: import("styled-components").StyledComponent<"div", any, {
+    width?: number | undefined;
+}, never>;
+export declare const TableSkeletonSubHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableSkeletonLeft: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableSkeletonRight: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableSkeletonBody: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableSkeletonRow: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/TableSkeleton/TableSkeleton.styles.js

@@ -0,0 +1,47 @@
+import styled, { css } from 'styled-components';
+import DSSkeleton from '@synerise/ds-skeleton';
+var rowCss = css(["display:flex;flex-direction:row;justify-content:space-between;"]);
+export var TableSkeletonWrapper = styled.div.withConfig({
+  displayName: "TableSkeletonstyles__TableSkeletonWrapper",
+  componentId: "sc-9yqnm1-0"
+})(["background:", ";z-index:10;"], function (props) {
+  return props.theme.palette.white;
+});
+export var TableSkeletonHeader = styled.div.withConfig({
+  displayName: "TableSkeletonstyles__TableSkeletonHeader",
+  componentId: "sc-9yqnm1-1"
+})(["", " padding:18px;"], rowCss);
+export var Skeleton = styled(DSSkeleton).withConfig({
+  displayName: "TableSkeletonstyles__Skeleton",
+  componentId: "sc-9yqnm1-2"
+})(["padding:12px 0;"]);
+export var SkeletonWrapper = styled.div.withConfig({
+  displayName: "TableSkeletonstyles__SkeletonWrapper",
+  componentId: "sc-9yqnm1-3"
+})(["width:", "px;"], function (props) {
+  return props.width;
+});
+export var TableSkeletonSubHeader = styled.div.withConfig({
+  displayName: "TableSkeletonstyles__TableSkeletonSubHeader",
+  componentId: "sc-9yqnm1-4"
+})(["", " border-top:solid 1px ", ";border-bottom:solid 1px ", ";padding:18px 18px 18px 84px;"], rowCss, function (props) {
+  return props.theme.palette['grey-200'];
+}, function (props) {
+  return props.theme.palette['grey-200'];
+});
+export var TableSkeletonLeft = styled.div.withConfig({
+  displayName: "TableSkeletonstyles__TableSkeletonLeft",
+  componentId: "sc-9yqnm1-5"
+})(["display:flex;flex-direction:row;gap:50px;"]);
+export var TableSkeletonRight = styled.div.withConfig({
+  displayName: "TableSkeletonstyles__TableSkeletonRight",
+  componentId: "sc-9yqnm1-6"
+})(["display:flex;flex-direction:row;gap:50px;"]);
+export var TableSkeletonBody = styled.div.withConfig({
+  displayName: "TableSkeletonstyles__TableSkeletonBody",
+  componentId: "sc-9yqnm1-7"
+})(["display:flex;flex-direction:column;gap:36px;padding:18px;"]);
+export var TableSkeletonRow = styled.div.withConfig({
+  displayName: "TableSkeletonstyles__TableSkeletonRow",
+  componentId: "sc-9yqnm1-8"
+})(["", ""], rowCss);

package/dist/TableSkeleton/TableSkeleton.types.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from 'react';
+export type TableSkeletonProps = HTMLAttributes<HTMLDivElement> & {
+    maxHeight?: number;
+};

package/dist/TableSkeleton/TableSkeleton.types.js

@@ -0,0 +1 @@
+export {};

package/dist/TableSkeleton/components/TableSkeletonBar.d.ts

@@ -0,0 +1,6 @@
+import React, { HTMLAttributes } from 'react';
+type TableSkeletonBarProps = HTMLAttributes<HTMLDivElement> & {
+    width: number;
+};
+export declare const TableSkeletonBar: ({ width, ...htmlAttributes }: TableSkeletonBarProps) => React.JSX.Element;
+export {};

package/dist/TableSkeleton/components/TableSkeletonBar.js

@@ -0,0 +1,19 @@
+var _excluded = ["width"];
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+import * as S from '../TableSkeleton.styles';
+export var TableSkeletonBar = function TableSkeletonBar(_ref) {
+  var width = _ref.width,
+      htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(S.SkeletonWrapper, _extends({}, htmlAttributes, {
+    width: width
+  }), /*#__PURE__*/React.createElement(S.Skeleton, {
+    size: "M",
+    numberOfSkeletons: 1
+  }));
+};

package/dist/TableSkeleton/components/TableSkeletonBody.d.ts

@@ -0,0 +1,6 @@
+import React, { HTMLAttributes } from 'react';
+type TableSkeletonBodyProps = HTMLAttributes<HTMLDivElement> & {
+    rows: number;
+};
+export declare const TableSkeletonBody: ({ rows, ...htmlAttributes }: TableSkeletonBodyProps) => React.JSX.Element;
+export {};

package/dist/TableSkeleton/components/TableSkeletonBody.js

@@ -0,0 +1,31 @@
+var _excluded = ["rows"];
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+import React from 'react';
+import { SkeletonAvatar } from '@synerise/ds-skeleton';
+import * as S from '../TableSkeleton.styles';
+import { TableSkeletonBar } from './TableSkeletonBar';
+import { TableSkeletonRowRight } from './TableSkeletonRowRight';
+import { SKELETON_BAR_TINY, SKELETON_BAR_WIDE } from '../constants';
+export var TableSkeletonBody = function TableSkeletonBody(_ref) {
+  var _ref$rows = _ref.rows,
+      rows = _ref$rows === void 0 ? 10 : _ref$rows,
+      htmlAttributes = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(S.TableSkeletonBody, htmlAttributes, Array.from({
+    length: rows
+  }, function (_, index) {
+    return /*#__PURE__*/React.createElement(S.TableSkeletonRow, {
+      "data-testid": "ds-table-skeleton-row",
+      key: "ds-skeleton-row-" + index
+    }, /*#__PURE__*/React.createElement(S.TableSkeletonLeft, null, /*#__PURE__*/React.createElement(TableSkeletonBar, {
+      width: SKELETON_BAR_TINY
+    }), /*#__PURE__*/React.createElement(SkeletonAvatar, {
+      shape: "circle",
+      size: "M"
+    }), /*#__PURE__*/React.createElement(TableSkeletonBar, {
+      width: SKELETON_BAR_WIDE
+    })), /*#__PURE__*/React.createElement(S.TableSkeletonRight, null, /*#__PURE__*/React.createElement(TableSkeletonRowRight, null)));
+  }));
+};

package/dist/TableSkeleton/components/TableSkeletonHeader.d.ts

@@ -0,0 +1,2 @@
+import React, { HTMLAttributes } from 'react';
+export declare const TableSkeletonHeader: (props: HTMLAttributes<HTMLDivElement>) => React.JSX.Element;

package/dist/TableSkeleton/components/TableSkeletonHeader.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { SKELETON_BAR_STANDARD } from '../constants';
+import * as S from '../TableSkeleton.styles';
+import { TableSkeletonBar } from './TableSkeletonBar';
+export var TableSkeletonHeader = function TableSkeletonHeader(props) {
+  return /*#__PURE__*/React.createElement(S.TableSkeletonHeader, props, /*#__PURE__*/React.createElement(S.TableSkeletonLeft, null, /*#__PURE__*/React.createElement(TableSkeletonBar, {
+    width: SKELETON_BAR_STANDARD
+  })), /*#__PURE__*/React.createElement(S.TableSkeletonRight, null, /*#__PURE__*/React.createElement(TableSkeletonBar, {
+    width: SKELETON_BAR_STANDARD
+  }), /*#__PURE__*/React.createElement(TableSkeletonBar, {
+    width: SKELETON_BAR_STANDARD
+  }), /*#__PURE__*/React.createElement(TableSkeletonBar, {
+    width: SKELETON_BAR_STANDARD
+  })));
+};

package/dist/TableSkeleton/components/TableSkeletonRowRight.d.ts

@@ -0,0 +1,2 @@
+import React, { HTMLAttributes } from 'react';
+export declare const TableSkeletonRowRight: (props: HTMLAttributes<HTMLDivElement>) => React.JSX.Element;

package/dist/TableSkeleton/components/TableSkeletonRowRight.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import * as S from '../TableSkeleton.styles';
+import { TableSkeletonBar } from './TableSkeletonBar';
+import { SKELETON_BAR_STANDARD, SKELETON_BAR_EXTRA_WIDE } from '../constants';
+export var TableSkeletonRowRight = function TableSkeletonRowRight(props) {
+  return /*#__PURE__*/React.createElement(S.TableSkeletonRight, props, /*#__PURE__*/React.createElement(TableSkeletonBar, {
+    width: SKELETON_BAR_STANDARD
+  }), /*#__PURE__*/React.createElement(TableSkeletonBar, {
+    width: SKELETON_BAR_EXTRA_WIDE
+  }), /*#__PURE__*/React.createElement(TableSkeletonBar, {
+    width: SKELETON_BAR_STANDARD
+  }));
+};

package/dist/TableSkeleton/components/TableSkeletonSubheader.d.ts

@@ -0,0 +1,2 @@
+import React, { HTMLAttributes } from 'react';
+export declare const TableSkeletonSubheader: (props: HTMLAttributes<HTMLDivElement>) => React.JSX.Element;

package/dist/TableSkeleton/components/TableSkeletonSubheader.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import * as S from '../TableSkeleton.styles';
+import { TableSkeletonBar } from './TableSkeletonBar';
+import { TableSkeletonRowRight } from './TableSkeletonRowRight';
+import { SKELETON_BAR_WIDE } from '../constants';
+export var TableSkeletonSubheader = function TableSkeletonSubheader(props) {
+  return /*#__PURE__*/React.createElement(S.TableSkeletonSubHeader, props, /*#__PURE__*/React.createElement(S.TableSkeletonLeft, null, /*#__PURE__*/React.createElement(TableSkeletonBar, {
+    width: SKELETON_BAR_WIDE
+  })), /*#__PURE__*/React.createElement(S.TableSkeletonRight, null, /*#__PURE__*/React.createElement(TableSkeletonRowRight, null)));
+};

package/dist/TableSkeleton/components/index.d.ts

@@ -0,0 +1,5 @@
+export * from './TableSkeletonBar';
+export * from './TableSkeletonBody';
+export * from './TableSkeletonHeader';
+export * from './TableSkeletonRowRight';
+export * from './TableSkeletonSubheader';

package/dist/TableSkeleton/components/index.js

@@ -0,0 +1,5 @@
+export * from './TableSkeletonBar';
+export * from './TableSkeletonBody';
+export * from './TableSkeletonHeader';
+export * from './TableSkeletonRowRight';
+export * from './TableSkeletonSubheader';

package/dist/TableSkeleton/constants.d.ts

@@ -0,0 +1,8 @@
+export declare const DEFAULT_ROW_COUNT = 10;
+export declare const ROW_HEIGHT = 40;
+export declare const GAP = 36;
+export declare const TABLE_HEADER: number;
+export declare const SKELETON_BAR_TINY = 16;
+export declare const SKELETON_BAR_STANDARD = 72;
+export declare const SKELETON_BAR_WIDE = 100;
+export declare const SKELETON_BAR_EXTRA_WIDE = 164;

package/dist/TableSkeleton/constants.js

@@ -0,0 +1,8 @@
+export var DEFAULT_ROW_COUNT = 10;
+export var ROW_HEIGHT = 40;
+export var GAP = 36;
+export var TABLE_HEADER = 76 + 78;
+export var SKELETON_BAR_TINY = 16;
+export var SKELETON_BAR_STANDARD = 72;
+export var SKELETON_BAR_WIDE = 100;
+export var SKELETON_BAR_EXTRA_WIDE = 164;

package/dist/VirtualTable/VirtualTable.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import type { Ref, ReactElement } from 'react';
 import { FixedSizeList as List } from 'react-window';
 import type { RowType, DSTableProps, RowSelection, CustomizeScrollBodyInfo, DSColumnType } from '../Table.types';
-import type { Props, VirtualTableRef } from './VirtualTable.types';
+import type { VirtualTableRef, VirtualTableProps } from './VirtualTable.types';
 declare const _default: <T extends object & RowType<T> & {
     expandedChild?: boolean | undefined;
 }>(p: import("../Table.types").AntTableProps<T> & {
@@ -35,6 +35,7 @@ declare const _default: <T extends object & RowType<T> & {
     onSort?: import("../Table.types").OnSortFn | undefined;
     dataSourceFull?: T[] | undefined;
     dataSourceTotalCount?: number | undefined;
+    maxHeight?: number | undefined;
 } & {
     cellHeight: number;
     infiniteScroll?: import("../InfiniteScroll/InfiniteLoaderItem.types").InfiniteScrollProps | undefined;
@@ -45,6 +46,7 @@ declare const _default: <T extends object & RowType<T> & {
     };
     sticky?: ((boolean | import("rc-table/lib/interface").TableSticky | undefined) & {
         scrollThreshold?: number | undefined;
+        offsetHeader?: number | undefined;
         getContainer: () => HTMLDivElement;
     }) | undefined;
     onListRefChange?: ((ref: React.RefObject<List<any>>) => void) | undefined;

package/dist/VirtualTable/VirtualTable.js

@@ -170,6 +170,10 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
       scrollWidth = _useState4[0],
       setScrollWidth = _useState4[1];
 
+  var _useState5 = useState(0),
+      titleBarHeight = _useState5[0],
+      setTitleBarHeight = _useState5[1];
+
   var _useRowStar = useRowStar((rowStar == null ? void 0 : rowStar.starredRowKeys) || []),
       getRowStarColumn = _useRowStar.getRowStarColumn; // deprecated, verify if not used and remove
 
@@ -376,6 +380,7 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
     };
   }, [mergedColumns, selection, rowStar, onRowClick, infiniteScroll, cellHeight]);
   var offsetScroll = sticky && sticky !== true ? sticky.offsetScroll : 0;
+  var offsetStickyHeader = sticky && sticky !== true ? sticky.offsetHeader : 0;
   var connectObject = useMemo(function () {
     var obj = {};
     Object.defineProperty(obj, 'scrollLeft', {
@@ -558,7 +563,9 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
   useEffect(function () {
     if (containerRef != null && containerRef.current) {
       var headerElement = containerRef.current.querySelector('.ant-table-header');
+      var titleElement = containerRef.current.querySelector('.ant-table-title');
       headerElement && setScrollWidth(headerElement.scrollWidth);
+      titleElement && setTitleBarHeight(titleElement.clientHeight);
     }
   }, [tableWidth, mergedColumns.length, dataSource.length]);
 
@@ -571,6 +578,8 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
 
   return /*#__PURE__*/React.createElement(S.VirtualTableWrapper, {
     isSticky: isSticky,
+    titleBarTop: offsetStickyHeader || 0,
+    titleBarHeight: titleBarHeight,
     style: isSticky ? {} : relativeInlineStyle,
     key: "relative-container",
     ref: containerRef,

package/dist/VirtualTable/VirtualTable.styles.d.ts

@@ -24,6 +24,8 @@ export declare const StickyScrollbarContent: import("styled-components").StyledC
 export declare const ColWrapper: import("styled-components").StyledComponent<"div", any, ColWrapperProps, never>;
 export declare const VirtualTableWrapper: import("styled-components").StyledComponent<"div", any, {
     isSticky: boolean;
+    titleBarHeight: number;
+    titleBarTop: number;
     isHeaderVisible?: boolean | undefined;
 }, never>;
 export {};

package/dist/VirtualTable/VirtualTable.styles.js

@@ -58,5 +58,5 @@ export var VirtualTableWrapper = styled.div.withConfig({
   displayName: "VirtualTablestyles__VirtualTableWrapper",
   componentId: "aehkhc-7"
 })(["", ""], function (props) {
-  return props.isSticky ? css([".ant-table-title{position:sticky;top:-96px;z-index:99;}.ant-table-title,.ant-table-sticky-header{transition:top 0.3s ease-in-out;}", ";"], props.isHeaderVisible && css([".ant-table-title{top:-24px;}.ant-table-sticky-header{top:48px !important;}"])) : css(["position:relative;"]);
+  return props.isSticky ? css([".ant-table-title{position:sticky;top:", "px;z-index:99;}.ant-table-title,.ant-table-sticky-header{transition:top 0.3s ease-in-out;}", ";"], props.titleBarTop - props.titleBarHeight, props.isHeaderVisible && css([".ant-table-title{top:", "px;}.ant-table-sticky-header{top:", "px !important;}"], props.titleBarTop, props.titleBarTop + props.titleBarHeight)) : css(["position:relative;"]);
 });

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

@@ -10,7 +10,7 @@ export type VirtualColumnType<T> = DSColumnType<T> & {
     left?: number;
     right?: number;
 };
-export type Props<T> = DSTableProps<T> & {
+export type VirtualTableProps<T> = DSTableProps<T> & {
     cellHeight: number;
     infiniteScroll?: InfiniteScrollProps;
     initialWidth: number;
@@ -20,6 +20,7 @@ export type Props<T> = DSTableProps<T> & {
     };
     sticky?: DSTableProps<T>['sticky'] & {
         scrollThreshold?: number;
+        offsetHeader?: number;
         getContainer: () => HTMLDivElement;
     };
     onListRefChange?: (ref: RefObject<List>) => void;
@@ -34,3 +35,4 @@ export type VirtualTableRef = {
     scrollToTop: () => void;
     scrollTo: (top: number) => void;
 };
+export type Props<T> = VirtualTableProps<T>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-table",
-  "version": "0.56.3",
+  "version": "0.56.5",
   "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.24",
-    "@synerise/ds-badge": "^0.8.5",
-    "@synerise/ds-button": "^0.21.6",
-    "@synerise/ds-button-group": "^0.7.10",
-    "@synerise/ds-checkbox": "^0.12.4",
-    "@synerise/ds-column-manager": "^0.11.68",
+    "@synerise/ds-alert": "^0.8.26",
+    "@synerise/ds-badge": "^0.8.7",
+    "@synerise/ds-button": "^0.21.8",
+    "@synerise/ds-button-group": "^0.7.12",
+    "@synerise/ds-checkbox": "^0.12.5",
+    "@synerise/ds-column-manager": "^0.11.70",
     "@synerise/ds-data-format": "^0.5.2",
-    "@synerise/ds-dropdown": "^0.18.10",
+    "@synerise/ds-dropdown": "^0.18.12",
     "@synerise/ds-flag": "^0.5.1",
-    "@synerise/ds-icon": "^0.65.1",
-    "@synerise/ds-input": "^0.24.0",
-    "@synerise/ds-loader": "^0.3.11",
-    "@synerise/ds-menu": "^0.19.10",
-    "@synerise/ds-modal": "^0.17.37",
-    "@synerise/ds-pagination": "^0.7.58",
-    "@synerise/ds-result": "^0.7.0",
-    "@synerise/ds-scrollbar": "^0.11.6",
-    "@synerise/ds-search": "^0.9.6",
-    "@synerise/ds-select": "^0.16.12",
-    "@synerise/ds-skeleton": "^0.6.5",
-    "@synerise/ds-status": "^0.6.18",
-    "@synerise/ds-tags": "^0.10.3",
-    "@synerise/ds-tooltip": "^0.14.36",
+    "@synerise/ds-icon": "^0.65.3",
+    "@synerise/ds-input": "^0.24.2",
+    "@synerise/ds-loader": "^0.3.12",
+    "@synerise/ds-menu": "^0.19.12",
+    "@synerise/ds-modal": "^0.17.39",
+    "@synerise/ds-pagination": "^0.7.60",
+    "@synerise/ds-result": "^0.7.2",
+    "@synerise/ds-scrollbar": "^0.11.8",
+    "@synerise/ds-search": "^0.9.8",
+    "@synerise/ds-select": "^0.16.14",
+    "@synerise/ds-skeleton": "^0.6.6",
+    "@synerise/ds-status": "^0.6.20",
+    "@synerise/ds-tags": "^0.10.5",
+    "@synerise/ds-tooltip": "^0.14.38",
     "@synerise/ds-typography": "^0.15.1",
-    "@synerise/ds-utils": "^0.28.2",
+    "@synerise/ds-utils": "^0.29.0",
     "@types/react-window": "^1.8.5",
     "classnames": "2.3.2",
     "copy-to-clipboard": "^3.3.1",
@@ -77,5 +77,5 @@
     "react-dom": "^16.14.0",
     "styled-components": "5.0.1"
   },
-  "gitHead": "a035aeea499cea00e72e20e3790c0ffcad4fe956"
+  "gitHead": "6fe94d574f25c5267c7593dec9399527f441b23a"
 }