@synerise/ds-table-new 1.4.5 → 1.5.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.5.1](https://github.com/Synerise/synerise-design/compare/@synerise/ds-table-new@1.5.0...@synerise/ds-table-new@1.5.1) (2026-06-24)
+
+### Bug Fixes
+
+- **table-new:** pagination fixes ([57a4ef9](https://github.com/Synerise/synerise-design/commit/57a4ef964ebe284f9c389b6d568be3a5b4bb33ca))
+
+# [1.5.0](https://github.com/Synerise/synerise-design/compare/@synerise/ds-table-new@1.4.5...@synerise/ds-table-new@1.5.0) (2026-06-22)
+
+### Features
+
+- **table-new:** extend maxHeight prop to default table component ([c99b632](https://github.com/Synerise/synerise-design/commit/c99b632f9a1ba1b6e8c62822512c827eb238743c))
+
 ## [1.4.5](https://github.com/Synerise/synerise-design/compare/@synerise/ds-table-new@1.4.4...@synerise/ds-table-new@1.4.5) (2026-06-17)
 
 **Note:** Version bump only for package @synerise/ds-table-new

package/dist/Table.d.ts

@@ -1,3 +1,3 @@
 import { default as React } from 'react';
 import { TableProps } from './Table.types';
-export declare const Table: <TData extends object, TValue>({ data, columns, texts: defaultTexts, selectionConfig, isLoading, selectedRowKeys, pagination, matchesSearchQuery, filterData, onSearchQueryChange, searchProps, expandable, rowKey, onSort, tableRef, stickyHeader, ...props }: TableProps<TData, TValue>) => React.JSX.Element;
+export declare const Table: <TData extends object, TValue>({ data, columns, texts: defaultTexts, selectionConfig, isLoading, selectedRowKeys, pagination, matchesSearchQuery, filterData, onSearchQueryChange, searchProps, expandable, rowKey, onSort, tableRef, stickyHeader, maxHeight, ...props }: TableProps<TData, TValue>) => React.JSX.Element;

package/dist/Table.js

@@ -27,6 +27,7 @@ const Table = ({
   onSort,
   tableRef,
   stickyHeader,
+  maxHeight,
   ...props
 }) => {
   const texts = useDefaultTexts(defaultTexts);
@@ -80,7 +81,7 @@ const Table = ({
     stickyData,
     setStickyData
   } : null, [stickyData, stickyHeader]);
-  return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(StickyContext.Provider, { value: stickyValue, 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, expandable, ...props }) }) }) });
+  return /* @__PURE__ */ jsx(TableContext.Provider, { value: tableContextValue, children: /* @__PURE__ */ jsx(StickyContext.Provider, { value: stickyValue, 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, expandable, withBodyScroll: !!maxHeight, maxHeight, ...props }) }) }) });
 };
 export {
   Table

package/dist/Table.types.d.ts

@@ -112,6 +112,8 @@ export type SharedTableProps<TData, TValue> = {
     columns: ColumnDef<TData, TValue>[];
     dataSourceTotalCount?: number;
     expandable?: Expandable<TData>;
+    /** max-height (px) for the built-in scroll container. Ignored when scrollElementRef is provided. Defaults to 800. */
+    maxHeight?: number;
     onRowClick?: (row: TData, event: MouseEvent<HTMLTableRowElement>) => void;
     /**
      * Returns arbitrary HTML attributes (style, className, data-*, event handlers, etc.)
@@ -353,8 +355,6 @@ export type VirtualTableRef = {
     highlightRow: (rowKey: string, options?: HighlightOptions) => void;
 };
 type VirtualProps = {
-    /** max-height (px) for the built-in scroll container. Ignored when scrollElementRef is provided. Defaults to 800. */
-    maxHeight?: number;
     tableRef?: RefObject<VirtualTableRef>;
     /**
      * uses body virtualisation

package/dist/components/TablePagination/TablePagination.js

@@ -8,11 +8,22 @@ const TablePagination = ({
   const {
     table
   } = useTableContext();
-  return /* @__PURE__ */ jsx(PaginationWrapper, { "data-testid": "ds-table-pagination", children: /* @__PURE__ */ jsx(Pagination, { hideOnSinglePage: true, pageSize: table.getState().pagination.pageSize, total: table.getRowCount(), onShowSizeChange: (_current, size) => {
-    table.setPageSize(size);
-  }, onChange: (page) => {
-    table.setPageIndex(page - 1);
-  }, ...rest }) });
+  return /* @__PURE__ */ jsx(PaginationWrapper, { "data-testid": "ds-table-pagination", children: /* @__PURE__ */ jsx(
+    Pagination,
+    {
+      hideOnSinglePage: true,
+      ...rest,
+      total: table.getRowCount(),
+      onShowSizeChange: (_current, size) => {
+        table.setPageSize(size);
+      },
+      onChange: (page) => {
+        table.setPageIndex(page - 1);
+      },
+      pageSize: table.getState().pagination.pageSize,
+      current: table.getState().pagination.pageIndex + 1
+    }
+  ) });
 };
 export {
   TablePagination

package/dist/hooks/useTable.js

@@ -137,6 +137,39 @@ const useTable = ({
     initialState: paginationInitialState,
     ...paginationProps
   } = getPaginationConfig(!infiniteScroll && pagination);
+  const manualPaginationConfig = hasPagination && typeof pagination === "object" && pagination.total !== void 0 && pagination.total > data.length ? pagination : void 0;
+  const isManualPagination = !!manualPaginationConfig;
+  const paginationTotal = typeof pagination === "object" ? pagination.total : void 0;
+  const consumerPageIndex = (manualPaginationConfig?.current ?? 1) - 1;
+  const consumerPageSize = manualPaginationConfig?.pageSize ?? 10;
+  const [manualPagination, setManualPagination] = useState({
+    pageIndex: consumerPageIndex,
+    pageSize: consumerPageSize
+  });
+  const manualPaginationRef = useRef(manualPagination);
+  manualPaginationRef.current = manualPagination;
+  useEffect(() => {
+    if (!isManualPagination) {
+      return;
+    }
+    setManualPagination({
+      pageIndex: consumerPageIndex,
+      pageSize: consumerPageSize
+    });
+  }, [consumerPageIndex, consumerPageSize, isManualPagination]);
+  const handleManualPaginationChange = useCallback((updater) => {
+    if (!manualPaginationConfig) {
+      return;
+    }
+    const prev = manualPaginationRef.current;
+    const next = typeof updater === "function" ? updater(prev) : updater;
+    manualPaginationRef.current = next;
+    setManualPagination(next);
+    if (next.pageSize !== prev.pageSize) {
+      manualPaginationConfig.onShowSizeChange?.(next.pageIndex + 1, next.pageSize);
+    }
+    manualPaginationConfig.onChange?.(next.pageIndex + 1, next.pageSize);
+  }, [manualPaginationConfig]);
   const getSubRows = useCallback((row) => {
     return row[childrenColumnName];
   }, [childrenColumnName]);
@@ -162,6 +195,14 @@ const useTable = ({
     getPaginationRowModel: hasPagination ? getPaginationRowModel() : void 0,
     getExpandedRowModel: expandable ? getExpandedRowModel() : void 0,
     getGroupedRowModel: getGroupedRowModel(),
+    // Server-side paging: page against the server total and don't slice the local page.
+    // Set these ONLY in manual mode — passing `onPaginationChange: undefined` in client mode
+    // overrides TanStack's default internal state-updater, which freezes page/size changes.
+    ...isManualPagination ? {
+      manualPagination: true,
+      rowCount: manualPaginationConfig.total,
+      onPaginationChange: handleManualPaginationChange
+    } : {},
     onRowSelectionChange: handleSelectionChange,
     // Swallow TanStack's expansion writes only when the consumer is the source
     // of truth (controlled via `expandable.expandedRowKeys`). For uncontrolled
@@ -201,9 +242,22 @@ const useTable = ({
       // TanStack keeps and manages its own internal state.
       ...isExpansionControlled ? {
         expanded: expandedKeys
+      } : {},
+      // Server-side paging: driven by the local responsive copy (seeded from / synced to the
+      // consumer's current/pageSize), so the controls react immediately to user interaction.
+      ...isManualPagination ? {
+        pagination: manualPagination
       } : {}
     }
   });
+  const previousSearchQuery = useRef(searchQuery);
+  useEffect(() => {
+    if (previousSearchQuery.current === searchQuery) {
+      return;
+    }
+    previousSearchQuery.current = searchQuery;
+    table.setPageIndex(0);
+  }, [searchQuery]);
   return {
     table,
     paginationProps,
@@ -214,7 +268,9 @@ const useTable = ({
     setSearchQuery,
     handleSearchClear,
     hasBuiltInSearch,
-    totalDataCount: data.length
+    // Header-counter source: prefer the declared server total, fall back to the rows we hold.
+    // (A consumer `dataSourceTotalCount` prop still wins — it is spread over this in Table.tsx.)
+    totalDataCount: paginationTotal ?? data.length
   };
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-table-new",
-  "version": "1.4.5",
+  "version": "1.5.1",
   "description": "TableNew UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -80,5 +80,5 @@
     "react-intl": ">= 3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "d8c64070f58f14e3fb1bfbcbf00d1e3b8fd51eb8"
+  "gitHead": "190c325eb1de36751984fd1a5a4674669a1311a3"
 }