Merge branch 'feature' into feat/19007

components/table/Table.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable prefer-spread */
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import omit from 'omit.js';
 import RcTable, { INTERNAL_COL_DEFINE } from 'rc-table';
 import * as PropTypes from 'prop-types';
@@ -14,6 +13,7 @@ import Column from './Column';
 import ColumnGroup from './ColumnGroup';
 import createBodyRow from './createBodyRow';
 import { flatArray, treeMap, flatFilter, normalizeColumns } from './util';
+import scrollTo from '../_util/scrollTo';
 import {
   TableProps,
   TableSize,
@@ -136,8 +136,11 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
 
   row: React.ComponentType<any>;
 
+  rcTable: React.RefObject<any>;
+
   constructor(props: TableProps<T>) {
     super(props);
+    this.rcTable = React.createRef();
 
     const { expandedRowRender, columns = [] } = props;
 
@@ -498,11 +501,21 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
 
   generatePopupContainerFunc = (getPopupContainer: TableProps<T>['getPopupContainer']) => {
     const { scroll } = this.props;
+    const table = this.rcTable.current;
     if (getPopupContainer) {
       return getPopupContainer;
     }
     // Use undefined to let rc component use default logic.
-    return scroll ? () => ReactDOM.findDOMNode(this) as HTMLElement : undefined;
+    return scroll && table ? () => table.tableNode : undefined;
+  };
+
+  scrollToFirstRow = () => {
+    const { scroll } = this.props;
+    if (scroll && scroll.scrollToFirstRowOnChange !== false) {
+      scrollTo(0, {
+        getContainer: () => this.rcTable.current.bodyTable,
+      });
+    }
   };
 
   handleFilter = (column: ColumnProps<T>, nextFilters: string[]) => {
@@ -556,6 +569,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
     }
 
     this.setState(newState, () => {
+      this.scrollToFirstRow();
       this.store.setState({
         selectionDirty: false,
       });
@@ -747,7 +761,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
         current: this.state.pagination.current,
       };
     }
-    this.setState(newState);
+    this.setState(newState, () => this.scrollToFirstRow());
 
     this.store.setState({
       selectionDirty: false,
@@ -823,7 +837,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
 
     // Controlled
     if (this.getSortOrderColumns().length === 0) {
-      this.setState(newState);
+      this.setState(newState, () => this.scrollToFirstRow());
     }
 
     const { onChange } = this.props;
@@ -1259,6 +1273,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<
 
     return (
       <RcTable
+        ref={this.rcTable}
         key="table"
         expandIcon={this.renderExpandIcon(prefixCls)}
         {...restProps}

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

@@ -70,6 +70,16 @@ describe('Table.pagination', () => {
     expect(renderedNames(wrapper)).toEqual(['Jack']);
   });
 
+  // TODO
+  it('should scroll to first row when page change', () => {
+    const wrapper = mount(createTable({ scroll: { y: 20 } }));
+
+    wrapper
+      .find('Pager')
+      .last()
+      .simulate('click');
+  });
+
   it('fires change event', () => {
     const handleChange = jest.fn();
     const handlePaginationChange = jest.fn();

components/table/index.en-US.md

@@ -79,7 +79,7 @@ const columns = [
 | rowClassName | Row's className | Function(record, index):string | - |  |
 | rowKey | Row's unique key, could be a string or function that returns a string | string\|Function(record):string | `key` |  |
 | rowSelection | Row selection [config](#rowSelection) | object | null |  |
-| scroll | Set horizontal or vertical scrolling, can also be used to specify the width and height of the scroll area, could be number, percent value, `true` and ['max-content'](https://developer.mozilla.org/en-US/docs/Web/CSS/width) | { x: number \| true, y: number } | - |  |
+| scroll | Whether the table can be scrollable, [config](#scroll) | object | - |  |
 | showHeader | Whether to show table header | boolean | `true` |  |
 | size | Size of table | `default` \| `middle` \| `small` | `default` |  |
 | title | Table title renderer | Function(currentPageData) |  |  |
@@ -180,6 +180,14 @@ Properties for row selection.
 | onSelectAll | Callback executed when select/deselect all rows | Function(selected, selectedRows, changeRows) | - |  |
 | onSelectInvert | Callback executed when row selection is inverted | Function(selectedRows) | - |  |
 
+### scroll
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| x | Set horizontal scrolling, can also be used to specify the width and height of the scroll area, could be number, percent value, true and ['max-content'](https://developer.mozilla.org/zh-CN/docs/Web/CSS/width#max-content) | number \| true | - |  |
+| y | Set vertical scrolling, can also be used to specify the width and height of the scroll area, could be number, percent value, true and ['max-content'](https://developer.mozilla.org/zh-CN/docs/Web/CSS/width#max-content) | number \| true | - |  |
+| scrollToFirstRowOnChange | Whether to scroll to the top of the table when paging, sorting, filtering changes | boolean | - | 3.24.0 |
+
 ### selection
 
 | Property | Description | Type | Default | Version |

components/table/index.zh-CN.md

@@ -84,7 +84,7 @@ const columns = [
 | rowClassName | 表格行的类名 | Function(record, index):string | - |  |
 | rowKey | 表格行 key 的取值，可以是字符串或一个函数 | string\|Function(record):string | 'key' |  |
 | rowSelection | 表格行是否可选择，[配置项](#rowSelection) | object | null |  |
-| scroll | 设置横向或纵向滚动，也可用于指定滚动区域的宽和高，可以设置为像素值，百分比，`true` 和 ['max-content'](https://developer.mozilla.org/zh-CN/docs/Web/CSS/width#max-content) | { x: number \| true, y: number } | - |  |
+| scroll | 表格是否可滚动，[配置项](#scroll) | object | - |  |
 | showHeader | 是否显示表头 | boolean | true |  |
 | size | 表格大小 | default \| middle \| small | default |  |
 | title | 表格标题 | Function(currentPageData) |  |  |
@@ -185,6 +185,14 @@ const columns = [
 | onSelectAll | 用户手动选择/取消选择所有行的回调 | Function(selected, selectedRows, changeRows) | - |  |
 | onSelectInvert | 用户手动选择反选的回调 | Function(selectedRows) | - |  |
 
+### scroll
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| x | 设置横向滚动，也可用于指定滚动区域的宽和高，可以设置为像素值，百分比，true 和 ['max-content'](https://developer.mozilla.org/zh-CN/docs/Web/CSS/width#max-content) | number \| true | - |  |
+| y | 设置纵向滚动，也可用于指定滚动区域的宽和高，可以设置为像素值，百分比，true 和 ['max-content'](https://developer.mozilla.org/zh-CN/docs/Web/CSS/width#max-content) | number \| true | - |  |
+| scrollToFirstRowOnChange | 当分页、排序、筛选变化后是否滚动到表格顶部 | boolean | - | 3.24.0 |
+
 ### selection
 
 | 参数     | 说明                       | 类型                        | 默认值 | 版本 |

components/table/interface.tsx

@@ -191,7 +191,11 @@ export interface TableProps<T> {
   showHeader?: boolean;
   footer?: (currentPageData: T[]) => React.ReactNode;
   title?: (currentPageData: T[]) => React.ReactNode;
-  scroll?: { x?: boolean | number | string; y?: boolean | number | string };
+  scroll?: {
+    x?: boolean | number | string;
+    y?: boolean | number | string;
+    scrollToFirstRowOnChange?: boolean;
+  };
   childrenColumnName?: string;
   bodyStyle?: React.CSSProperties;
   className?: string;