diff --git a/components/table/demo/ajax.md b/components/table/demo/ajax.md index 6c9cbcacdc..e4327c54eb 100644 --- a/components/table/demo/ajax.md +++ b/components/table/demo/ajax.md @@ -1,8 +1,18 @@ --- order: 7 -title: 远程加载数据 +title: + en-US: Ajax + zh-CN: 远程加载数据 --- +## en-US + +This example shows how to fetch and present data from remote server, and how to implement filtering and sorting in server side by sending related parameters to server. + +**Note, this example use [Mock API](https://randomuser.me) that you can look up in Network Console.** + +## zh-CN + 这个例子通过简单的 ajax 读取方式，演示了如何从服务端读取并展现数据，具有筛选、排序等功能以及页面 loading 效果。开发者可以自行接入其他数据处理方式。 另外，本例也展示了筛选排序功能如何交给服务端实现，列不需要指定具体的 `onFilter` 和 `sorter` 函数，而是在把筛选和排序的参数发到服务端来处理。 @@ -55,7 +65,7 @@ const Test = React.createClass({ }); }, fetch(params = {}) { - console.log('请求参数：', params); + console.log('params:', params); this.setState({ loading: true }); reqwest({ url: 'http://api.randomuser.me', diff --git a/components/table/demo/basic.md b/components/table/demo/basic.md index ce9697c49e..3513a1a528 100644 --- a/components/table/demo/basic.md +++ b/components/table/demo/basic.md @@ -1,8 +1,16 @@ --- order: 0 -title: 基本用法 +title: + en-US: Basic Usage + zh-CN: 基本用法 --- +## en-US + +Simple table with operations. + +## zh-CN + 简单的表格，最后一列是各种操作。 ````jsx diff --git a/components/table/demo/bordered.md b/components/table/demo/bordered.md index f036706d04..dbfa61cfc5 100644 --- a/components/table/demo/bordered.md +++ b/components/table/demo/bordered.md @@ -1,8 +1,16 @@ --- order: 10 -title: 边框，页头和页脚 +title: + en-US: border, title and footer + zh-CN: 基本用法 --- +## en-US + +Add border, title and footer for table. + +## zh-CN + 添加表格边框线，页头和页脚。 ````jsx diff --git a/components/table/demo/colspan-rowspan.md b/components/table/demo/colspan-rowspan.md index 8cf64607b5..8abdc47ffc 100644 --- a/components/table/demo/colspan-rowspan.md +++ b/components/table/demo/colspan-rowspan.md @@ -1,8 +1,18 @@ --- order: 13 -title: 表格行/列合并 +title: + en-US: colSpan and rowSpan + zh-CN: 表格行/列合并 --- +## en-US + +Table column title supports `colSpan` that set in `column`. + +Table cell supports `colSpan` and `rowSpan` that set in render return object. When each of them is set to `0`, the cell will not be rendered. + +## zh-CN + 表头只支持列合并，使用 column 里的 colSpan 进行设置。 表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。 @@ -10,8 +20,8 @@ title: 表格行/列合并 ````jsx import { Table } from 'antd'; -// 事例表中第四行合并了五列，除了第一列设置 colSpan = 5 外 -// 其他列的第四行 colSpan = 0 (被合并掉，不会渲染) +// In the fifth row, other columns are merged into first column +// by setting it's colSpan to be 0 const renderContent = function (value, row, index) { const obj = { children: value, @@ -50,16 +60,13 @@ const columns = [{ children: value, props: {}, }; - // 第三列的第三行行合并 if (index === 2) { obj.props.rowSpan = 2; } - - // 第三列的第四行被合并没了，设置 rowSpan = 0 直接不用渲染 + // These two are merged into above cell if (index === 3) { obj.props.rowSpan = 0; } - if (index === 4) { obj.props.colSpan = 0; } diff --git a/components/table/demo/expand-children.md b/components/table/demo/expand-children.md index bdd21f1eb5..5f309c5571 100644 --- a/components/table/demo/expand-children.md +++ b/components/table/demo/expand-children.md @@ -1,8 +1,18 @@ --- order: 15 -title: 树形数据展示 +title: + en-US: Tree data + zh-CN: 树形数据展示 --- +## en-US + +Display tree structure data in Table, control the indent width by setting `indentSize`. + +> Note, no support for recursive selection of tree structure data table yet. + +## zh-CN + 表格支持树形数据的展示，可以通过设置 `indentSize` 以控制每一层的缩进宽度。 > 注：暂不支持父子数据递归关联选择。 diff --git a/components/table/demo/expand.md b/components/table/demo/expand.md index 204cf4c53e..d8526be795 100644 --- a/components/table/demo/expand.md +++ b/components/table/demo/expand.md @@ -1,8 +1,16 @@ --- order: 12 -title: 可展开 +title: + en-US: Expandable Row + zh-CN: 可展开 --- +## en-US + +When there's too much information to show and the table can't display all at once. + +# zh-CN + 当表格内容较多不能一次性完全展示时。 ````jsx diff --git a/components/table/demo/fixed-columns-header.md b/components/table/demo/fixed-columns-header.md index 83c5f39213..2a6b82bbda 100644 --- a/components/table/demo/fixed-columns-header.md +++ b/components/table/demo/fixed-columns-header.md @@ -1,14 +1,26 @@ --- order: 18 -title: 固定头和列 +title: + en-US: Fixed Columns and Header + zh-CN: 固定头和列 --- -适合同时展示有大量数据和数据列。 +## en-US + +Suitable for large amounts of data with long columns. + +> Specify the width of each column if header and cell do not align properly. + +> A fixed width for `scroll.x` is recommended. -> 若未指定每列的宽度，则建议指定 scroll.x 为固定宽度。 +# zh-CN + +适合同时展示有大量数据和数据列。 > 若列头与内容不对齐，请指定每列宽度 `width`。 +> 建议指定 scroll.x 为固定宽度。 + ````jsx import { Table } from 'antd'; diff --git a/components/table/demo/fixed-columns.md b/components/table/demo/fixed-columns.md index 2cd50b2a9b..3fc8b60da6 100644 --- a/components/table/demo/fixed-columns.md +++ b/components/table/demo/fixed-columns.md @@ -1,14 +1,26 @@ --- order: 17 -title: 固定列 +title: + en-US: Fixed Columns + zh-CN: 固定列 --- -对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 `scroll.x` 配合使用。 +## en-US + +Fix some columns and scroll in other columns. You must set `scoll.x` meanwhile. + +> Specify the width of each column if header and cell do not align properly. + +> A fixed width for `scroll.x` is recommended. -> 若未指定每列的宽度，则建议指定 scroll.x 为固定宽度。 +# zh-CN + +对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 `scroll.x` 配合使用。 > 若列头与内容不对齐，请指定每列宽度 `width`。 +> 建议指定 scroll.x 为固定宽度。 + ````jsx import { Table } from 'antd'; diff --git a/components/table/demo/fixed-header.md b/components/table/demo/fixed-header.md index 7014cddc56..3ba725250e 100644 --- a/components/table/demo/fixed-header.md +++ b/components/table/demo/fixed-header.md @@ -1,8 +1,18 @@ --- order: 16 -title: 固定表头 +title: + en-US: Fixed Header + zh-CN: 固定表头 --- +## en-US + +Display large amounts of data in scrollable view. + +> Specify the width of each column if header and cell do not align properly. + +# zh-CN + 方便一页内展示大量数据。 需要指定 column 的 `width` 属性，否则列头和内容可能不对齐。 diff --git a/components/table/demo/head.md b/components/table/demo/head.md index 05bde0f6c2..408ab1b087 100644 --- a/components/table/demo/head.md +++ b/components/table/demo/head.md @@ -1,9 +1,19 @@ --- order: 6 -title: 筛选和排序 +title: + en-US: Filter and sorter + zh-CN: 筛选和排序 --- -对某一列数据进行筛选，使用列的 `filter` 属性来指定需要筛选菜单的列，`onFilter` 用于筛选当前数据，`filterMultiple` 用于指定多选和单选。 +## en-US + +Use `filters` to generate filter menu in columns, `onFilter` to determine filtered result, and `filterMultiple` to indicate whether it's multiple or single selection. + +Use `sorter` to make a column sortable. `sorter` can be a function `function(a, b) { ... }` for sorting data locally. + +# zh-CN + +对某一列数据进行筛选，使用列的 `filters` 属性来指定需要筛选菜单的列，`onFilter` 用于筛选当前数据，`filterMultiple` 用于指定多选和单选。 对某一列数据进行排序，通过指定列的 `sorter` 函数即可启动排序按钮。`sorter: function(a, b) { ... }`， a、b 为比较的两个列数据。 @@ -30,8 +40,8 @@ const columns = [{ value: '王', }], }], - // 指定确定筛选的条件函数 - // 这里是名字中第一个字是 value + // specify the condition of filtering result + // here is that finding the name started with `value` onFilter: (value, record) => record.name.indexOf(value) === 0, sorter: (a, b) => a.name.length - b.name.length, }, { @@ -76,8 +86,7 @@ const data = [{ }]; function onChange(pagination, filters, sorter) { - // 点击分页、筛选、排序时触发 - console.log('各类参数是', pagination, filters, sorter); + console.log('params', pagination, filters, sorter); } ReactDOM.render(, mountNode); diff --git a/components/table/demo/loading.md b/components/table/demo/loading.md index 7a6035a7c6..45e36d6724 100644 --- a/components/table/demo/loading.md +++ b/components/table/demo/loading.md @@ -1,8 +1,16 @@ --- order: 14 -title: 加载中的表格 +title: + en-US: Loading + zh-CN: 加载中的表格 --- +## en-US + +Controll loading states by `loading` property. + +# zh-CN + 用属性 `loading` 控制表格加载中状态。 ````jsx diff --git a/components/table/demo/nopagination.md b/components/table/demo/nopagination.md index dcbcfeb950..5022708f82 100644 --- a/components/table/demo/nopagination.md +++ b/components/table/demo/nopagination.md @@ -1,8 +1,16 @@ --- order: 8 -title: 不显示分页 +title: + en-US: No pagination + zh-CN: 不显示分页 --- +## en-US + +Set `pagination={false}`, then no data paging and pagination will be shown. + +# zh-CN + 传入 pagination 为 false 即可。此时表格将完整显示 dataSource 内的数据，不进行任何分页。 ````jsx diff --git a/components/table/demo/paging-columns.md b/components/table/demo/paging-columns.md index 7198cee661..ff9799ba41 100644 --- a/components/table/demo/paging-columns.md +++ b/components/table/demo/paging-columns.md @@ -1,9 +1,17 @@ --- order: 20 -title: 横向滚屏表格 hidden: true +title: + en-US: paging the columns + zh-CN: 列分页 --- +## en-US + +You can split long columns to switchable views. + +# zh-CN + 对于列数很多的数据，可以进行横向的分页，通过切换符切换当前展现的列。 ````jsx diff --git a/components/table/demo/paging.md b/components/table/demo/paging.md index cc2494d8c0..2619320e17 100644 --- a/components/table/demo/paging.md +++ b/components/table/demo/paging.md @@ -1,8 +1,16 @@ --- order: 5 -title: 分页 +title: + en-US: pagination + zh-CN: 分页 --- +## en-US + +when use pagination in table. + +# zh-CN + 数据项较多时显示分页。 ````jsx diff --git a/components/table/demo/reset-filter.md b/components/table/demo/reset-filter.md index f54c612a0a..d6b68982f5 100644 --- a/components/table/demo/reset-filter.md +++ b/components/table/demo/reset-filter.md @@ -1,8 +1,22 @@ --- order: 6 -title: 重置筛选和排序 +title: + en-US: Reset filters and sorters + zh-CN: 可控的筛选和排序 --- +## en-US + +Controll filters and sorters by `fileredValue` and `sortOrder`. + +> 1. Defining `fileredValue` or `sortOrder` means that it is in the controlled mode. + +> 2. Make sure `sortOrder` is assigned for only one column. + +> 3. `column.key` is required. + +# zh-CN + 使用受控属性对筛选和排序状态进行控制。 > 1. columns 中定义了 fileredValue 和 sortOrder 属性即视为受控模式。 diff --git a/components/table/demo/row-selection-and-operation.md b/components/table/demo/row-selection-and-operation.md index 2b02e31c75..7c06a44b64 100644 --- a/components/table/demo/row-selection-and-operation.md +++ b/components/table/demo/row-selection-and-operation.md @@ -1,8 +1,16 @@ --- order: 2 -title: 选择和操作 +title: + en-US: Selection and operation + zh-CN: 选择和操作 --- +## en-US + +To perform operations and clear selections after selecting some rows, use `rowSelection.selectedRowKeys` to control selected rows. + +# zh-CN + 选择后进行操作，完成后清空选择，通过 `rowSelection.selectedRowKeys` 来控制选中项。 ````jsx diff --git a/components/table/demo/row-selection-props.md b/components/table/demo/row-selection-props.md index 045f0522bf..86cc723771 100644 --- a/components/table/demo/row-selection-props.md +++ b/components/table/demo/row-selection-props.md @@ -1,8 +1,16 @@ --- order: 3 -title: 选择框属性 +title: + en-US: Checkbox props + zh-CN: 选择框属性 --- +## en-US + +Set props to Checkbox or Radio. + +# zh-CN + 配置选择框的默认属性。 ````jsx diff --git a/components/table/demo/row-selection.md b/components/table/demo/row-selection.md index 1de2c1315b..c3ebba65e9 100644 --- a/components/table/demo/row-selection.md +++ b/components/table/demo/row-selection.md @@ -1,8 +1,16 @@ --- order: 1 -title: 可选择 +title: + en-US: selection + zh-CN: 可选择 --- +## en-US + +Rows can be selectable by making fisrt column as a selectable column. + +# zh-CN + 第一列是联动的选择框。 ````jsx diff --git a/components/table/demo/size.md b/components/table/demo/size.md index fa7f9cfc71..8247c97163 100644 --- a/components/table/demo/size.md +++ b/components/table/demo/size.md @@ -1,9 +1,17 @@ --- order: 9 -title: 紧凑型 +title: + en-US: size + zh-CN: 紧凑型 --- -紧凑型的列表, 中型列表用于需要数据紧凑展示的情况，小型列表只用于对话框内。 +## en-US + +Two compacted table size: `middle` and `small`, `small` size is used in Modal only. + +# zh-CN + +两种紧凑型的列表，小型列表只用于对话框内。 ````jsx import { Table } from 'antd'; diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md new file mode 100644 index 0000000000..0c6e271461 --- /dev/null +++ b/components/table/index.en-US.md @@ -0,0 +1,124 @@ +--- +category: Components +cols: 1 +type: Views +title: Table +--- + +A table displays rows data. + +## When to use + +- To display a collections of structured data. +- To sort, search, paging, filter data. + +## How to use + +Sepecify `dataSource` of Table to be an array data. + +```jsx +const dataSource = [{ + key: '1', + name: 'Mike', + age: 32, + address: '10 Downing Street' +}, { + key: '2', + name: 'John', + age: 42, + address: '10 Downing Street' +}]; + +const columns = [{ + title: 'Name', + dataIndex: 'name', + key: 'name', +}, { + title: 'Age', + dataIndex: 'age', + key: 'age', +}, { + title: 'Address', + dataIndex: 'address', + key: 'address', +}]; + +
+``` + +## API + +### Table + +| Property | Type | Default | Description | +|---------------|--------------------------|-----------------|--------------| +| rowSelection | row selection [config](#rowSelection) | Object | null | +| pagination | pagination [config](/components/pagination), hide it via setting to `false` | Object | | +| size | size of table: `default` or `small` | String | `default` | +| dataSource | data record array to be rendered | Array | | +| columns | columns of table | Array | - | +| rowKey | get row's key, could be a string or function | String or Function(record, index):string | 'key' | +| rowClassName | get row's className | Function(record, index):string | - | +| expandedRowRender | expanded container render for each row | Function | - | +| defaultExpandedRowKeys | initial expanded row keys | Array | - | +| expandedRowKeys | current expanded rows keys | Array | - | +| onChange | callback that is called when pagination, filters, sorter is changed | Function(pagination, filters, sorter) | | +| loading | loading status of table | Boolean | false | +| locale | i18n text include filter, sort, empty text...etc | Object | filterConfirm: 'Ok'
filterReset: 'Reset'
emptyText: 'No Data'
[Default](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) | +| indentSize | index pixel size of tree data | Number | 15 | +| onRowClick | callback that is called when click a row | Function(record, index) | - | +| bordered | whether to show table border completely | Boolean | false | +| showHeader | whether to show table header | Boolean | true | +| footer | table footer renderer | Function(currentPageData) | | +| title | table title renderer | Function(currentPageData) | | +| scroll | whether table can be scroll in x/y direction, `x` or `y` can be a number that indicated the width and height of table body | Object | - | + +### Column + +One of Property `columns` for descriping column. + +| Property | Type | Default | Description | +|---------------|--------------------------|-----------------|--------------| +| title | title of this column | String or React.Element | - | +| key | key of this column | String | - | +| dataIndex | display field of the data record, could be set like `a.b.c` | String | - | +| render | renderer of table cell, has three params: text, record and index of this row. The render value should be a ReactNode, or a object for [colSpan/rowSpan config](#demo-colspan-rowspan) | Function(text, record, index) {} | - | +| filters | filter menu config | Array | - | +| onFilter | callback that is called when when click confirm filter button | Function | - | +| filterMultiple | whether to select multiple filtered item | Boolean | true | +| filterDropdown | customized filter overlay | React.Element | - | +| sorter | sort function for local sort. If you need sort buttons only, set it `true` | Function or Boolean | - | +| colSpan | colSpan for column title | Number | | +| width | width of this column | String or Number | - | +| className | className of this column | String | - | +| fixed | set column to be fixed: `true`(same as left) `'left'` `'right'` | Boolean or String | false | +| filteredValue | controlled filtered value | Array | - | +| sortOrder | controlled sorted value: `'ascend'` `'descend'` `false` | Boolean or String | - | + +### rowSelection + +Properties for selection. + +| Property | Type | Default | Description | +|---------------|--------------------------|-----------------|--------------| +| type | `checkbox` or `radio` | String | `checkbox` | +| selectedRowKeys | controlled selected row keys | Array | [] | +| onChange | callback that is called when selected rows change | Function(selectedRowKeys, selectedRows) | - | +| getCheckboxProps | get Checkbox or Radio props | Function(record) | - | +| 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) | - | + +## 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`. + +If `dataSource[i].key` is not existed, 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) + +```jsx +// primary key is uid +return
; +// or +return
record.uid} />; +``` diff --git a/components/table/index.md b/components/table/index.zh-CN.md similarity index 93% rename from components/table/index.md rename to components/table/index.zh-CN.md index bd42685a28..58ed3ef507 100644 --- a/components/table/index.md +++ b/components/table/index.zh-CN.md @@ -1,9 +1,8 @@ --- category: Components -chinese: 表格 cols: 1 type: Views -english: Table +title: Table --- 展示行列数据。 @@ -68,12 +67,11 @@ const columns = [{ | locale | 默认文案设置，目前包括排序、过滤、空数据文案 | Object | filterConfirm: '确定'
filterReset: '重置'
emptyText: '暂无数据'
[默认值](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) | | indentSize | 展示树形数据时，每层缩进的宽度，以 px 为单位 | Number | 15 | | onRowClick | 处理行点击事件 | Function(record, index) | - | -| useFixedHeader | 是否固定表头 | Boolean | false | | bordered | 是否展示外边框和列边框 | Boolean | false | | showHeader | 是否显示表头 | Boolean | true | -| footer | 表格底部自定义渲染函数 | Function(currentPageData) | | -| title | 表格头部自定义渲染函数 | Function(currentPageData) | | -| scroll | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度：`{{ x: true, y: 300 }}` | Object | - | +| footer | 表格尾部 | Function(currentPageData) | | +| title | 表格标题 | Function(currentPageData) | | +| scroll | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度：`{{ x: true, y: 300 }}` | Object | - | ### Column