diff --git a/components/table/demo/local-data.md b/components/table/demo/local-data.md
new file mode 100644
index 0000000000..873c587e89
--- /dev/null
+++ b/components/table/demo/local-data.md
@@ -0,0 +1,82 @@
+# 外界控制数据
+
+- order: 11
+
+由父元素控制自身数据展示。
+
+---
+
+````jsx
+var Table = antd.Table;
+var columns = [{
+ title: '姓名',
+ dataIndex: 'name',
+ render: function(text) {
+ return {text};
+ }
+}, {
+ title: '年龄',
+ dataIndex: 'age'
+}, {
+ title: '住址',
+ dataIndex: 'address'
+}];
+var data1 = [{
+ name: '胡彦斌',
+ age: 32,
+ address: '西湖区湖底公园1号'
+}, {
+ name: '胡彦祖',
+ age: 42,
+ address: '西湖区湖底公园1号'
+}, {
+ name: '李大嘴',
+ age: 32,
+ address: '西湖区湖底公园1号'
+}];
+var data2 = [{
+ name: '胡彦斌2',
+ age: 32,
+ address: '西湖区湖底公园2号'
+}, {
+ name: '胡彦祖2',
+ age: 42,
+ address: '西湖区湖底公园2号'
+}, {
+ name: '李大嘴2',
+ age: 32,
+ address: '西湖区湖底公园2号'
+}];
+
+
+
+var App = React.createClass({
+ getInitialState() {
+ return {
+ data: []
+ };
+ },
+ handleClick1() {
+ this.setState({
+ data: data1
+ });
+ },
+ handleClick2() {
+ this.setState({
+ data: data2
+ });
+ },
+ render() {
+ return
+
+
+
+
+
;
+ }
+})
+
+React.render(
+, document.getElementById('components-table-demo-local-data'));
+````
+
diff --git a/components/table/index.jsx b/components/table/index.jsx
index b3dbe609c2..056f1fadbd 100644
--- a/components/table/index.jsx
+++ b/components/table/index.jsx
@@ -42,8 +42,9 @@ var AntTable = React.createClass({
selectedRowKeys: [],
// only for remote
data: [],
+ dataSource: this.props.dataSource,
filters: {},
- loading: !this.isLocalDataSource(),
+ loading: false,
sortColumn: '',
sortOrder: '',
sorter: null,
@@ -69,25 +70,23 @@ var AntTable = React.createClass({
},
componentWillReceiveProps(nextProps) {
+ let newState = {};
if (('pagination' in nextProps) && nextProps.pagination !== false) {
- this.setState({
- pagination: objectAssign({}, this.state.pagination, nextProps.pagination)
- });
+ newState.pagination = objectAssign({}, this.state.pagination, nextProps.pagination);
}
- if (!this.isLocalDataSource()) {
- // 外界只有 dataSource 的变化会触发请请求
- if (nextProps.dataSource !== this.props.dataSource) {
- this.setState({
- selectedRowKeys: [],
- loading: true
- }, this.fetch);
- }
+ // 外界只有 dataSource 的变化会触发新请求
+ if ('dataSource' in nextProps &&
+ nextProps.dataSource !== this.props.dataSource) {
+ newState = {
+ selectedRowKeys: [],
+ dataSource: nextProps.dataSource,
+ loading: true
+ };
}
if (nextProps.columns !== this.props.columns) {
- this.setState({
- filters: {}
- });
+ newState.filters = {};
}
+ this.setState(newState, this.fetch);
},
hasPagination(pagination) {
@@ -98,11 +97,11 @@ var AntTable = React.createClass({
},
isLocalDataSource() {
- return Array.isArray(this.props.dataSource);
+ return Array.isArray(this.state.dataSource);
},
getRemoteDataSource() {
- return this.props.dataSource;
+ return this.state.dataSource;
},
toggleSortOrder(order, column) {
@@ -425,7 +424,7 @@ var AntTable = React.createClass({
getLocalData() {
let state = this.state;
- let data = this.props.dataSource;
+ let data = this.state.dataSource;
// 排序
if (state.sortOrder && state.sorter) {
data = data.sort(state.sorter);