@synerise/ds-table-new 1.5.0 → 1.5.2

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.5.2](https://github.com/Synerise/synerise-design/compare/@synerise/ds-table-new@1.5.1...@synerise/ds-table-new@1.5.2) (2026-06-27)
+
+**Note:** Version bump only for package @synerise/ds-table-new
+
+## [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

package/dist/Table.types.d.ts

@@ -1,5 +1,5 @@
-import { PaginationProps } from 'antd';
 import { CSSProperties, HTMLAttributes, MouseEvent, MutableRefObject, ReactElement, ReactNode, RefObject } from 'react';
+import { PaginationProps } from '@synerise/ds-pagination';
 import { SearchInputProps } from '@synerise/ds-search';
 import { TooltipProps } from '@synerise/ds-tooltip';
 import { Column, ColumnDef, ColumnMeta, Row, RowData } from '@tanstack/react-table';

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

@@ -4,7 +4,7 @@ import { TableHorizontalScroll } from "../TableHorizontalScroll/TableHorizontalS
 const BaseTableWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "BaseTablestyles__BaseTableWrapper",
   componentId: "sc-1oa5lc2-0"
-})(["", " --table-size:", ";", " position:relative;z-index:1;.ant-pagination .ant-pagination-total-text strong{font-weight:500;}"], (props) => css(["", ""], Object.entries(props.columnSizing || {}).map(([key, value]) => `--${key}-width: ${value}px;`).join("\n")), (props) => !props.isEmpty && props.$size ? `${props.$size}px` : "100%", (props) => !props.$isColumnSizingReady && `opacity: 0;`);
+})(["", " --table-size:", ";", " position:relative;z-index:1;.ds-pagination .ds-pagination-total-text strong{font-weight:500;}"], (props) => css(["", ""], Object.entries(props.columnSizing || {}).map(([key, value]) => `--${key}-width: ${value}px;`).join("\n")), (props) => !props.isEmpty && props.$size ? `${props.$size}px` : "100%", (props) => !props.$isColumnSizingReady && `opacity: 0;`);
 const TableContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "BaseTablestyles__TableContainer",
   componentId: "sc-1oa5lc2-1"

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, ...rest, total: table.getRowCount(), onShowSizeChange: (_current, size) => {
-    table.setPageSize(size);
-  }, onChange: (page) => {
-    table.setPageIndex(page - 1);
-  }, pageSize: table.getState().pagination.pageSize }) });
+  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.5.0",
+  "version": "1.5.2",
   "description": "TableNew UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "Synerise/synerise-design",
@@ -45,7 +45,7 @@
     "@floating-ui/react": "^0.27.16",
     "@synerise/ds-badge": "^1.0.57",
     "@synerise/ds-button": "^1.5.33",
-    "@synerise/ds-checkbox": "^1.2.34",
+    "@synerise/ds-checkbox": "^1.2.35",
     "@synerise/ds-copy-icon": "^1.2.15",
     "@synerise/ds-dropdown": "^1.3.16",
     "@synerise/ds-flag": "^1.0.12",
@@ -55,13 +55,13 @@
     "@synerise/ds-input-number": "^1.2.48",
     "@synerise/ds-loader": "^1.0.17",
     "@synerise/ds-modal": "^1.6.1",
-    "@synerise/ds-pagination": "^1.0.68",
+    "@synerise/ds-pagination": "^1.0.69",
     "@synerise/ds-result": "^1.0.64",
     "@synerise/ds-scrollbar": "^1.5.1",
     "@synerise/ds-search": "^1.5.29",
-    "@synerise/ds-skeleton": "^1.0.58",
+    "@synerise/ds-skeleton": "^1.0.59",
     "@synerise/ds-tag": "^1.4.31",
-    "@synerise/ds-tags": "^1.5.45",
+    "@synerise/ds-tags": "^1.5.46",
     "@synerise/ds-tooltip": "^1.5.3",
     "@synerise/ds-typography": "^1.1.26",
     "@synerise/ds-utils": "^1.10.1",
@@ -80,5 +80,5 @@
     "react-intl": ">= 3.12.0 <= 6.8",
     "styled-components": "^5.3.3"
   },
-  "gitHead": "d71e1daf33593c1e9d8959942a6caa5d8db981fc"
+  "gitHead": "dfd892acc1d02abebcf661db3fb32f0fc4b6c354"
 }