@synerise/ds-table-new 1.0.5 → 1.1.0

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.1.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-table-new@1.0.6...@synerise/ds-table-new@1.1.0) (2026-04-28)
+
+### Features
+
+- **table-new:** summary and id generation ([8564b73](https://github.com/Synerise/synerise-design/commit/8564b73e532b190c9c62674b6ce2725418a2c619))
+
+## [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

@@ -246,6 +246,11 @@ export type SharedTableProps<TData, TValue> = {
      * custom "Empty data" component
      */
     emptyDataComponent?: ReactNode;
+    /**
+     * Optional summary content rendered inside a <tfoot> at the bottom of the table.
+     * Should be a <tr> (or fragment of <tr>s) with <td>/<th> cells matching the column layout.
+     */
+    summary?: ReactNode;
 };
 export type GlobalSelectionProps = {
     /**
@@ -444,11 +449,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.d.ts

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
 import { BaseTableProps, TableInternalProps } from '../../Table.types';
-export declare const BaseTable: <TData extends object, TValue>({ infiniteScroll, cellHeight, className, itemsMenu, texts, isCounterLoading, isLoading, rowKey, title, hideTitleBar, hideTitlePart, renderCustomCounter, renderSelectionTitle, searchComponent, filterComponent, headerWithBorderTop, emptyDataComponent, headerButton, hideColumnNames, expandable, columnSizing, isColumnSizingReady, paginationProps, hasPagination, disableColumnNamesLineBreak, dataSourceTotalCount, cardStyles, tableOuterRef, withScroll, withBodyScroll, maxHeight, tableBodyScrollRef, onRowClick, getRowProps, getRowTooltipProps, searchQuery, setSearchQuery, handleSearchClear, hasBuiltInSearch, searchProps, }: BaseTableProps<TData, TValue> & TableInternalProps) => React.JSX.Element;
+export declare const BaseTable: <TData extends object, TValue>({ infiniteScroll, cellHeight, className, itemsMenu, texts, isCounterLoading, isLoading, rowKey, title, hideTitleBar, hideTitlePart, renderCustomCounter, renderSelectionTitle, searchComponent, filterComponent, headerWithBorderTop, emptyDataComponent, headerButton, hideColumnNames, expandable, columnSizing, isColumnSizingReady, paginationProps, hasPagination, disableColumnNamesLineBreak, dataSourceTotalCount, cardStyles, tableOuterRef, withScroll, withBodyScroll, maxHeight, tableBodyScrollRef, onRowClick, getRowProps, getRowTooltipProps, searchQuery, setSearchQuery, handleSearchClear, hasBuiltInSearch, searchProps, summary, }: BaseTableProps<TData, TValue> & TableInternalProps) => React.JSX.Element;

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, Tfoot, BaseTableWrapper, TableContainer, TableBodyScrollWrapper, TableColumnsHorizontalScroll } from "./BaseTable.styles.js";
 const BaseTable = ({
   infiniteScroll,
   cellHeight = DEFAULT_CELL_HEIGHT,
@@ -52,7 +52,8 @@ const BaseTable = ({
   setSearchQuery,
   handleSearchClear,
   hasBuiltInSearch,
-  searchProps
+  searchProps,
+  summary
 }) => {
   const horizontalScrollRefs = useRef([]);
   const tableBodyWrapperRef = useRef(null);
@@ -95,18 +96,22 @@ const BaseTable = ({
   const tableBodyContent = /* @__PURE__ */ jsx(TableHorizontalScroll, { stickyRight: table.getRightTotalSize(), stickyLeft: table.getLeftTotalSize(), ref: (element) => {
     tableBodyWrapperRef.current = element;
     addNode(element);
-  }, children: /* @__PURE__ */ jsx(StyledTable, { role: "table", children: isLoading ? /* @__PURE__ */ jsx(TableBodySkeleton, { wrapperRef: tableBodyWrapperRef, cellHeight }, "table-body-skeleton") : /* @__PURE__ */ jsx(TableBody, { cellHeight, infiniteScroll, emptyDataComponent, texts, onRowClick, getRowProps, getRowTooltipProps }, "table-body") }) });
+  }, children: /* @__PURE__ */ jsxs(StyledTable, { role: "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", 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"),
+    !isLoading && summary && /* @__PURE__ */ jsx(Tfoot, { children: summary })
   ] }) });
   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/BaseTable/BaseTable.styles.d.ts

@@ -17,6 +17,7 @@ export declare const TableBodyScrollWrapper: import('styled-components').StyledC
 export declare const TableSkeleton: import('styled-components').StyledComponent<({ size, numberOfSkeletons, width, height, className, }: import('@synerise/ds-skeleton').SkeletonProps) => React.JSX.Element, any, {
     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 TableColumnsHorizontalScroll: import('styled-components').StyledComponent<import('react').ForwardRefExoticComponent<{
     children?: import('react').ReactNode;

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

@@ -17,13 +17,17 @@ const TableSkeleton = /* @__PURE__ */ styled(DSSkeleton).withConfig({
   displayName: "BaseTablestyles__TableSkeleton",
   componentId: "sc-1oa5lc2-3"
 })(["padding:0;", ""], (props) => props.skeletonWidth && `width: ${props.skeletonWidth};`);
+const Tfoot = /* @__PURE__ */ styled.tfoot.withConfig({
+  displayName: "BaseTablestyles__Tfoot",
+  componentId: "sc-1oa5lc2-4"
+})([""]);
 const StyledTable = /* @__PURE__ */ styled.table.withConfig({
   displayName: "BaseTablestyles__StyledTable",
-  componentId: "sc-1oa5lc2-4"
-})(["width:var(--table-size);min-width:100%;border-spacing:0;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"]);
+  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"]);
 const TableColumnsHorizontalScroll = /* @__PURE__ */ styled(TableHorizontalScroll).withConfig({
   displayName: "BaseTablestyles__TableColumnsHorizontalScroll",
-  componentId: "sc-1oa5lc2-5"
+  componentId: "sc-1oa5lc2-6"
 })(["", ""], ({
   stickyData,
   isScrolled,
@@ -37,5 +41,6 @@ export {
   TableBodyScrollWrapper,
   TableColumnsHorizontalScroll,
   TableContainer,
-  TableSkeleton
+  TableSkeleton,
+  Tfoot
 };

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/dist/hooks/useTable.js

@@ -53,6 +53,15 @@ const useTable = ({
     getRowKey
   } = useRowKey(rowKey);
   const memoizedGetRowKey = useCallback((row, index) => getRowKey(row, index), [getRowKey]);
+  const columnKeyById = useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    columns.forEach((column) => {
+      if (column.id) {
+        map.set(column.id, column.meta?.columnKey ?? column.id);
+      }
+    });
+    return map;
+  }, [columns]);
   const handleSortingChange = useCallback((updaterOrValue) => {
     setSorting((oldSorting) => {
       const newSorting = typeof updaterOrValue === "function" ? updaterOrValue(oldSorting) : updaterOrValue;
@@ -61,13 +70,14 @@ const useTable = ({
           const singleColumnSort = newSorting[0];
           const sortState = {};
           newSorting.forEach((column, index) => {
-            sortState[column.id] = {
+            const key = columnKeyById.get(column.id) ?? column.id;
+            sortState[key] = {
               sortOrder: column.desc ? "descend" : "ascend",
               multiple: index
             };
           });
           onSort({
-            columnKey: singleColumnSort.id,
+            columnKey: columnKeyById.get(singleColumnSort.id) ?? singleColumnSort.id,
             order: singleColumnSort.desc ? "descend" : "ascend"
           }, sortState);
         } else {
@@ -76,7 +86,7 @@ const useTable = ({
       }
       return newSorting;
     });
-  }, [onSort]);
+  }, [onSort, columnKeyById]);
   const handleSelectionChange = useCallback((updaterOrValue) => {
     setRowSelection((oldSelection) => {
       const newSelection = typeof updaterOrValue === "function" ? updaterOrValue(oldSelection) : updaterOrValue;

package/dist/types/table.d.ts

@@ -18,6 +18,12 @@ declare module '@tanstack/react-table' {
     skeletonCell?: () => ReactNode;
     dataIndex?: string;
     title?: string;
+    /**
+     * External-facing column key reported back to consumers (e.g. via onSort).
+     * Set by `legacyColumnConfigAdapter` so that internally-disambiguated column
+     * ids (e.g. `${key}-${index}` for duplicate-key columns) don't leak out.
+     */
+    columnKey?: string;
     enableMultiSort?: boolean;
     /**
      * Returns tooltip props for cells in this column, or false to disable tooltip.

package/dist/utils/legacyColumnConfigAdapter.js

@@ -91,6 +91,7 @@ const legacyColumnConfigAdapter = (columns) => {
         getCellTooltipProps: column.getCellTooltipProps,
         dataIndex: column.dataIndex,
         title: typeof column.title === "string" ? column.title : void 0,
+        columnKey: `${column.id ?? column.key ?? (Array.isArray(column.dataIndex) ? column.dataIndex.join(".") : column.dataIndex)}`,
         childCell: (info) => {
           if (column.childRender) {
             const rowData = {
@@ -107,7 +108,7 @@ const legacyColumnConfigAdapter = (columns) => {
       ...sortingConfig,
       size: calculatePixels(column.width),
       ...column,
-      id: `${column.id || column.key || `${column.dataIndex}-${index}`}`
+      id: `${column.id || `${column.key ?? column.dataIndex}-${index}`}`
     };
   });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-table-new",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "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.50",
+    "@synerise/ds-button": "^1.5.24",
+    "@synerise/ds-checkbox": "^1.2.27",
+    "@synerise/ds-copy-icon": "^1.2.8",
+    "@synerise/ds-dropdown": "^1.3.9",
     "@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.1",
+    "@synerise/ds-inline-alert": "^1.1.20",
+    "@synerise/ds-input": "^1.7.4",
+    "@synerise/ds-input-number": "^1.2.41",
     "@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.8",
+    "@synerise/ds-pagination": "^1.0.59",
+    "@synerise/ds-result": "^1.0.55",
+    "@synerise/ds-scrollbar": "^1.3.2",
+    "@synerise/ds-search": "^1.5.18",
+    "@synerise/ds-skeleton": "^1.0.51",
+    "@synerise/ds-tag": "^1.4.24",
+    "@synerise/ds-tags": "^1.5.35",
+    "@synerise/ds-tooltip": "^1.4.16",
+    "@synerise/ds-typography": "^1.1.19",
     "@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": "25cf79a6df348141419f397813e4f6a5533deb5f"
 }