@synerise/ds-table-new 1.0.6 → 1.1.1

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-table-new@1.1.0...@synerise/ds-table-new@1.1.1) (2026-04-29)
+
+### Bug Fixes
+
+- **table-new:** prevent premature column width calculation ([66bf51b](https://github.com/Synerise/synerise-design/commit/66bf51b62df73cff602eadeda4342520f7a7a1d1))
+
+# [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

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 = {
     /**

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, TableBodyScrollWrapper, TableColumnsHorizontalScroll } 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,13 +96,17 @@ 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, { 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: [

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

@@ -44,7 +44,10 @@ const useColumnSizing = ({
       return;
     }
     if (wrapperRef.current) {
-      calc(getContentWidth(wrapperRef.current));
+      const width = getContentWidth(wrapperRef.current);
+      if (width > 0) {
+        calc(width);
+      }
     }
   }, [enabled, calc, getContentWidth, wrapperRef]);
   useResizeObserver(wrapperRef, resizeHandler);

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.6",
+  "version": "1.1.1",
   "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.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-badge": "^1.0.51",
+    "@synerise/ds-button": "^1.5.25",
+    "@synerise/ds-checkbox": "^1.2.28",
+    "@synerise/ds-copy-icon": "^1.2.9",
+    "@synerise/ds-dropdown": "^1.3.10",
     "@synerise/ds-flag": "^1.0.10",
-    "@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-icon": "^1.17.2",
+    "@synerise/ds-inline-alert": "^1.1.21",
+    "@synerise/ds-input": "^1.7.5",
+    "@synerise/ds-input-number": "^1.2.42",
     "@synerise/ds-loader": "^1.0.15",
-    "@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-modal": "^1.4.9",
+    "@synerise/ds-pagination": "^1.0.60",
+    "@synerise/ds-result": "^1.0.56",
+    "@synerise/ds-scrollbar": "^1.3.3",
+    "@synerise/ds-search": "^1.5.19",
+    "@synerise/ds-skeleton": "^1.0.52",
+    "@synerise/ds-tag": "^1.4.25",
+    "@synerise/ds-tags": "^1.5.36",
+    "@synerise/ds-tooltip": "^1.4.17",
+    "@synerise/ds-typography": "^1.1.20",
     "@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": "71415efab30b82d23558094f18c9551a15234be3"
+  "gitHead": "82150f1e50f5a3e19682c68e4eec9ae441950327"
 }