Document using Table in TypeScript (#4568)

* Allow any valid ReactElement as Table.Column

* Document using Table in TypeScript

components/table/demo/jsx.md

@@ -9,10 +9,14 @@ title:
 
 使用 JSX 风格的 API（2.5.0 以后引入）
 
+> 这个只是一个描述 `columns` 的语法糖，所以你不能去 compose `Column` 和 `ColumnGroup`。
+
 ## en-US
 
 Using JSX style API (introduced in 2.5.0)
 
+> Since this is just a syntax sugar for the prop `columns`, so that you can't compose `Column` and `ColumnGroup`.
+
 ````jsx
 import { Table, Icon } from 'antd';
 

components/table/index.en-US.md

@@ -120,6 +120,40 @@ Properties for selection.
 | onSelect | callback that is called when select/deselect one row | Function(record, selected, selectedRows) |   -   |
 | onSelectAll | callback that is called when select/deselect all | Function(selected, selectedRows, changeRows) |   -   |
 
+## Using in TypeScript
+
+```jsx
+import { Table } from 'antd';
+import { TableColumnConfig } from 'antd/lib/table/Table';
+
+interface IUser {
+  key: number,
+  name: string;
+}
+
+const columns: TableColumnConfig<IUser>[] = [{
+  key: 'name',
+  title: 'Name',
+  dataIndex: 'name',
+}];
+
+const data: IUser[] = [{
+  key: 0,
+  name: 'Jack',
+}];
+
+class UserTable extends Table<IUser> {}
+
+<UserTable columns={columns} dataSource={data} />
+
+// Use JSX style API
+class NameColumn extends Table.Column<IUser> {}
+
+<UserTable dataSource={data}>
+  <NameColumn key="name" title="Name" dataIndex="name" />
+</UserTable>
+```
+
 ## Note
 
 According to [React documentation](http://facebook.github.io/react/docs/multiple-components.html#dynamic-children), every child in array should be assigned a unique key. The value inside `dataSource` and `columns` should follow this in Table, and `dataSource[i].key` would be treated as key value defaultly for `dataSource`.

components/table/index.zh-CN.md

@@ -121,6 +121,39 @@ const columns = [{
 | onSelect | 用户手动选择/取消选择某列的回调         | Function(record, selected, selectedRows) |   -   |
 | onSelectAll | 用户手动选择/取消选择所有列的回调    | Function(selected, selectedRows, changeRows) |   -   |
 
+## 在 TypeScript 中使用
+
+```jsx
+import { Table } from 'antd';
+import { TableColumnConfig } from 'antd/lib/table/Table';
+
+interface IUser {
+  key: number,
+  name: string;
+}
+
+const columns: TableColumnConfig<IUser>[] = [{
+  key: 'name',
+  title: 'Name',
+  dataIndex: 'name',
+}];
+
+const data: IUser[] = [{
+  key: 0,
+  name: 'Jack',
+}];
+
+class UserTable extends Table<IUser> {}
+<UserTable columns={columns} dataSource={data} />
+
+// 使用 JSX 风格的 API
+class NameColumn extends Table.Column<IUser> {}
+
+<UserTable dataSource={data}>
+  <NameColumn key="name" title="Name" dataIndex="name" />
+</UserTable>
+```
+
 ## 注意
 
 按照 React 的[规范](http://facebook.github.io/react/docs/multiple-components.html#dynamic-children)，所有的组件数组必须绑定 key。在 Table 中，`dataSource` 和 `columns` 里的数据值都需要指定 `key` 值。对于 `dataSource` 默认将每列数据的 `key` 属性作为唯一的标识。

components/table/util.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import assign from 'object-assign';
-import Column from './Column';
 import ColumnGroup from './ColumnGroup';
 
 export function flatArray(data: Object[] = [], childrenName = 'children') {
@@ -32,7 +31,7 @@ export function treeMap(tree: Object[], mapper: Function, childrenName = 'childr
 export function normalizeColumns(elements) {
   const columns: any[] = [];
   React.Children.forEach(elements, (element: React.ReactElement<any>) => {
-    if (!isColumnElement(element)) {
+    if (!React.isValidElement(element)) {
       return;
     }
     const column = assign({}, element.props);
@@ -46,7 +45,3 @@ export function normalizeColumns(elements) {
   });
   return columns;
 }
-
-function isColumnElement(element) {
-  return element && (element.type === Column || element.type === ColumnGroup);
-}