@synerise/ds-table-new 1.0.5 → 1.0.6

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.6](https://github.com/Synerise/synerise-design/compare/@synerise/ds-table-new@1.0.5...@synerise/ds-table-new@1.0.6) (2026-04-24)
+
+### Bug Fixes
+
+- **table-new:** fixes lack of text overflow on cell wrapper child dom node ([81abddf](https://github.com/Synerise/synerise-design/commit/81abddfdc4355b588e9f5345e66cf663102460f3))
+- **table-new:** render skeleton when columns race behind data ([6fbde3c](https://github.com/Synerise/synerise-design/commit/6fbde3c4450aa79e1249c25b5f1de00648304edc))
+- **table-new:** support pinned columns when stickyHeader is off ([1d027dd](https://github.com/Synerise/synerise-design/commit/1d027dd6c2177b75ce5739bf9df04bf25583e82c))
+
 ## [1.0.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-table-new@1.0.4...@synerise/ds-table-new@1.0.5) (2026-04-22)
 
 **Note:** Version bump only for package @synerise/ds-table-new

package/dist/Table.js

@@ -33,7 +33,9 @@ const Table = ({
     return columns.length ? processColumns(columns, hasSelection, texts) : columns;
   }, [columns, hasSelection, texts]);
   const skeletonColumns = useMemo(() => getDefaultSkeletonColumns(), []);
-  const finalColumns = !processedColumns.length && isLoading ? skeletonColumns : processedColumns;
+  const useSkeletonColumns = !processedColumns.length && (isLoading || data.length > 0);
+  const finalColumns = useSkeletonColumns ? skeletonColumns : processedColumns;
+  const effectiveIsLoading = isLoading || useSkeletonColumns;
   const {
     table,
     paginationProps,
@@ -70,7 +72,7 @@ const Table = ({
     table,
     getScrollContainer: () => null
   }), [table]);
-  return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(SelectionContext.Provider, { value: selectionConfig, children: /* @__PURE__ */ jsx(BaseTable, { texts, isLoading, hasPagination, paginationProps, tableOuterRef: wrapperRef, selectedRowKeys, columnSizing, isColumnSizingReady, searchQuery, setSearchQuery, handleSearchClear, hasBuiltInSearch, searchProps, dataSourceTotalCount: totalDataCount, ...props }) }) });
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(SelectionContext.Provider, { value: selectionConfig, children: /* @__PURE__ */ jsx(BaseTable, { texts, isLoading: effectiveIsLoading, hasPagination, paginationProps, tableOuterRef: wrapperRef, selectedRowKeys, columnSizing, isColumnSizingReady, searchQuery, setSearchQuery, handleSearchClear, hasBuiltInSearch, searchProps, dataSourceTotalCount: totalDataCount, ...props }) }) });
 };
 export {
   Table

package/dist/Table.types.d.ts

@@ -444,11 +444,8 @@ export type CustomCounterArgs = {
 export type CustomCounterFn = (props: CustomCounterArgs) => ReactNode;
 export type TableBodyProps<TData, TValue> = Pick<BaseTableProps<TData, TValue>, 'infiniteScroll' | 'cellHeight' | 'emptyDataComponent' | 'onRowClick' | 'getRowProps' | 'getRowTooltipProps'> & {
     texts: TableBodyTexts;
-    withBodyScroll?: boolean;
-    tableBodyScrollRef?: React.MutableRefObject<HTMLElement | null>;
-    maxHeight?: number;
 };
-export type TableEmptyBodyProps<TData, TValue> = Pick<TableBodyProps<TData, TValue>, 'emptyDataComponent' | 'tableBodyScrollRef'> & {
+export type TableEmptyBodyProps<TData, TValue> = Pick<TableBodyProps<TData, TValue>, 'emptyDataComponent'> & {
     texts: TableEmptyBodyTexts;
 };
 export type TableCounterProps<TData, TValue> = Pick<BaseTableProps<TData, TValue>, 'renderCustomCounter' | 'isCounterLoading'> & {

package/dist/VirtualTable.js

@@ -54,7 +54,9 @@ const VirtualTable = ({
     return columns.length ? processColumns(columns, hasSelection, texts) : columns;
   }, [columns, hasSelection, texts]);
   const skeletonColumns = useMemo(() => getDefaultSkeletonColumns(), []);
-  const finalColumns = !processedColumns.length && isLoading ? skeletonColumns : processedColumns;
+  const useSkeletonColumns = !processedColumns.length && (isLoading || data.length > 0);
+  const finalColumns = useSkeletonColumns ? skeletonColumns : processedColumns;
+  const effectiveIsLoading = isLoading || useSkeletonColumns;
   const {
     table,
     columnSizing,
@@ -243,7 +245,7 @@ const VirtualTable = ({
     rowVirtualizer.scrollToOffset(0);
   }, [onBackToTop, rowVirtualizer]);
   return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(StickyContext.Provider, { value: stickyValue, children: /* @__PURE__ */ jsxs(SelectionContext.Provider, { value: selectionConfig, children: [
-    /* @__PURE__ */ jsx(BaseTable, { columnSizing, isColumnSizingReady, texts, tableOuterRef, tableBodyScrollRef, withScroll: withContainerScroll, withBodyScroll, maxHeight, hasPagination: false, infiniteScroll, isLoading, searchQuery, setSearchQuery, handleSearchClear, hasBuiltInSearch, searchProps, dataSourceTotalCount: totalDataCount, cellHeight, ...props }),
+    /* @__PURE__ */ jsx(BaseTable, { columnSizing, isColumnSizingReady, texts, tableOuterRef, tableBodyScrollRef, withScroll: withContainerScroll, withBodyScroll, maxHeight, hasPagination: false, infiniteScroll, isLoading: effectiveIsLoading, searchQuery, setSearchQuery, handleSearchClear, hasBuiltInSearch, searchProps, dataSourceTotalCount: totalDataCount, cellHeight, ...props }),
     showBackToTopButton && /* @__PURE__ */ jsx(BackToTopButton, { label: texts.infiniteScrollBackToTop, onClick: handleBackToTop, scrollContainerRef: scrollableContainerRef, hasData: !tableIsEmpty && columns.length > 0, threshold: (stickyData.titleBarHeight || 0) + (Number.isFinite(stickyData.containerPaddingTop) ? stickyData.containerPaddingTop : 0) })
   ] }) }) });
 };

package/dist/components/BaseTable/BaseTable.js

@@ -11,7 +11,7 @@ import { TableHeader } from "../TableHeader/TableHeader.js";
 import { TableHorizontalScroll } from "../TableHorizontalScroll/TableHorizontalScroll.js";
 import { TableHorizontalScrollBar } from "../TableHorizontalScrollBar/TableHorizontalScrollBar.js";
 import { TablePagination } from "../TablePagination/TablePagination.js";
-import { StyledTable, BaseTableWrapper, TableContainer, TableColumnsHorizontalScroll, TableBodyScrollWrapper } from "./BaseTable.styles.js";
+import { StyledTable, BaseTableWrapper, TableContainer, TableBodyScrollWrapper, TableColumnsHorizontalScroll } from "./BaseTable.styles.js";
 const BaseTable = ({
   infiniteScroll,
   cellHeight = DEFAULT_CELL_HEIGHT,
@@ -101,12 +101,12 @@ const BaseTable = ({
     addNode(element);
   }, children: /* @__PURE__ */ jsxs(StyledTable, { role: "table", children: [
     !hideColumnNames && (!isEmpty || isLoading) && /* @__PURE__ */ jsx(TableColumns, { texts, disableColumnNamesLineBreak }),
-    isLoading ? /* @__PURE__ */ jsx(TableBodySkeleton, { wrapperRef: tableBodyWrapperRef, cellHeight }, "table-body-skeleton") : /* @__PURE__ */ jsx(TableBody, { withBodyScroll, tableBodyScrollRef, maxHeight, cellHeight, infiniteScroll, emptyDataComponent, texts, onRowClick, getRowProps, getRowTooltipProps }, "table-body")
+    isLoading ? /* @__PURE__ */ jsx(TableBodySkeleton, { wrapperRef: tableBodyWrapperRef, cellHeight }, "table-body-skeleton") : /* @__PURE__ */ jsx(TableBody, { cellHeight, infiniteScroll, emptyDataComponent, texts, onRowClick, getRowProps, getRowTooltipProps }, "table-body")
   ] }) });
   return /* @__PURE__ */ jsxs(BaseTableWrapper, { isEmpty, columnSizing, $isColumnSizingReady: isColumnSizingReady, $size: size, children: [
     /* @__PURE__ */ jsxs(TableContainer, { ref: tableOuterRef, className, withBorderTop: headerWithBorderTop, cardStyles, withScroll, $maxHeight: maxHeight, "data-testid": "ds-table-container", children: [
       !hideTitleBar && /* @__PURE__ */ jsx(TableHeader, { itemsMenu, texts, childrenColumnName: expandable?.childrenColumnName, isCounterLoading, isLoading, rowKey, title, hideTitlePart, renderCustomCounter, renderSelectionTitle, searchComponent, filterComponent, headerButton, dataSourceTotalCount, searchQuery, setSearchQuery, handleSearchClear, hasBuiltInSearch, searchProps }),
-      useUnifiedScroll ? unifiedTableContent : /* @__PURE__ */ jsxs(Fragment, { children: [
+      useUnifiedScroll ? withBodyScroll ? /* @__PURE__ */ jsx(TableBodyScrollWrapper, { ref: tableBodyScrollRef, $maxHeight: maxHeight, children: unifiedTableContent }) : unifiedTableContent : /* @__PURE__ */ jsxs(Fragment, { children: [
         !hideColumnNames && (!isEmpty || isLoading) && /* @__PURE__ */ jsx(TableColumnsHorizontalScroll, { stickyRight: table.getRightTotalSize(), stickyLeft: table.getLeftTotalSize(), stickyData: stickyContext?.stickyData, isScrolled: rowVirtualizer?.scrollOffset, ref: handleRef, children: /* @__PURE__ */ jsx(StyledTable, { role: "table", children: /* @__PURE__ */ jsx(TableColumns, { texts, disableColumnNamesLineBreak }) }) }),
         withBodyScroll ? /* @__PURE__ */ jsx(TableBodyScrollWrapper, { ref: tableBodyScrollRef, $maxHeight: maxHeight, children: tableBodyContent }) : tableBodyContent
       ] }),

package/dist/components/TableBody/TableBody.d.ts

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
 import { TableBodyProps } from '../../Table.types';
-export declare const TableBody: <TData extends object, TValue>({ cellHeight, infiniteScroll, onRowClick, getRowProps, getRowTooltipProps, withBodyScroll, tableBodyScrollRef, maxHeight, emptyDataComponent, texts, }: TableBodyProps<TData, TValue>) => React.JSX.Element;
+export declare const TableBody: <TData extends object, TValue>({ cellHeight, infiniteScroll, onRowClick, getRowProps, getRowTooltipProps, emptyDataComponent, texts, }: TableBodyProps<TData, TValue>) => React.JSX.Element;

package/dist/components/TableBody/TableBody.js

@@ -11,9 +11,6 @@ const TableBody = ({
   onRowClick,
   getRowProps,
   getRowTooltipProps,
-  withBodyScroll,
-  tableBodyScrollRef,
-  maxHeight,
   emptyDataComponent,
   texts
 }) => {
@@ -39,11 +36,7 @@ const TableBody = ({
     return true;
   }) : flatRows;
   const allRows = rowVirtualizer ? flatRows : nonVirtualRows;
-  return allRows.length ? /* @__PURE__ */ jsx(TBody, { "data-testid": "ds-table-body", ref: (node) => {
-    if (tableBodyScrollRef) {
-      tableBodyScrollRef.current = node;
-    }
-  }, $maxHeight: maxHeight, withBodyScroll, role: "rowgroup", "data-popup-container": true, style: rowVirtualizer && virtualItems.length ? {
+  return allRows.length ? /* @__PURE__ */ jsx(TBody, { "data-testid": "ds-table-body", role: "rowgroup", "data-popup-container": true, style: rowVirtualizer && virtualItems.length ? {
     height: `${rowVirtualizer.getTotalSize()}px`,
     position: "relative"
   } : void 0, children: rowVirtualizer && virtualItems.length ? (
@@ -55,7 +48,7 @@ const TableBody = ({
   ) : (
     // Non-virtualized: render all rows in the normal flow
     allRows.map((row) => /* @__PURE__ */ jsx(TableRow, { onRowClick, getRowProps, getRowTooltipProps, row, isSelected: row.getIsSelected(), isExpanded: row.getIsExpanded(), isParentExpanded: row.getIsAllParentsExpanded() }, row.id))
-  ) }, "virtual-table-body") : /* @__PURE__ */ jsx(TableEmptyBody, { emptyDataComponent, texts, tableBodyScrollRef });
+  ) }, "virtual-table-body") : /* @__PURE__ */ jsx(TableEmptyBody, { emptyDataComponent, texts });
 };
 export {
   TableBody

package/dist/components/TableBody/TableBody.styles.d.ts

@@ -1,5 +1,2 @@
 export declare const Tr: import('styled-components').StyledComponent<"tr", any, {}, never>;
-export declare const TBody: import('styled-components').StyledComponent<"tbody", any, {
-    $maxHeight?: number;
-    withBodyScroll?: boolean;
-}, never>;
+export declare const TBody: import('styled-components').StyledComponent<"tbody", any, {}, never>;

package/dist/components/TableBody/TableBody.styles.js

@@ -1,4 +1,4 @@
-import styled, { css } from "styled-components";
+import styled from "styled-components";
 import { commonRowStyles } from "../../Table.styles.js";
 import { Td } from "./TableCell/TableCell.styles.js";
 const Tr = /* @__PURE__ */ styled.tr.withConfig({
@@ -8,7 +8,7 @@ const Tr = /* @__PURE__ */ styled.tr.withConfig({
 const TBody = /* @__PURE__ */ styled.tbody.withConfig({
   displayName: "TableBodystyles__TBody",
   componentId: "sc-1dty8xx-1"
-})(["position:relative;", ""], (props) => props.withBodyScroll && css(["display:block;max-height:", "px;overflow-y:scroll;"], props.$maxHeight ?? 800));
+})(["position:relative;"]);
 export {
   TBody,
   Tr

package/dist/components/TableBody/TableCell/TableCell.styles.js

@@ -12,7 +12,7 @@ const CellWrapper = /* @__PURE__ */ styled.div.withConfig({
 const Td = /* @__PURE__ */ styled.td.withConfig({
   displayName: "TableCellstyles__Td",
   componentId: "sc-1sq3dd7-1"
-})(["", " ", " text-align:", ";&&&&{", ";}", ";", ";", "{display:flex;align-items:center;justify-content:", ";width:100%;}"], commonCellStyles, commonPinnedStyles, (props) => props.$align ?? "left", (props) => props.isSorted && `background-color: ${props.theme.palette["blue-050"]}`, (props) => props.headerIndex !== void 0 ? `width: var(--col-${props.headerIndex}-width)` : props.$width && `width: ${props.$width}px`, (props) => props.$height ? `
+})(["", " ", " text-align:", ";&&&&{", ";}", ";", ";", "{display:flex;align-items:center;justify-content:", ";width:100%;& > *{min-width:0;}}"], commonCellStyles, commonPinnedStyles, (props) => props.$align ?? "left", (props) => props.isSorted && `background-color: ${props.theme.palette["blue-050"]}`, (props) => props.headerIndex !== void 0 ? `width: var(--col-${props.headerIndex}-width)` : props.$width && `width: ${props.$width}px`, (props) => props.$height ? `
     padding: 0 24px;
     height: ${props.$height}px` : `
     padding: 16px 24px;

package/dist/components/TableBody/TableEmptyBody/TableEmptyBody.d.ts

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
 import { TableEmptyBodyProps } from '../../../Table.types';
-export declare const TableEmptyBody: <TData, TValue>({ emptyDataComponent, texts, tableBodyScrollRef, }: TableEmptyBodyProps<TData, TValue>) => React.JSX.Element;
+export declare const TableEmptyBody: <TData, TValue>({ emptyDataComponent, texts, }: TableEmptyBodyProps<TData, TValue>) => React.JSX.Element;

package/dist/components/TableBody/TableEmptyBody/TableEmptyBody.js

@@ -5,18 +5,13 @@ import { useTableContext } from "../../../contexts/TableContext.js";
 import { TBody, Tr, Td, TableEmptyBodyWrapper } from "./TableEmptyBody.styles.js";
 const TableEmptyBody = ({
   emptyDataComponent,
-  texts,
-  tableBodyScrollRef
+  texts
 }) => {
   const {
     table
   } = useTableContext();
   const colSpan = table.getAllLeafColumns().length;
-  return /* @__PURE__ */ jsx(TBody, { ref: (node) => {
-    if (tableBodyScrollRef) {
-      tableBodyScrollRef.current = node;
-    }
-  }, children: /* @__PURE__ */ jsx(Tr, { children: /* @__PURE__ */ jsx(Td, { colSpan, children: /* @__PURE__ */ jsx(TableEmptyBodyWrapper, { children: emptyDataComponent !== void 0 ? emptyDataComponent : /* @__PURE__ */ jsx(Result, { description: texts.emptyText || /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.TABLE.EMPTY_TEXT" }), type: "no-results", noSearchResults: true }) }) }) }) });
+  return /* @__PURE__ */ jsx(TBody, { children: /* @__PURE__ */ jsx(Tr, { children: /* @__PURE__ */ jsx(Td, { colSpan, children: /* @__PURE__ */ jsx(TableEmptyBodyWrapper, { children: emptyDataComponent !== void 0 ? emptyDataComponent : /* @__PURE__ */ jsx(Result, { description: texts.emptyText || /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.TABLE.EMPTY_TEXT" }), type: "no-results", noSearchResults: true }) }) }) }) });
 };
 export {
   TableEmptyBody

package/dist/components/TableColumns/TableColumns.js

@@ -18,7 +18,7 @@ const TableColumns = ({
     const hasSorter = header.column.getCanSort();
     const isColumnSorted = isSorted(header.column);
     const align = header.column.columnDef.meta?.align;
-    return /* @__PURE__ */ jsx(Th, { headerIndex: columnIndex, colSpan: header.colSpan, style: header.column.columnDef.meta?.style, isPinned: header.column.getIsPinned(), rightOffset: header.column.getStart("left"), leftOffset: header.column.getAfter("right"), isSorted: isColumnSorted, hasSorter, $align: align, "data-sticky": isSticky ? "true" : void 0, role: "columnheader", children: /* @__PURE__ */ jsxs(HeaderWrapper, { $align: align, children: [
+    return /* @__PURE__ */ jsx(Th, { headerIndex: columnIndex, colSpan: header.colSpan, style: header.column.columnDef.meta?.style, isPinned: header.column.getIsPinned(), leftOffset: header.column.getStart("left"), rightOffset: header.column.getAfter("right"), isSorted: isColumnSorted, hasSorter, $align: align, "data-sticky": isSticky ? "true" : void 0, role: "columnheader", children: /* @__PURE__ */ jsxs(HeaderWrapper, { $align: align, children: [
       /* @__PURE__ */ jsx(Label, { disableColumnNamesLineBreak, children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()) }),
       hasSorter && (header.column.columnDef.meta?.renderCustomSortButton?.(header.getContext()) || /* @__PURE__ */ jsx(TableColumnSorter, { texts, column: header.column }))
     ] }) }, id);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-table-new",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "TableNew UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -34,27 +34,27 @@
   "types": "dist/index.d.ts",
   "dependencies": {
     "@floating-ui/react": "^0.27.16",
-    "@synerise/ds-badge": "^1.0.48",
-    "@synerise/ds-button": "^1.5.22",
-    "@synerise/ds-checkbox": "^1.2.25",
-    "@synerise/ds-copy-icon": "^1.2.6",
-    "@synerise/ds-dropdown": "^1.3.7",
+    "@synerise/ds-badge": "^1.0.49",
+    "@synerise/ds-button": "^1.5.23",
+    "@synerise/ds-checkbox": "^1.2.26",
+    "@synerise/ds-copy-icon": "^1.2.7",
+    "@synerise/ds-dropdown": "^1.3.8",
     "@synerise/ds-flag": "^1.0.10",
-    "@synerise/ds-icon": "^1.16.0",
-    "@synerise/ds-inline-alert": "^1.1.18",
-    "@synerise/ds-input": "^1.7.2",
-    "@synerise/ds-input-number": "^1.2.39",
+    "@synerise/ds-icon": "^1.17.0",
+    "@synerise/ds-inline-alert": "^1.1.19",
+    "@synerise/ds-input": "^1.7.3",
+    "@synerise/ds-input-number": "^1.2.40",
     "@synerise/ds-loader": "^1.0.15",
-    "@synerise/ds-modal": "^1.4.6",
-    "@synerise/ds-pagination": "^1.0.57",
-    "@synerise/ds-result": "^1.0.53",
-    "@synerise/ds-scrollbar": "^1.3.0",
-    "@synerise/ds-search": "^1.5.16",
-    "@synerise/ds-skeleton": "^1.0.49",
-    "@synerise/ds-tag": "^1.4.22",
-    "@synerise/ds-tags": "^1.5.33",
-    "@synerise/ds-tooltip": "^1.4.14",
-    "@synerise/ds-typography": "^1.1.17",
+    "@synerise/ds-modal": "^1.4.7",
+    "@synerise/ds-pagination": "^1.0.58",
+    "@synerise/ds-result": "^1.0.54",
+    "@synerise/ds-scrollbar": "^1.3.1",
+    "@synerise/ds-search": "^1.5.17",
+    "@synerise/ds-skeleton": "^1.0.50",
+    "@synerise/ds-tag": "^1.4.23",
+    "@synerise/ds-tags": "^1.5.34",
+    "@synerise/ds-tooltip": "^1.4.15",
+    "@synerise/ds-typography": "^1.1.18",
     "@synerise/ds-utils": "^1.8.0",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.13.12",
@@ -71,5 +71,5 @@
     "react-intl": ">= 3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "6d4f42c9a899ff73f582a7405a5a2470a4b07083"
+  "gitHead": "71415efab30b82d23558094f18c9551a15234be3"
 }