diff --git a/components/table/Table.jsx b/components/table/Table.jsx index 03df56a90..37766b934 100755 --- a/components/table/Table.jsx +++ b/components/table/Table.jsx @@ -99,13 +99,13 @@ export default { }) }, rowSelection: { - handler: (val) => { + handler (val) { if (val && 'selectedRowKeys' in val) { this.store.setState({ selectedRowKeys: val.selectedRowKeys || [], }) - const { rowSelection } = this.props + const { rowSelection } = this if (rowSelection && ( val.getCheckboxProps !== rowSelection.getCheckboxProps )) { diff --git a/components/table/demo/ajax.md b/components/table/demo/ajax.md index 33b67468e..f79464630 100644 --- a/components/table/demo/ajax.md +++ b/components/table/demo/ajax.md @@ -32,7 +32,7 @@ const columns = [{ dataIndex: 'name', sorter: true, width: '20%', - slotScopeName: 'name', + scopedSlots: { customRender: 'name' }, }, { title: 'Gender', dataIndex: 'gender', diff --git a/components/table/demo/index.vue b/components/table/demo/index.vue new file mode 100644 index 000000000..ea92dd7db --- /dev/null +++ b/components/table/demo/index.vue @@ -0,0 +1,96 @@ + diff --git a/components/table/demo/row-selection-and-operation.md b/components/table/demo/row-selection-and-operation.md new file mode 100644 index 000000000..3421c8b1f --- /dev/null +++ b/components/table/demo/row-selection-and-operation.md @@ -0,0 +1,84 @@ + +#### 选择和操作 +选择后进行操作，完成后清空选择，通过 `rowSelection.selectedRowKeys` 来控制选中项。 + + + +#### Selection and operation +To perform operations and clear selections after selecting some rows, use `rowSelection.selectedRowKeys` to control selected rows. + + +```html + + +``` diff --git a/components/table/demo/row-selection-custom.md b/components/table/demo/row-selection-custom.md new file mode 100644 index 000000000..51103301a --- /dev/null +++ b/components/table/demo/row-selection-custom.md @@ -0,0 +1,97 @@ + +#### 自定义选择项 +通过 `rowSelection.selections` 自定义选择项，默认不显示下拉选项，设为 `true` 时显示默认选择项。 + + + +#### Custom selection +Use `rowSelection.selections` custom selections, default no select dropdown, show default selections via setting to `true`. + + +```html + + +``` diff --git a/components/table/demo/row-selection.md b/components/table/demo/row-selection.md new file mode 100644 index 000000000..774a4597a --- /dev/null +++ b/components/table/demo/row-selection.md @@ -0,0 +1,78 @@ + +#### 可选择 +第一列是联动的选择框。 +> 默认点击 checkbox 触发选择行为 + + + +#### selection +Rows can be selectable by making first column as a selectable column. +> selection happens when clicking checkbox defaultly. + + +```html + + +``` diff --git a/components/table/demo/size.md b/components/table/demo/size.md new file mode 100644 index 000000000..4873e5327 --- /dev/null +++ b/components/table/demo/size.md @@ -0,0 +1,60 @@ + +#### 紧凑型 +两种紧凑型的列表，小型列表只用于对话框内。 + + + +#### size +Two compacted table size: `middle` and `small`, `small` size is used in Modal only. + + +```html + + + +``` diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index c7243aa62..599d21aa6 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -1,20 +1,3 @@ ---- -category: Components -cols: 1 -type: Data Display -title: Table ---- - -A table displays rows of data. - -## When To Use - -- To display a collection of structured data. -- To sort, search, paginate, filter data. - -## How To Use - -Specify `dataSource` of Table as an array of data. ```jsx const dataSource = [{ @@ -160,47 +143,12 @@ Properties for row selection. | text | Display text of this selection | string\|React.ReactNode | - | | onSelect | Callback executed when this selection is clicked | Function(changeableRowKeys) | - | -## Using in TypeScript - -```jsx -import { Table } from 'antd'; -import { ColumnProps } from 'antd/lib/table'; - -interface IUser { - key: number, - name: string; -} - -const columns: ColumnProps[] = [{ - 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](https://facebook.github.io/react/docs/lists-and-keys.html#keys), every child in array should be assigned a unique key. The values inside `dataSource` and `columns` should follow this in Table, and `dataSource[i].key` would be treated as key value default for `dataSource`. +The values inside `dataSource` and `columns` should follow this in Table, and `dataSource[i].key` would be treated as key value default for `dataSource`. -If `dataSource[i].key` is not provided, then you should specify the primary key of dataSource value via `rowKey`. If not, warnings like above will show in browser console. - -![](https://os.alipayobjects.com/rmsportal/luLdLvhPOiRpyss.png) +If `dataSource[i].key` is not provided, then you should specify the primary key of dataSource value via `rowKey`. If not, warnings will show in browser console. ```jsx // primary key is uid diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index 5f959537c..f7bf04e39 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -1,21 +1,3 @@ ---- -category: Components -cols: 1 -type: Data Display -title: Table -subtitle: 表格 ---- - -展示行列数据。 - -## 何时使用 - -- 当有大量结构化的数据需要展现时； -- 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。 - -## 如何使用 - -指定表格的数据源 `dataSource` 为一个数组。 ```jsx const dataSource = [{ @@ -84,6 +66,7 @@ const columns = [{ #### onRow 用法 适用于 `onRow` `onHeaderRow` `onCell` `onHeaderCell`。 +遵循Vue [jsx语法](https://github.com/vuejs/babel-plugin-transform-vue-jsx) ```jsx [] = [{ - 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 的规范](https://facebook.github.io/react/docs/lists-and-keys.html#keys)，所有的组件数组必须绑定 key。在 Table 中，`dataSource` 和 `columns` 里的数据值都需要指定 `key` 值。对于 `dataSource` 默认将每列数据的 `key` 属性作为唯一的标识。 +在 Table 中，`dataSource` 和 `columns` 里的数据值都需要指定 `key` 值。对于 `dataSource` 默认将每列数据的 `key` 属性作为唯一的标识。 -如果你的数据没有这个属性，务必使用 `rowKey` 来指定数据列的主键。若没有指定，控制台会出现以下的提示，表格组件也会出现各类奇怪的错误。 - -![](https://os.alipayobjects.com/rmsportal/luLdLvhPOiRpyss.png) +如果你的数据没有这个属性，务必使用 `rowKey` 来指定数据列的主键。若没有指定，控制台会出现缺少key的提示，表格组件也会出现各类奇怪的错误。 ```jsx // 比如你的数据主键是 uid diff --git a/components/vc-table/demo/column-resize.js b/components/vc-table/demo/column-resize.js index 2b2a5afff..9cf57bf94 100644 --- a/components/vc-table/demo/column-resize.js +++ b/components/vc-table/demo/column-resize.js @@ -60,8 +60,12 @@ export default { const columns = this.columns.map((col, index) => ({ ...col, customHeaderCell: (column) => ({ - width: column.width, - onResize: this.handleResize(index), + props: { + width: column.width, + }, + on: { + resize: this.handleResize(index), + }, }), })) diff --git a/examples/components/demo.vue b/examples/components/demo.vue index c919a4222..aa696a145 100644 --- a/examples/components/demo.vue +++ b/examples/components/demo.vue @@ -3,6 +3,7 @@ import * as AllDemo from '../demo' import Header from './header' import zhCN from 'antd/locale-provider/zh_CN' import enUS from 'antd/locale-provider/default' +import _ from 'lodash' export default { render () { const { name } = this.$route.params @@ -28,7 +29,7 @@ export default { const MenuGroup = [] for (const [type, menus] of Object.entries(menuConfig)) { const MenuItems = [] - menus.forEach(({ title, subtitle }) => { + _.sortBy(menus, ['title']).forEach(({ title, subtitle }) => { const linkValue = lang === 'cn' ? [{title}, {subtitle}] : [{title}] diff --git a/examples/demo.js b/examples/demo.js index 063ceb7eb..afd09b0e3 100644 --- a/examples/demo.js +++ b/examples/demo.js @@ -38,3 +38,4 @@ export { default as localeProvider } from 'antd/locale-provider/demo/index.vue' export { default as slider } from 'antd/slider/demo/index.vue' export { default as progress } from 'antd/progress/demo/index.vue' export { default as timeline } from 'antd/timeline/demo/index.vue' +export { default as table } from 'antd/table/demo/index.vue' diff --git a/examples/routes.js b/examples/routes.js index d9670c48e..674f13d15 100644 --- a/examples/routes.js +++ b/examples/routes.js @@ -3,7 +3,7 @@ const AsyncComp = () => { const hashs = window.location.hash.split('/') const d = hashs[hashs.length - 1] return { - component: import(`../components/grid/demo/${d}`), + component: import(`../components/table/demo/${d}`), } } export default [