@synerise/ds-table-new 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.3.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-table-new@1.2.0...@synerise/ds-table-new@1.3.0) (2026-05-15)
+
+### Features
+
+- **table-new:** render column widths via <colgroup> in unified mode ([5f0fa79](https://github.com/Synerise/synerise-design/commit/5f0fa79a5ef1da6506a5ae3bd0c624c9b794866f))
+
 # [1.2.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-table-new@1.1.4...@synerise/ds-table-new@1.2.0) (2026-05-13)
 
 ### Features

package/dist/components/BaseTable/BaseTable.js

@@ -1,17 +1,15 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useRef, useEffect, useCallback } from "react";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useRef, useCallback } from "react";
 import { DEFAULT_CELL_HEIGHT } from "../../Table.const.js";
 import { useStickyContext } from "../../contexts/StickyContext.js";
 import { useTableContext } from "../../contexts/TableContext.js";
 import { useScrollSync } from "../../hooks/useScrollSync.js";
-import { TableBody } from "../TableBody/TableBody.js";
-import { TableBodySkeleton } from "../TableBody/TableBodySkeleton/TableBodySkeleton.js";
-import { TableColumns } from "../TableColumns/TableColumns.js";
 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, Tfoot, BaseTableWrapper, TableContainer, TableBodyScrollWrapper, TableColumnsHorizontalScroll } from "./BaseTable.styles.js";
+import { BaseTableWrapper, TableContainer } from "./BaseTable.styles.js";
+import { StickyTableContent } from "./StickyTableContent.js";
+import { UnifiedTableContent } from "./UnifiedTableContent.js";
 const BaseTable = ({
   infiniteScroll,
   cellHeight = DEFAULT_CELL_HEIGHT,
@@ -56,19 +54,14 @@ const BaseTable = ({
   summary
 }) => {
   const horizontalScrollRefs = useRef([]);
-  const tableBodyWrapperRef = useRef(null);
-  const tableColumnsWrapperRef = useRef(null);
   useScrollSync(horizontalScrollRefs);
   const {
     table,
     rowVirtualizer
   } = useTableContext();
   const stickyContext = useStickyContext();
-  const stickyContextRef = useRef(stickyContext);
   const useUnifiedScroll = !stickyContext;
-  useEffect(() => {
-    stickyContextRef.current = stickyContext;
-  }, [stickyContext]);
+  const useColgroupLayout = useUnifiedScroll && !rowVirtualizer;
   const addNode = useCallback((node) => {
     if (node && !horizontalScrollRefs.current.includes(node)) {
       horizontalScrollRefs.current.push(node);
@@ -76,45 +69,28 @@ const BaseTable = ({
   }, []);
   const size = Object.values(columnSizing).reduce((sum, n) => sum + n, 0);
   const isEmpty = !table.getRowModel().flatRows.length;
-  const handleRef = useCallback((element) => {
-    tableColumnsWrapperRef.current = element;
-    if (!element) {
-      return;
-    }
-    const ctx = stickyContextRef.current;
-    if (element.clientHeight && ctx && ctx.stickyData.columnHeadersHeight !== element.clientHeight) {
-      const {
-        setStickyData
-      } = ctx;
-      setStickyData((prevValue) => ({
-        ...prevValue,
-        columnHeadersHeight: element.clientHeight
-      }));
-    }
-    addNode(element);
-  }, [addNode]);
-  const tableBodyContent = /* @__PURE__ */ jsx(TableHorizontalScroll, { stickyRight: table.getRightTotalSize(), stickyLeft: table.getLeftTotalSize(), ref: (element) => {
-    tableBodyWrapperRef.current = element;
-    addNode(element);
-  }, children: /* @__PURE__ */ jsxs(StyledTable, { role: "table", className: "ds-table", children: [
-    isLoading ? /* @__PURE__ */ jsx(TableBodySkeleton, { wrapperRef: tableBodyWrapperRef, cellHeight }, "table-body-skeleton") : /* @__PURE__ */ jsx(TableBody, { cellHeight, infiniteScroll, emptyDataComponent, texts, onRowClick, getRowProps, getRowTooltipProps }, "table-body"),
-    !isLoading && summary && /* @__PURE__ */ jsx(Tfoot, { children: summary })
-  ] }) });
-  const unifiedTableContent = /* @__PURE__ */ jsx(TableHorizontalScroll, { stickyRight: table.getRightTotalSize(), stickyLeft: table.getLeftTotalSize(), ref: (element) => {
-    tableBodyWrapperRef.current = element;
-    addNode(element);
-  }, children: /* @__PURE__ */ jsxs(StyledTable, { role: "table", className: "ds-table", children: [
-    !hideColumnNames && (!isEmpty || isLoading) && /* @__PURE__ */ jsx(TableColumns, { texts, disableColumnNamesLineBreak }),
-    isLoading ? /* @__PURE__ */ jsx(TableBodySkeleton, { wrapperRef: tableBodyWrapperRef, cellHeight }, "table-body-skeleton") : /* @__PURE__ */ jsx(TableBody, { cellHeight, infiniteScroll, emptyDataComponent, texts, onRowClick, getRowProps, getRowTooltipProps }, "table-body"),
-    !isLoading && summary && /* @__PURE__ */ jsx(Tfoot, { children: summary })
-  ] }) });
-  return /* @__PURE__ */ jsxs(BaseTableWrapper, { isEmpty, columnSizing, $isColumnSizingReady: isColumnSizingReady, $size: size, children: [
+  const contentProps = {
+    infiniteScroll,
+    cellHeight,
+    texts,
+    isLoading,
+    emptyDataComponent,
+    onRowClick,
+    getRowProps,
+    getRowTooltipProps,
+    summary,
+    hideColumnNames,
+    disableColumnNamesLineBreak,
+    withBodyScroll,
+    maxHeight,
+    tableBodyScrollRef,
+    addNode,
+    isEmpty
+  };
+  return /* @__PURE__ */ jsxs(BaseTableWrapper, { isEmpty, columnSizing: useColgroupLayout ? {} : columnSizing, $isColumnSizingReady: isColumnSizingReady, $size: useColgroupLayout ? void 0 : 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 ? 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", className: "ds-table", children: /* @__PURE__ */ jsx(TableColumns, { texts, disableColumnNamesLineBreak }) }) }),
-        withBodyScroll ? /* @__PURE__ */ jsx(TableBodyScrollWrapper, { ref: tableBodyScrollRef, $maxHeight: maxHeight, children: tableBodyContent }) : tableBodyContent
-      ] }),
+      useUnifiedScroll ? /* @__PURE__ */ jsx(UnifiedTableContent, { useColgroupLayout, ...contentProps }) : /* @__PURE__ */ jsx(StickyTableContent, { ...contentProps }),
       hasPagination && /* @__PURE__ */ jsx(TablePagination, { ...paginationProps })
     ] }),
     !isEmpty && !!stickyContext && /* @__PURE__ */ jsx(TableHorizontalScrollBar, { contentRef: (element) => addNode(element) })

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

@@ -18,12 +18,15 @@ export declare const TableSkeleton: import('styled-components').StyledComponent<
     skeletonWidth?: string;
 }, never>;
 export declare const Tfoot: import('styled-components').StyledComponent<"tfoot", any, {}, never>;
-export declare const StyledTable: import('styled-components').StyledComponent<"table", any, {}, never>;
+export declare const StyledTable: import('styled-components').StyledComponent<"table", any, {
+    $tableLayoutAuto?: boolean;
+}, never>;
 export declare const TableColumnsHorizontalScroll: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<{
     children?: import('react').ReactNode;
     stickyLeft?: number;
     stickyRight?: number;
-} & Omit<import('react').HTMLAttributes<HTMLDivElement>, "children" | "stickyLeft" | "stickyRight"> & import('@synerise/ds-utils').DataAttributes & import('react').RefAttributes<HTMLDivElement>>, any, {
+    nativeScrollbar?: boolean;
+} & Omit<import('react').HTMLAttributes<HTMLDivElement>, "children" | "nativeScrollbar" | "stickyLeft" | "stickyRight"> & import('@synerise/ds-utils').DataAttributes & import('react').RefAttributes<HTMLDivElement>>, any, {
     stickyData?: StickyData;
     isScrolled?: number | null;
 }, never>;

package/dist/components/BaseTable/BaseTable.styles.js

@@ -24,7 +24,7 @@ const Tfoot = /* @__PURE__ */ styled.tfoot.withConfig({
 const StyledTable = /* @__PURE__ */ styled.table.withConfig({
   displayName: "BaseTablestyles__StyledTable",
   componentId: "sc-1oa5lc2-5"
-})(["width:var(--table-size);min-width:100%;border-spacing:0;table-layout:fixed;border-collapse:separate;@keyframes ds-table-row-highlight{0%{background-color:transparent;}5%{background-color:var( --ds-highlight-color,", " );}30%{background-color:var( --ds-highlight-color,", " );}100%{background-color:transparent;}}tr.ds-table-row-highlight td{transition:background 0.3s ease-in-out;animation:ds-table-row-highlight var(--ds-highlight-duration,600ms) ease-in-out forwards;}"], (props) => props.theme.palette["blue-050"], (props) => props.theme.palette["blue-050"]);
+})(["width:var(--table-size);min-width:100%;border-spacing:0;table-layout:", ";border-collapse:separate;", " ", " tr.ds-table-row-highlight td{transition:background 0.3s ease-in-out;animation:ds-table-row-highlight var(--ds-highlight-duration,600ms) ease-in-out forwards;}"], (props) => props.$tableLayoutAuto ? "auto" : "fixed", (props) => props.$tableLayoutAuto && css(["&& tr{display:table-row;width:auto;table-layout:auto;}&& thead{display:table-header-group;}&& tbody{display:table-row-group;}&& th,&& td{display:table-cell;}"]), (props) => css(["@keyframes ds-table-row-highlight{0%{background-color:transparent;}5%{background-color:var( --ds-highlight-color,", " );}30%{background-color:var( --ds-highlight-color,", " );}100%{background-color:transparent;}}"], props.theme.palette["blue-050"], props.theme.palette["blue-050"]));
 const TableColumnsHorizontalScroll = /* @__PURE__ */ styled(TableHorizontalScroll).withConfig({
   displayName: "BaseTablestyles__TableColumnsHorizontalScroll",
   componentId: "sc-1oa5lc2-6"

package/dist/components/BaseTable/StickyTableContent.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { BaseTableProps, TableInternalProps } from '../../Table.types';
+export type StickyTableContentProps<TData, TValue> = Pick<BaseTableProps<TData, TValue> & TableInternalProps, 'infiniteScroll' | 'texts' | 'isLoading' | 'emptyDataComponent' | 'onRowClick' | 'getRowProps' | 'getRowTooltipProps' | 'summary' | 'hideColumnNames' | 'disableColumnNamesLineBreak' | 'withBodyScroll' | 'maxHeight' | 'tableBodyScrollRef'> & {
+    cellHeight: number;
+    addNode: (node: HTMLDivElement | null) => void;
+    isEmpty: boolean;
+};
+export declare const StickyTableContent: <TData extends object, TValue>({ infiniteScroll, cellHeight, texts, isLoading, emptyDataComponent, onRowClick, getRowProps, getRowTooltipProps, summary, hideColumnNames, disableColumnNamesLineBreak, withBodyScroll, maxHeight, tableBodyScrollRef, addNode, isEmpty, }: StickyTableContentProps<TData, TValue>) => React.JSX.Element;

package/dist/components/BaseTable/StickyTableContent.js

@@ -0,0 +1,70 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useRef, useEffect, useCallback } from "react";
+import { useStickyContext } from "../../contexts/StickyContext.js";
+import { useTableContext } from "../../contexts/TableContext.js";
+import { TableBody } from "../TableBody/TableBody.js";
+import { TableBodySkeleton } from "../TableBody/TableBodySkeleton/TableBodySkeleton.js";
+import { TableColumns } from "../TableColumns/TableColumns.js";
+import { TableHorizontalScroll } from "../TableHorizontalScroll/TableHorizontalScroll.js";
+import { StyledTable, Tfoot, TableColumnsHorizontalScroll, TableBodyScrollWrapper } from "./BaseTable.styles.js";
+const StickyTableContent = ({
+  infiniteScroll,
+  cellHeight,
+  texts,
+  isLoading,
+  emptyDataComponent,
+  onRowClick,
+  getRowProps,
+  getRowTooltipProps,
+  summary,
+  hideColumnNames,
+  disableColumnNamesLineBreak,
+  withBodyScroll,
+  maxHeight,
+  tableBodyScrollRef,
+  addNode,
+  isEmpty
+}) => {
+  const {
+    table,
+    rowVirtualizer
+  } = useTableContext();
+  const stickyContext = useStickyContext();
+  const stickyContextRef = useRef(stickyContext);
+  const tableBodyWrapperRef = useRef(null);
+  const tableColumnsWrapperRef = useRef(null);
+  useEffect(() => {
+    stickyContextRef.current = stickyContext;
+  }, [stickyContext]);
+  const handleColumnsRef = useCallback((element) => {
+    tableColumnsWrapperRef.current = element;
+    if (!element) {
+      return;
+    }
+    const ctx = stickyContextRef.current;
+    if (element.clientHeight && ctx && ctx.stickyData.columnHeadersHeight !== element.clientHeight) {
+      const {
+        setStickyData
+      } = ctx;
+      setStickyData((prevValue) => ({
+        ...prevValue,
+        columnHeadersHeight: element.clientHeight
+      }));
+    }
+    addNode(element);
+  }, [addNode]);
+  const body = /* @__PURE__ */ jsx(TableHorizontalScroll, { stickyRight: table.getRightTotalSize(), stickyLeft: table.getLeftTotalSize(), ref: (element) => {
+    tableBodyWrapperRef.current = element;
+    addNode(element);
+  }, children: /* @__PURE__ */ jsxs(StyledTable, { role: "table", className: "ds-table", children: [
+    isLoading ? /* @__PURE__ */ jsx(TableBodySkeleton, { wrapperRef: tableBodyWrapperRef, cellHeight }, "table-body-skeleton") : /* @__PURE__ */ jsx(TableBody, { cellHeight, infiniteScroll, emptyDataComponent, texts, onRowClick, getRowProps, getRowTooltipProps }, "table-body"),
+    !isLoading && summary && /* @__PURE__ */ jsx(Tfoot, { children: summary })
+  ] }) });
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    !hideColumnNames && (!isEmpty || isLoading) && /* @__PURE__ */ jsx(TableColumnsHorizontalScroll, { stickyRight: table.getRightTotalSize(), stickyLeft: table.getLeftTotalSize(), stickyData: stickyContext?.stickyData, isScrolled: rowVirtualizer?.scrollOffset, ref: handleColumnsRef, children: /* @__PURE__ */ jsx(StyledTable, { role: "table", className: "ds-table", children: /* @__PURE__ */ jsx(TableColumns, { texts, disableColumnNamesLineBreak }) }) }),
+    withBodyScroll ? /* @__PURE__ */ jsx(TableBodyScrollWrapper, { ref: tableBodyScrollRef, $maxHeight: maxHeight, children: body }) : body
+  ] });
+};
+export {
+  StickyTableContent
+};

package/dist/components/BaseTable/UnifiedTableContent.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { BaseTableProps, TableInternalProps } from '../../Table.types';
+export type UnifiedTableContentProps<TData, TValue> = Pick<BaseTableProps<TData, TValue> & TableInternalProps, 'infiniteScroll' | 'texts' | 'isLoading' | 'emptyDataComponent' | 'onRowClick' | 'getRowProps' | 'getRowTooltipProps' | 'summary' | 'hideColumnNames' | 'disableColumnNamesLineBreak' | 'withBodyScroll' | 'maxHeight' | 'tableBodyScrollRef'> & {
+    cellHeight: number;
+    addNode: (node: HTMLDivElement | null) => void;
+    isEmpty: boolean;
+    useColgroupLayout: boolean;
+};
+export declare const UnifiedTableContent: <TData extends object, TValue>({ infiniteScroll, cellHeight, texts, isLoading, emptyDataComponent, onRowClick, getRowProps, getRowTooltipProps, summary, hideColumnNames, disableColumnNamesLineBreak, withBodyScroll, maxHeight, tableBodyScrollRef, addNode, isEmpty, useColgroupLayout, }: UnifiedTableContentProps<TData, TValue>) => React.JSX.Element;

package/dist/components/BaseTable/UnifiedTableContent.js

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { useTableContext } from "../../contexts/TableContext.js";
+import { getUnifiedColumnSizingStyle } from "../../utils/getUnifiedColumnSizingStyle.js";
+import { TableBody } from "../TableBody/TableBody.js";
+import { TableBodySkeleton } from "../TableBody/TableBodySkeleton/TableBodySkeleton.js";
+import { TableColumns } from "../TableColumns/TableColumns.js";
+import { TableHorizontalScroll } from "../TableHorizontalScroll/TableHorizontalScroll.js";
+import { StyledTable, Tfoot, TableBodyScrollWrapper } from "./BaseTable.styles.js";
+const UnifiedTableContent = ({
+  infiniteScroll,
+  cellHeight,
+  texts,
+  isLoading,
+  emptyDataComponent,
+  onRowClick,
+  getRowProps,
+  getRowTooltipProps,
+  summary,
+  hideColumnNames,
+  disableColumnNamesLineBreak,
+  withBodyScroll,
+  maxHeight,
+  tableBodyScrollRef,
+  addNode,
+  isEmpty,
+  useColgroupLayout
+}) => {
+  const {
+    table
+  } = useTableContext();
+  const tableBodyWrapperRef = useRef(null);
+  const body = /* @__PURE__ */ jsx(TableHorizontalScroll, { stickyRight: table.getRightTotalSize(), stickyLeft: table.getLeftTotalSize(), ref: (element) => {
+    tableBodyWrapperRef.current = element;
+    addNode(element);
+  }, nativeScrollbar: useColgroupLayout, children: /* @__PURE__ */ jsxs(StyledTable, { role: "table", className: "ds-table", $tableLayoutAuto: useColgroupLayout, children: [
+    useColgroupLayout && !isEmpty && /* @__PURE__ */ jsx("colgroup", { children: table.getVisibleLeafColumns().map((column, index) => /* @__PURE__ */ jsx("col", { style: getUnifiedColumnSizingStyle(column) }, column.id ?? `col-${index}`)) }),
+    !hideColumnNames && (!isEmpty || isLoading) && /* @__PURE__ */ jsx(TableColumns, { texts, disableColumnNamesLineBreak }),
+    isLoading ? /* @__PURE__ */ jsx(TableBodySkeleton, { wrapperRef: tableBodyWrapperRef, cellHeight }, "table-body-skeleton") : /* @__PURE__ */ jsx(TableBody, { cellHeight, infiniteScroll, emptyDataComponent, texts, onRowClick, getRowProps, getRowTooltipProps }, "table-body"),
+    !isLoading && summary && /* @__PURE__ */ jsx(Tfoot, { children: summary })
+  ] }) });
+  return withBodyScroll ? /* @__PURE__ */ jsx(TableBodyScrollWrapper, { ref: tableBodyScrollRef, $maxHeight: maxHeight, children: body }) : body;
+};
+export {
+  UnifiedTableContent
+};

package/dist/components/Cell/FlagLabel/FlagLabelCell.styles.js

@@ -2,7 +2,7 @@ import styled from "styled-components";
 const FlagLabel = /* @__PURE__ */ styled.div.withConfig({
   displayName: "FlagLabelCellstyles__FlagLabel",
   componentId: "sc-17tek3-0"
-})(["display:flex;align-items:center;justify-content:flex-start;span{margin-left:8px;}"]);
+})(["display:flex;align-items:center;justify-content:flex-start;span{margin-left:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;}"]);
 export {
   FlagLabel
 };

package/dist/components/Cell/IconLabel/IconLabel.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import Icon from "@synerise/ds-icon";
-import { IconLabelCell as IconLabelCell$1 } from "./IconLabel.styles.js";
+import { IconLabelCell as IconLabelCell$1, Label } from "./IconLabel.styles.js";
 const IconLabelCell = ({
   label,
   icon,
@@ -8,7 +8,7 @@ const IconLabelCell = ({
   ...htmlAttributes
 }) => /* @__PURE__ */ jsxs(IconLabelCell$1, { isDisabled: disabled, ...htmlAttributes, children: [
   icon && /* @__PURE__ */ jsx(Icon, { ...icon }),
-  label && /* @__PURE__ */ jsx("span", { children: label })
+  label && /* @__PURE__ */ jsx(Label, { children: label })
 ] });
 export {
   IconLabelCell

package/dist/components/Cell/IconLabel/IconLabel.styles.d.ts

@@ -1,3 +1,4 @@
 export declare const IconLabelCell: import('styled-components').StyledComponent<"span", any, {
     isDisabled?: boolean;
 }, never>;
+export declare const Label: import('styled-components').StyledComponent<"span", any, {}, never>;

package/dist/components/Cell/IconLabel/IconLabel.styles.js

@@ -4,6 +4,11 @@ const IconLabelCell = /* @__PURE__ */ styled.span.withConfig({
   displayName: "IconLabelstyles__IconLabelCell",
   componentId: "sc-1ydzkrb-0"
 })(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;", " ", "{margin-right:8px;}"], (props) => props.isDisabled && "opacity: 0.4;", IconContainer);
+const Label = /* @__PURE__ */ styled.span.withConfig({
+  displayName: "IconLabelstyles__Label",
+  componentId: "sc-1ydzkrb-1"
+})(["min-width:0;overflow:hidden;text-overflow:ellipsis;"]);
 export {
-  IconLabelCell
+  IconLabelCell,
+  Label
 };

package/dist/components/Cell/StatusLabel/StatusLabel.styles.js

@@ -6,7 +6,7 @@ const StatusLabel = /* @__PURE__ */ styled.div.withConfig({
 const Label = /* @__PURE__ */ styled.span.withConfig({
   displayName: "StatusLabelstyles__Label",
   componentId: "sc-1jilb6u-1"
-})(["color:", ";font-weight:500;font-size:13px;line-height:1.38;"], (props) => props.theme.palette["grey-700"]);
+})(["color:", ";font-weight:500;font-size:13px;line-height:1.38;min-width:0;text-overflow:ellipsis;overflow:hidden;"], (props) => props.theme.palette["grey-700"]);
 export {
   Label,
   StatusLabel

package/dist/components/TableBody/TableRow/TableRow.js

@@ -1,6 +1,8 @@
 import { jsx } from "react/jsx-runtime";
 import Tooltip from "@synerise/ds-tooltip";
 import { flexRender } from "@tanstack/react-table";
+import { useStickyContext } from "../../../contexts/StickyContext.js";
+import { getUnifiedColumnSizingStyle } from "../../../utils/getUnifiedColumnSizingStyle.js";
 import { isSorted } from "../../../utils/sort.js";
 import { TableCell } from "../TableCell/TableCell.js";
 import { Tr } from "./TableRow.styles.js";
@@ -10,6 +12,7 @@ const TableRow = ({
   getRowProps,
   getRowTooltipProps
 }) => {
+  const isUnifiedTableContent = !useStickyContext();
   const customRowProps = getRowProps?.(row.original) ?? {};
   const {
     onClick: customOnClick,
@@ -27,7 +30,10 @@ const TableRow = ({
     const isColumnSorted = isSorted(cell.column);
     const cellContent = flexRender(cell.column.columnDef.cell, cell.getContext());
     const cellTooltipProps = cell.column.columnDef.meta?.getCellTooltipProps?.(row.original);
-    return /* @__PURE__ */ jsx(TableCell, { isSorted: isColumnSorted, headerIndex: columnIndex, cellKey: cellId, width: cell.column.getSize(), isPinned: cell.column.getIsPinned(), rightOffset: cell.column.getAfter("right"), leftOffset: cell.column.getStart("left"), align: cell.column.columnDef.meta?.align, style: cell.column.columnDef.meta?.style, "data-cell-id": cellId, "data-column-dataindex": cell.column.columnDef.meta?.dataIndex, "data-column-title": cell.column.columnDef.meta?.title, children: cellTooltipProps ? /* @__PURE__ */ jsx(Tooltip, { ...cellTooltipProps, children: /* @__PURE__ */ jsx("span", { children: cellContent }) }) : cellContent }, cellId);
+    return /* @__PURE__ */ jsx(TableCell, { isSorted: isColumnSorted, headerIndex: columnIndex, cellKey: cellId, width: isUnifiedTableContent ? void 0 : cell.column.getSize(), isPinned: cell.column.getIsPinned(), rightOffset: cell.column.getAfter("right"), leftOffset: cell.column.getStart("left"), align: cell.column.columnDef.meta?.align, style: isUnifiedTableContent ? {
+      ...getUnifiedColumnSizingStyle(cell.column),
+      ...cell.column.columnDef.meta?.style
+    } : cell.column.columnDef.meta?.style, "data-cell-id": cellId, "data-column-dataindex": cell.column.columnDef.meta?.dataIndex, "data-column-title": cell.column.columnDef.meta?.title, children: cellTooltipProps ? /* @__PURE__ */ jsx(Tooltip, { ...cellTooltipProps, children: /* @__PURE__ */ jsx("span", { children: cellContent }) }) : cellContent }, cellId);
   }) }, row.id);
   const rowTooltipProps = getRowTooltipProps?.(row.original);
   return rowTooltipProps ? /* @__PURE__ */ jsx(Tooltip, { ...rowTooltipProps, children: rowContent }) : rowContent;

package/dist/components/TableColumns/TableColumns.js

@@ -1,6 +1,8 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { flexRender } from "@tanstack/react-table";
+import { useStickyContext } from "../../contexts/StickyContext.js";
 import { useTableContext } from "../../contexts/TableContext.js";
+import { getUnifiedColumnSizingStyle } from "../../utils/getUnifiedColumnSizingStyle.js";
 import { isSorted } from "../../utils/sort.js";
 import { TableColumnSorter } from "./TableColumnSorter/TableColumnSorter.js";
 import { THead, Tr, Th, HeaderWrapper, Label } from "./TableColumns.styles.js";
@@ -9,8 +11,10 @@ const TableColumns = ({
   disableColumnNamesLineBreak
 }) => {
   const {
-    table
+    table,
+    rowVirtualizer
   } = useTableContext();
+  const useColgroupSizing = !useStickyContext() && !rowVirtualizer;
   const headerGroups = table.getHeaderGroups();
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(THead, { className: "ds-table-head", role: "rowgroup", "data-testid": "ds-table-columns", children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx(Tr, { role: "row", className: "ds-table-row", children: headerGroup.headers.map((header, columnIndex) => {
     const id = header.id;
@@ -18,7 +22,10 @@ const TableColumns = ({
     const hasSorter = header.column.getCanSort();
     const isColumnSorted = isSorted(header.column);
     const align = header.column.columnDef.meta?.align;
-    return /* @__PURE__ */ jsx(Th, { className: "ds-table-header-cell", 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: [
+    return /* @__PURE__ */ jsx(Th, { className: "ds-table-header-cell", headerIndex: columnIndex, colSpan: header.colSpan, style: useColgroupSizing ? {
+      ...getUnifiedColumnSizingStyle(header.column),
+      ...header.column.columnDef.meta?.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/dist/components/TableHorizontalScroll/TableHorizontalScroll.d.ts

@@ -3,4 +3,5 @@ export declare const TableHorizontalScroll: React.ForwardRefExoticComponent<{
     children?: ReactNode;
     stickyLeft?: number;
     stickyRight?: number;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "stickyLeft" | "stickyRight"> & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<HTMLDivElement>>;
+    nativeScrollbar?: boolean;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "children" | "nativeScrollbar" | "stickyLeft" | "stickyRight"> & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<HTMLDivElement>>;

package/dist/components/TableHorizontalScroll/TableHorizontalScroll.js

@@ -7,6 +7,7 @@ const TableHorizontalScroll = forwardRef(({
   children,
   stickyLeft = 0,
   stickyRight = 0,
+  nativeScrollbar,
   ...rest
 }, ref) => {
   const [isMaxLeft, setIsMaxLeft] = useState(true);
@@ -28,7 +29,7 @@ const TableHorizontalScroll = forwardRef(({
   useResizeObserver(wrapperRef, () => wrapperRef.current && calculateOffsets(wrapperRef.current));
   return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(HorizontalScrollContainer, { showLeftShadow: !isMaxLeft, showRightShadow: !isMaxRight, ...rest, children: [
     /* @__PURE__ */ jsx(LeftShadow, { offset: stickyLeft }),
-    /* @__PURE__ */ jsx(HorizontalScrollWrapper, { ref: mergedRef, onScroll: handleScroll, children }),
+    /* @__PURE__ */ jsx(HorizontalScrollWrapper, { nativeScrollbar, ref: mergedRef, onScroll: handleScroll, children }),
     /* @__PURE__ */ jsx(RightShadow, { offset: stickyRight })
   ] }) });
 });

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

@@ -1,4 +1,6 @@
-export declare const HorizontalScrollWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const HorizontalScrollWrapper: import('styled-components').StyledComponent<"div", any, {
+    nativeScrollbar?: boolean;
+}, never>;
 export declare const LeftShadow: import('styled-components').StyledComponent<"div", any, {
     offset: number;
 }, never>;

package/dist/components/TableHorizontalScroll/TableHorizontalScroll.styles.js

@@ -3,7 +3,7 @@ import { hexToRgba } from "@synerise/ds-utils";
 const HorizontalScrollWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "TableHorizontalScrollstyles__HorizontalScrollWrapper",
   componentId: "sc-16m24d3-0"
-})(["overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-y:auto;overscroll-behavior-x:contain;"]);
+})(["overflow-x:auto;overflow-y:hidden;", " overscroll-behavior-y:auto;overscroll-behavior-x:contain;"], (props) => !props.nativeScrollbar && "scrollbar-width: none;");
 const LeftShadow = /* @__PURE__ */ styled.div.withConfig({
   displayName: "TableHorizontalScrollstyles__LeftShadow",
   componentId: "sc-16m24d3-1"

package/dist/hooks/useTable.js

@@ -142,6 +142,16 @@ const useTable = ({
   }, [childrenColumnName]);
   const expandedKeys = expandable?.expandedRowKeys ? arrayToTrueMap(expandable?.expandedRowKeys) : void 0;
   const table = useReactTable({
+    // Override TanStack's built-in sizing defaults (size: 150, minSize: 20,
+    // maxSize: Number.MAX_SAFE_INTEGER) so column.columnDef.size/minSize/maxSize
+    // stay undefined when the consumer did not set them. BaseTable's
+    // unified-mode <colgroup> uses these to detect user-set widths;
+    // column.getSize() still falls back to TanStack's internal defaults.
+    defaultColumn: {
+      size: void 0,
+      minSize: void 0,
+      maxSize: void 0
+    },
     getRowId: memoizedGetRowKey,
     data: displayData,
     columns,

package/dist/utils/getUnifiedColumnSizingStyle.d.ts

@@ -0,0 +1,3 @@
+import { CSSProperties } from 'react';
+import { Column } from '@tanstack/react-table';
+export declare const getUnifiedColumnSizingStyle: <TData, TValue>(column: Column<TData, TValue>) => CSSProperties;

package/dist/utils/getUnifiedColumnSizingStyle.js

@@ -0,0 +1,30 @@
+const toCssLength = (v) => {
+  if (v === void 0 || v === null) {
+    return void 0;
+  }
+  return typeof v === "number" ? `${v}px` : v;
+};
+const positiveOrUndefined = (v) => typeof v === "number" && v > 0 ? v : void 0;
+const getUnifiedColumnSizingStyle = (column) => {
+  const meta = column.columnDef.meta;
+  const widthRaw = meta?.width ?? positiveOrUndefined(column.columnDef.size);
+  const minWidthRaw = meta?.minWidth ?? positiveOrUndefined(column.columnDef.minSize);
+  const maxWidthRaw = meta?.maxWidth ?? positiveOrUndefined(column.columnDef.maxSize);
+  const width = toCssLength(widthRaw);
+  const minWidth = toCssLength(minWidthRaw ?? widthRaw);
+  const maxWidth = toCssLength(maxWidthRaw ?? widthRaw);
+  const style = {};
+  if (width !== void 0) {
+    style.width = width;
+  }
+  if (minWidth !== void 0) {
+    style.minWidth = minWidth;
+  }
+  if (maxWidth !== void 0) {
+    style.maxWidth = maxWidth;
+  }
+  return style;
+};
+export {
+  getUnifiedColumnSizingStyle
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-table-new",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "TableNew UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -44,7 +44,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.27.16",
     "@synerise/ds-badge": "^1.0.53",
-    "@synerise/ds-button": "^1.5.28",
+    "@synerise/ds-button": "^1.5.29",
     "@synerise/ds-checkbox": "^1.2.30",
     "@synerise/ds-copy-icon": "^1.2.11",
     "@synerise/ds-dropdown": "^1.3.12",
@@ -54,14 +54,14 @@
     "@synerise/ds-input": "^1.7.7",
     "@synerise/ds-input-number": "^1.2.44",
     "@synerise/ds-loader": "^1.0.16",
-    "@synerise/ds-modal": "^1.4.13",
-    "@synerise/ds-pagination": "^1.0.63",
-    "@synerise/ds-result": "^1.0.59",
+    "@synerise/ds-modal": "^1.4.14",
+    "@synerise/ds-pagination": "^1.0.64",
+    "@synerise/ds-result": "^1.0.60",
     "@synerise/ds-scrollbar": "^1.3.5",
-    "@synerise/ds-search": "^1.5.23",
+    "@synerise/ds-search": "^1.5.24",
     "@synerise/ds-skeleton": "^1.0.54",
     "@synerise/ds-tag": "^1.4.27",
-    "@synerise/ds-tags": "^1.5.40",
+    "@synerise/ds-tags": "^1.5.41",
     "@synerise/ds-tooltip": "^1.4.19",
     "@synerise/ds-typography": "^1.1.22",
     "@synerise/ds-utils": "^1.8.1",
@@ -80,5 +80,5 @@
     "react-intl": ">= 3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "1132c21afce924c3e3b8e75e2ebd5e7b5db69bd2"
+  "gitHead": "ef14a62702ad420add6ad1c56da88df1f70a1bb8"
 }