fix(table): keep rows rendered when pageSizes prop changes at runtime

src/components/Table/Hooks/usePagination.ts

@@ -80,6 +80,12 @@ export default function usePagination(
     }
   );
 
+  // A changed pageSizes prop can orphan the pageSize persisted by Pagination's mount effect
+  const { pageSize, pageSizes } = mergedPagination;
+  if (pageSizes && pageSize !== undefined && !pageSizes.includes(pageSize)) {
+    mergedPagination.pageSize = pageSizes[0];
+  }
+
   // Reset `current` if data length or pageSize changed
   const pages: number[] = mergedPagination.pageSizes!;
   let maxPage: number;

src/components/Table/Table.tsx

@@ -579,6 +579,14 @@ function InternalTable<RecordType extends object = any>(
           );
         }
       }
+
+      // pageSize not in pageSizes: fall back to the first size instead of rendering empty
+      const fallbackPageSize: number = pageSizes[0] ?? DEFAULT_PAGE_SIZE;
+      mergedPagination.pageSize = fallbackPageSize;
+      return mergedData.slice(
+        (currentPage - 1) * fallbackPageSize,
+        currentPage * fallbackPageSize
+      );
     } else {
       if (mergedData.length < total!) {
         if (mergedData.length > pageSize) {

src/components/Table/Tests/Table.pagination.test.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import Enzyme, { mount } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import Table from '../index';
@@ -77,6 +78,27 @@ describe('Table.table-pagination', () => {
     expect(renderedNames(wrapper)).toEqual(['Lola']);
   });
 
+  it('keeps rendering rows when a dynamic pageSizes prop changes value', () => {
+    // act() flushes Pagination's mount effect, which persists the initial size
+    let wrapper;
+    act(() => {
+      wrapper = mount(
+        createTable({
+          dataSource: longData,
+          pagination: { pageSizes: [10] },
+        })
+      );
+    });
+    wrapper.update();
+    expect(renderedNames(wrapper)).toHaveLength(10);
+
+    act(() => {
+      wrapper.setProps({ pagination: { pageSizes: [9] } });
+    });
+    wrapper.update();
+    expect(renderedNames(wrapper)).toHaveLength(9);
+  });
+
   it('should not crash when trigger onChange in render', () => {
     function App() {
       const [page, setPage] = React.useState({