fix: preserve table pagination className (#32131)

close #32130

components/table/Table.tsx

@@ -148,9 +148,11 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
   const tableProps = omit(props, ['className', 'style', 'columns']) as TableProps<RecordType>;
 
   const size = React.useContext(SizeContext);
-  const { locale: contextLocale = defaultLocale, renderEmpty, direction } = React.useContext(
+  const {
-    ConfigContext,
+    locale: contextLocale = defaultLocale,
-  );
+    renderEmpty,
+    direction,
+  } = React.useContext(ConfigContext);
   const mergedSize = customizeSize || size;
   const tableLocale = { ...contextLocale.Table, ...locale } as TableLocale;
   const rawData: readonly RecordType[] = dataSource || EMPTY_LIST;
@@ -263,10 +265,10 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
     tableLocale,
     showSorterTooltip,
   });
-  const sortedData = React.useMemo(() => getSortData(rawData, sortStates, childrenColumnName), [
+  const sortedData = React.useMemo(
-    rawData,
+    () => getSortData(rawData, sortStates, childrenColumnName),
-    sortStates,
+    [rawData, sortStates],
-  ]);
+  );
 
   changeEventInfo.sorter = getSorters();
   changeEventInfo.sorterStates = sortStates;
@@ -432,8 +434,11 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
 
     const renderPagination = (position: string) => (
       <Pagination
-        className={`${prefixCls}-pagination ${prefixCls}-pagination-${position}`}
         {...mergedPagination}
+        className={classNames(
+          `${prefixCls}-pagination ${prefixCls}-pagination-${position}`,
+          mergedPagination.className,
+        )}
         size={paginationSize}
       />
     );

components/table/__tests__/Table.pagination.test.js

@@ -535,4 +535,22 @@ describe('Table.pagination', () => {
     wrapper.find('.ant-pagination-item-2').simulate('click');
     expect(wrapper.find('.ant-pagination-total-text')).toHaveLength(0);
   });
+
+  it('should preserve table pagination className', () => {
+    const wrapper = mount(
+      <Table
+        data={[]}
+        columns={[]}
+        pagination={{
+          className: 'pagination',
+          total: 200,
+          current: 1,
+          pageSize: 10,
+        }}
+      />,
+    );
+    expect(wrapper.find('.ant-pagination').prop('className')).toEqual(
+      'ant-pagination ant-table-pagination ant-table-pagination-right pagination',
+    );
+  });
 });

components/table/__tests__/__snapshots__/Table.pagination.test.js.snap

@@ -230,7 +230,7 @@ exports[`Table.pagination renders pagination correctly 1`] = `
         </div>
       </div>
       <ul
-        class="ant-pagination my-page"
+        class="ant-pagination ant-table-pagination ant-table-pagination-right my-page"
         unselectable="unselectable"
       >
         <li