@synerise/ds-table 1.9.6 → 1.9.8

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.9.8](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@1.9.7...@synerise/ds-table@1.9.8) (2026-02-23)
+
+**Note:** Version bump only for package @synerise/ds-table
+
+## [1.9.7](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@1.9.6...@synerise/ds-table@1.9.7) (2026-02-19)
+
+### Bug Fixes
+
+- **table:** virtual horizontal scrollbar ([e240e20](https://github.com/synerise/synerise-design/commit/e240e20e8f05a3a488b3fdc1737a466c16838490))
+
 ## [1.9.6](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@1.9.5...@synerise/ds-table@1.9.6) (2026-02-16)
 
 **Note:** Version bump only for package @synerise/ds-table

package/dist/VirtualTable/VirtualTable.js

@@ -7,6 +7,7 @@ import ResizeObserver from 'rc-resize-observer';
 import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { FixedSizeList as List } from 'react-window';
+import Scrollbar from '@synerise/ds-scrollbar';
 import { useElementInView } from '@synerise/ds-utils';
 import BackToTopButton from '../InfiniteScroll/BackToTopButton';
 import OuterListElement from '../InfiniteScroll/OuterListElement';
@@ -531,7 +532,17 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
     key: "relative-container",
     ref: containerRef,
     isHeaderVisible: isHeaderVisible
-  }, /*#__PURE__*/React.createElement(ResizeObserver, {
+  }, isSticky && dataSource.length ? /*#__PURE__*/React.createElement(S.StickyScrollbarWrapper, {
+    isStuck: isStuck,
+    scrollOffset: offsetScroll || 0
+  }, /*#__PURE__*/React.createElement(Scrollbar, {
+    absolute: true,
+    onScroll: handleStickyScrollbarScroll,
+    ref: horizontalScrollRef
+  }, /*#__PURE__*/React.createElement(S.StickyScrollbarContent, {
+    ref: elementRef,
+    scrollWidth: scrollWidth
+  }))) : null, /*#__PURE__*/React.createElement(ResizeObserver, {
     onResize: function onResize(_ref5) {
       var offsetWidth = _ref5.offsetWidth;
       setTableWidth(offsetWidth);
@@ -549,15 +560,6 @@ var VirtualTable = function VirtualTable(props, forwardedRef) {
     locale: tableLocale
   }))), !!(infiniteScroll != null && infiniteScroll.showBackToTopButton) && /*#__PURE__*/React.createElement(BackToTopButton, {
     onClick: scrollToTop
-  }, tableLocale.infiniteScrollBackToTop), isSticky && dataSource.length ? /*#__PURE__*/React.createElement(S.StickyScrollbar, {
-    isStuck: isStuck,
-    offset: offsetScroll || 0,
-    ref: horizontalScrollRef,
-    onScroll: handleStickyScrollbarScroll,
-    absolute: true
-  }, /*#__PURE__*/React.createElement(S.StickyScrollbarContent, {
-    ref: elementRef,
-    scrollWidth: scrollWidth
-  })) : null);
+  }, tableLocale.infiniteScrollBackToTop));
 };
 export default /*#__PURE__*/forwardRef(VirtualTable);

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

@@ -15,8 +15,8 @@ export declare const VirtualListWrapper: import("styled-components").StyledCompo
     listHeight: number;
     listWidth: number;
 }, never>;
-export declare const StickyScrollbar: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<(import("@synerise/ds-scrollbar").ScrollbarProps | import("@synerise/ds-scrollbar").VirtualScrollbarProps) & import("react").RefAttributes<HTMLElement>>, any, {
-    offset: number;
+export declare const StickyScrollbarWrapper: import("styled-components").StyledComponent<"div", any, {
+    scrollOffset: number;
     isStuck: boolean;
 }, never>;
 export declare const StickyScrollbarContent: import("styled-components").StyledComponent<"div", any, {

package/dist/VirtualTable/VirtualTable.styles.js

@@ -1,5 +1,4 @@
 import styled, { css } from 'styled-components';
-import Scrollbar from '@synerise/ds-scrollbar';
 var numberToPixels = function numberToPixels(num) {
   return num + "px";
 };
@@ -28,13 +27,15 @@ export var VirtualListWrapper = styled.div.withConfig({
 })(["", " overscroll-behavior-x:contain;"], function (props) {
   return props.isSticky && css(["width:", ";overflow:overlay hidden;scrollbar-color:transparent;scrollbar-width:none;::-webkit-scrollbar-thumb{background-color:transparent;}::-webkit-scrollbar{display:none;}:after{content:'';width:10px;height:", ";display:block;}"], numberToPixels(props.listWidth), numberToPixels(props.listHeight));
 });
-export var StickyScrollbar = styled(Scrollbar).withConfig({
-  displayName: "VirtualTablestyles__StickyScrollbar",
+export var StickyScrollbarWrapper = styled.div.withConfig({
+  displayName: "VirtualTablestyles__StickyScrollbarWrapper",
   componentId: "sc-aehkhc-4"
-})(["position:sticky;bottom:0;z-index:", ";transform:translate(5px,", ");"], function (props) {
+})(["position:sticky;top:calc(100% - ", ");z-index:", ";transform:translate(5px,", ");height:10px;margin-top:-10px;"], function (props) {
+  return numberToPixels(24 + props.scrollOffset);
+}, function (props) {
   return props.isStuck ? 2 : 0;
 }, function (props) {
-  return numberToPixels(props.offset);
+  return numberToPixels(props.scrollOffset);
 });
 export var StickyScrollbarContent = styled.div.withConfig({
   displayName: "VirtualTablestyles__StickyScrollbarContent",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-table",
-  "version": "1.9.6",
+  "version": "1.9.8",
   "description": "Table UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -35,32 +35,32 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-alert": "^1.1.40",
-    "@synerise/ds-badge": "^1.0.39",
-    "@synerise/ds-button": "^1.5.13",
-    "@synerise/ds-button-group": "^1.1.38",
-    "@synerise/ds-checkbox": "^1.2.15",
-    "@synerise/ds-copy-icon": "^1.1.5",
-    "@synerise/ds-dropdown": "^1.2.5",
+    "@synerise/ds-alert": "^1.1.42",
+    "@synerise/ds-badge": "^1.0.41",
+    "@synerise/ds-button": "^1.5.15",
+    "@synerise/ds-button-group": "^1.1.40",
+    "@synerise/ds-checkbox": "^1.2.17",
+    "@synerise/ds-copy-icon": "^1.1.7",
+    "@synerise/ds-dropdown": "^1.2.7",
     "@synerise/ds-flag": "^1.0.7",
-    "@synerise/ds-icon": "^1.14.0",
-    "@synerise/ds-input": "^1.6.5",
-    "@synerise/ds-input-number": "^1.2.30",
-    "@synerise/ds-list-item": "^1.4.5",
+    "@synerise/ds-icon": "^1.14.1",
+    "@synerise/ds-input": "^1.6.7",
+    "@synerise/ds-input-number": "^1.2.32",
+    "@synerise/ds-list-item": "^1.4.7",
     "@synerise/ds-loader": "^1.0.12",
-    "@synerise/ds-menu": "^1.4.8",
-    "@synerise/ds-modal": "^1.3.6",
-    "@synerise/ds-pagination": "^1.0.48",
-    "@synerise/ds-result": "^1.0.44",
-    "@synerise/ds-scrollbar": "^1.2.13",
-    "@synerise/ds-search": "^1.5.5",
-    "@synerise/ds-select": "^1.3.15",
-    "@synerise/ds-skeleton": "^1.0.39",
-    "@synerise/ds-status": "^1.3.13",
-    "@synerise/ds-tag": "^1.4.13",
-    "@synerise/ds-tags": "^1.5.21",
-    "@synerise/ds-tooltip": "^1.4.5",
-    "@synerise/ds-typography": "^1.1.8",
+    "@synerise/ds-menu": "^1.4.10",
+    "@synerise/ds-modal": "^1.3.8",
+    "@synerise/ds-pagination": "^1.0.50",
+    "@synerise/ds-result": "^1.0.46",
+    "@synerise/ds-scrollbar": "^1.2.14",
+    "@synerise/ds-search": "^1.5.7",
+    "@synerise/ds-select": "^1.3.17",
+    "@synerise/ds-skeleton": "^1.0.41",
+    "@synerise/ds-status": "^1.3.15",
+    "@synerise/ds-tag": "^1.4.15",
+    "@synerise/ds-tags": "^1.5.23",
+    "@synerise/ds-tooltip": "^1.4.7",
+    "@synerise/ds-typography": "^1.1.10",
     "@synerise/ds-utils": "^1.6.0",
     "@types/react-window": "^1.8.8",
     "classnames": "^2.5.1",
@@ -94,5 +94,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "01a04ba9dea8bddeb2259ac8ceba5307debaa69b"
+  "gitHead": "2997f77d657c1aed2fc39901d3e0b8f88b05cc53"
 }