load datasource in table

components/table/demo/ajax.md

@@ -7,4 +7,18 @@
 ---
 
 ````jsx
+var Table = antd.Table;
+var columns = [{
+  title: '姓名',
+  dataIndex: 'name'
+}, {
+  title: '年龄',
+  dataIndex: 'age'
+}, {
+  title: '住址',
+  dataIndex: 'address'
+}];
+
+React.render(<Table columns={columns} dataSource="/components/table/demo/data.json" />
+, document.getElementById('components-table-demo-ajax'));
 ````

components/table/demo/data.json

@@ -0,0 +1,13 @@
+[{
+  "name": "胡彦斌ajax",
+  "age": 32,
+  "address": "西湖区湖底公园1号"
+}, {
+  "name": "胡彦祖ajax",
+  "age": 42,
+  "address": "西湖区湖底公园1号"
+}, {
+  "name": "李大嘴ajax",
+  "age": 32,
+  "address": "西湖区湖底公园1号"
+}]

components/table/index.jsx

@@ -1,12 +1,15 @@
 'use strict';
 
 import React from 'react';
+import jQuery from 'jquery';
 import Table from 'rc-table';
 
 let AntTable = React.createClass({
   getInitialState() {
     return {
-      selectedRowKeys: []
+      selectedRowKeys: [],
+      loading: false,
+      data: []
     };
   },
   getDefaultProps() {
@@ -51,6 +54,32 @@ let AntTable = React.createClass({
     let checkbox = <input type="checkbox" checked={checked} onChange={this.handleSelect} />;
     return checkbox;
   },
+  loadData: function() {
+    if (this.props.dataSource) {
+      this.setState({
+        loading: true
+      });
+      jQuery.ajax({
+        url: this.props.dataSource,
+        success: (result) => {
+          result = result || [];
+          if (this.isMounted()) {
+            this.setState({
+              data: result
+            });
+          }
+        },
+        complete: () => {
+          this.setState({
+            loading: false
+          });
+        }
+      });
+    }
+  },
+  componentDidMount() {
+    this.loadData();
+  },
   render() {
     if (this.props.rowSelection) {
       let checked = this.props.data.every(function(item, i) {
@@ -69,7 +98,7 @@ let AntTable = React.createClass({
         this.props.columns.unshift(selectionColumn);
       }
     }
-    return <Table {...this.props} />;
+    return <Table data={this.state.data} className={this.state.loading ? 'ant-table-loading' : ''} {...this.props} />;
   }
 });
 

style/components/table.less

@@ -35,4 +35,9 @@
   th, td {
     padding: 16px 8px;
   }
+
+  &-loading {
+    opacity: 0.7;
+    min-height: 150px;
+  }
 }

webpack.config.js

@@ -21,7 +21,8 @@ module.exports = {
   },
 
   externals: {
-    react: "React"
+    react: "React",
+    jquery: 'jQuery'
   },
 
   module: {