diff --git a/components/table/demo/jsx.md b/components/table/demo/jsx.md index 38a52dccfd..61db119738 100644 --- a/components/table/demo/jsx.md +++ b/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'; diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index 2f9da8c1f4..43b9212df0 100644 --- a/components/table/index.en-US.md +++ b/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[] = [{ + key: 'name', + title: 'Name', + dataIndex: 'name', +}]; + +const data: IUser[] = [{ + key: 0, + name: 'Jack', +}]; + +class UserTable extends Table {} + + + +// Use JSX style API +class NameColumn extends Table.Column {} + + + + +``` + ## 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`. diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index 398886fe73..c3bb542dd7 100644 --- a/components/table/index.zh-CN.md +++ b/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[] = [{ + key: 'name', + title: 'Name', + dataIndex: 'name', +}]; + +const data: IUser[] = [{ + key: 0, + name: 'Jack', +}]; + +class UserTable extends Table {} + + +// 使用 JSX 风格的 API +class NameColumn extends Table.Column {} + + + + +``` + ## 注意 按照 React 的[规范](http://facebook.github.io/react/docs/multiple-components.html#dynamic-children),所有的组件数组必须绑定 key。在 Table 中,`dataSource` 和 `columns` 里的数据值都需要指定 `key` 值。对于 `dataSource` 默认将每列数据的 `key` 属性作为唯一的标识。 diff --git a/components/table/util.tsx b/components/table/util.tsx index ebd1abdb1a..1ebade915f 100644 --- a/components/table/util.tsx +++ b/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) => { - 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); -}