feat: add table onChange an action param

components/table/Table.tsx

@@ -76,6 +76,7 @@ export interface TableProps<RecordType>
     filters: Record<string, Key[] | null>,
     sorter: SorterResult<RecordType> | SorterResult<RecordType>[],
     extra: TableCurrentDataSource<RecordType>,
+    action: 'paginate' | 'sort' | 'filter',
   ) => void;
   rowSelection?: TableRowSelection<RecordType>;
 
@@ -178,7 +179,11 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
   // ============================ Events =============================
   const changeEventInfo: Partial<ChangeEventInfo<RecordType>> = {};
 
-  const triggerOnChange = (info: Partial<ChangeEventInfo<RecordType>>, reset: boolean = false) => {
+  const triggerOnChange = (
+    info: Partial<ChangeEventInfo<RecordType>>,
+    action: 'paginate' | 'sort' | 'filter',
+    reset: boolean = false,
+  ) => {
     const changeInfo = {
       ...changeEventInfo,
       ...info,
@@ -205,12 +210,18 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
     }
 
     if (onChange) {
-      onChange(changeInfo.pagination!, changeInfo.filters!, changeInfo.sorter!, {
-        currentDataSource: getFilterData(
-          getSortData(rawData, changeInfo.sorterStates!, childrenColumnName),
-          changeInfo.filterStates!,
-        ),
-      });
+      onChange(
+        changeInfo.pagination!,
+        changeInfo.filters!,
+        changeInfo.sorter!,
+        {
+          currentDataSource: getFilterData(
+            getSortData(rawData, changeInfo.sorterStates!, childrenColumnName),
+            changeInfo.filterStates!,
+          ),
+        },
+        action,
+      );
     }
   };
 
@@ -231,6 +242,7 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
         sorter,
         sorterStates,
       },
+      'sort',
       false,
     );
   };
@@ -260,6 +272,7 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
         filters,
         filterStates,
       },
+      'filter',
       true,
     );
   };
@@ -288,9 +301,12 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
 
   // ========================== Pagination ==========================
   const onPaginationChange = (current: number, pageSize: number) => {
-    triggerOnChange({
-      pagination: { ...changeEventInfo.pagination, current, pageSize },
-    });
+    triggerOnChange(
+      {
+        pagination: { ...changeEventInfo.pagination, current, pageSize },
+      },
+      'paginate',
+    );
   };
 
   const [mergedPagination, resetPagination] = usePagination(

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

@@ -363,6 +363,7 @@ describe('Table.filter', () => {
       {
         currentDataSource: [],
       },
+      'filter',
     );
   });
 
@@ -942,6 +943,7 @@ describe('Table.filter', () => {
       {
         currentDataSource: [],
       },
+      'filter',
     );
     expect(wrapper.find('.ant-pagination-item')).toHaveLength(0);
   });
@@ -973,6 +975,7 @@ describe('Table.filter', () => {
       {
         currentDataSource: [],
       },
+      'filter',
     );
   });
 
@@ -1045,6 +1048,7 @@ describe('Table.filter', () => {
         },
       }),
       expect.anything(),
+      'sort',
     );
 
     // Filter it
@@ -1065,6 +1069,7 @@ describe('Table.filter', () => {
         },
       }),
       expect.anything(),
+      'filter',
     );
   });
 

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

@@ -132,6 +132,7 @@ describe('Table.pagination', () => {
           { key: 3, name: 'Jerry' },
         ],
       },
+      'paginate',
     );
 
     expect(handlePaginationChange).toHaveBeenCalledWith(2, 2);
@@ -245,6 +246,7 @@ describe('Table.pagination', () => {
           { key: 3, name: 'Jerry' },
         ],
       },
+      'paginate',
     );
     expect(onPaginationChange).toHaveBeenCalledWith(2, 10);
 

components/table/index.en-US.md

@@ -78,7 +78,7 @@ const columns = [
 | size | Size of table | `default` \| `middle` \| `small` | `default` |
 | summary | Summary content | (currentData) => ReactNode | - |
 | title | Table title renderer | Function(currentPageData) | - |
-| onChange | Callback executed when pagination, filters or sorter is changed | Function(pagination, filters, sorter, extra: { currentDataSource: [] }) | - |
+| onChange | Callback executed when pagination, filters or sorter is changed | Function(pagination, filters, sorter, extra: { currentDataSource: [] }), action: `paginate` \| `sort` \| `filter` | - |
 | onHeaderRow | Set props on per header row | Function(column, index) | - |
 | onRow | Set props on per row | Function(record, index) | - |
 | getPopupContainer | the render container of dropdowns in table | (triggerNode) => HTMLElement | `() => TableHtmlElement` |
@@ -289,6 +289,8 @@ Table total page count usually reduce after filter data, we defaultly return to
 
 You may need to keep current page after filtering when fetch data from remote service, please check [this demo](https://codesandbox.io/s/yuanchengjiazaishuju-ant-design-demo-7y2uf) as workaround.
 
+Also you can use the action param to determine when return to first page.
+
 ### Why Table pagination show size changer?
 
 In order to improve user experience, Pagination show size changer by default when `total >= 50` since `4.1.0`. You can set `showSizeChanger=false` to disable this feature.

components/table/index.zh-CN.md

@@ -83,7 +83,7 @@ const columns = [
 | size | 表格大小 | `default` \| `middle` \| `small` | default |
 | summary | 总结栏 | (currentData) => ReactNode | - |
 | title | 表格标题 | Function(currentPageData) | - |
-| onChange | 分页、排序、筛选变化时触发 | Function(pagination, filters, sorter, extra: { currentDataSource: [] }) | - |
+| onChange | 分页、排序、筛选变化时触发 | Function(pagination, filters, sorter, extra: { currentDataSource: [] }), action: `paginate` \| `sort` \| `filter` | - |
 | onHeaderRow | 设置头部行属性 | Function(column, index) | - |
 | onRow | 设置行属性 | Function(record, index) | - |
 | getPopupContainer | 设置表格内各类浮层的渲染节点，如筛选菜单 | (triggerNode) => HTMLElement | `() => TableHtmlElement` |
@@ -293,6 +293,8 @@ Table 移除了在 v3 中废弃的 `onRowClick`、`onRowDoubleClick`、`onRowMou
 
 如果你在使用远程分页，很可能需要保持当前页面，你可以参照这个 [受控例子](https://codesandbox.io/s/yuanchengjiazaishuju-ant-design-demo-7y2uf) 控制当前页面不变。
 
+您還可以使用操作參數來確定何時返回首頁。
+
 ### 表格分页为何会出现 size 切换器？
 
 自 `4.1.0` 起，Pagination 在 `total` 大于 50 条时会默认显示 size 切换器以提升用户交互体验。如果你不需要该功能，可以通过设置 `showSizeChanger` 为 `false` 来关闭。