@synerise/ds-table 0.56.2 → 0.56.4

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.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
+
+
+
+
+
 ## [0.56.2](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.56.1...@synerise/ds-table@0.56.2) (2024-08-19)
 
 **Note:** Version bump only for package @synerise/ds-table

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> & {
@@ -45,6 +45,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.2",
+  "version": "0.56.4",
   "description": "Table UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -33,29 +33,29 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-alert": "^0.8.23",
-    "@synerise/ds-badge": "^0.8.4",
-    "@synerise/ds-button": "^0.21.5",
-    "@synerise/ds-button-group": "^0.7.9",
+    "@synerise/ds-alert": "^0.8.25",
+    "@synerise/ds-badge": "^0.8.6",
+    "@synerise/ds-button": "^0.21.7",
+    "@synerise/ds-button-group": "^0.7.11",
     "@synerise/ds-checkbox": "^0.12.4",
-    "@synerise/ds-column-manager": "^0.11.67",
+    "@synerise/ds-column-manager": "^0.11.69",
     "@synerise/ds-data-format": "^0.5.2",
-    "@synerise/ds-dropdown": "^0.18.9",
+    "@synerise/ds-dropdown": "^0.18.11",
     "@synerise/ds-flag": "^0.5.1",
-    "@synerise/ds-icon": "^0.65.0",
-    "@synerise/ds-input": "^0.23.6",
-    "@synerise/ds-loader": "^0.3.10",
-    "@synerise/ds-menu": "^0.19.9",
-    "@synerise/ds-modal": "^0.17.36",
-    "@synerise/ds-pagination": "^0.7.57",
-    "@synerise/ds-result": "^0.6.62",
-    "@synerise/ds-scrollbar": "^0.11.5",
-    "@synerise/ds-search": "^0.9.5",
-    "@synerise/ds-select": "^0.16.11",
-    "@synerise/ds-skeleton": "^0.6.4",
-    "@synerise/ds-status": "^0.6.17",
-    "@synerise/ds-tags": "^0.10.2",
-    "@synerise/ds-tooltip": "^0.14.35",
+    "@synerise/ds-icon": "^0.65.2",
+    "@synerise/ds-input": "^0.24.1",
+    "@synerise/ds-loader": "^0.3.11",
+    "@synerise/ds-menu": "^0.19.11",
+    "@synerise/ds-modal": "^0.17.38",
+    "@synerise/ds-pagination": "^0.7.59",
+    "@synerise/ds-result": "^0.7.1",
+    "@synerise/ds-scrollbar": "^0.11.7",
+    "@synerise/ds-search": "^0.9.7",
+    "@synerise/ds-select": "^0.16.13",
+    "@synerise/ds-skeleton": "^0.6.5",
+    "@synerise/ds-status": "^0.6.19",
+    "@synerise/ds-tags": "^0.10.4",
+    "@synerise/ds-tooltip": "^0.14.37",
     "@synerise/ds-typography": "^0.15.1",
     "@synerise/ds-utils": "^0.28.2",
     "@types/react-window": "^1.8.5",
@@ -77,5 +77,5 @@
     "react-dom": "^16.14.0",
     "styled-components": "5.0.1"
   },
-  "gitHead": "2e6de17b64023536c24be8fcb67b1e53e8bffa3d"
+  "gitHead": "d5df67eecdc1cbcb56def8c17d04b7d883876fbf"
 }