Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Flipping table to automatically scroll to the top #18726

Merged
merged 2 commits into from Sep 26, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
23 changes: 19 additions & 4 deletions 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';
Expand All @@ -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,
Expand Down Expand Up @@ -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;

Expand Down Expand Up @@ -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[]) => {
Expand Down Expand Up @@ -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,
});
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -1258,6 +1272,7 @@ export default class Table<T> extends React.Component<TableProps<T>, TableState<

return (
<RcTable
ref={this.rcTable}
key="table"
expandIcon={this.renderExpandIcon(prefixCls)}
{...restProps}
Expand Down
10 changes: 10 additions & 0 deletions components/table/__tests__/Table.pagination.test.js
Expand Up @@ -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();
Expand Down
10 changes: 9 additions & 1 deletion components/table/index.en-US.md
Expand Up @@ -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) | | |
Expand Down Expand Up @@ -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 |
Expand Down
12 changes: 10 additions & 2 deletions components/table/index.zh-CN.md
Expand Up @@ -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) | | |
Expand Down Expand Up @@ -143,7 +143,7 @@ const columns = [
| sorter | 排序函数,本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction),需要服务端排序可设为 true | Function\|boolean | - | |
| sortOrder | 排序的受控属性,外界可用此控制列的排序,可设置为 `'ascend'` `'descend'` `false` | boolean\|string | - | |
| sortDirections | 支持的排序方式,取值为 `'ascend'` `'descend'` | Array | `['ascend', 'descend']` | 3.15.2 |
| title | 列头显示文字(函数用法 `3.10.0` 后支持) | ReactNode\|({ sortOrder, filters }) => ReactNode | - | |
| title | 列头显示文字(函数用法 `3.10.0` 后支持) | ReactNode\|({ sortOrder, filters }) => ReactNode | - | |
| width | 列宽度([指定了也不生效?](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)) | string\|number | - | |
| onCell | 设置单元格属性 | Function(record, rowIndex) | - | |
| onFilter | 本地模式下,确定筛选的运行函数 | Function | - | |
Expand Down Expand Up @@ -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

| 参数 | 说明 | 类型 | 默认值 | 版本 |
Expand Down
6 changes: 5 additions & 1 deletion components/table/interface.tsx
Expand Up @@ -187,7 +187,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;
Expand Down