mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
docs: fix table demo format
This commit is contained in:
Benjy Cui
parent
0b3186696c
commit
63941ae665
@ -5,12 +5,6 @@ title:
|
||||
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 效果。开发者可以自行接入其他数据处理方式。
|
||||
@ -19,6 +13,12 @@ This example shows how to fetch and present data from remote server, and how to
|
||||
|
||||
**注意，此示例使用 [模拟接口](https://randomuser.me)，展示数据可能不准确，请打开网络面板查看请求。**
|
||||
|
||||
## 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.**
|
||||
|
||||
````jsx
|
||||
import { Table } from 'antd';
|
||||
import reqwest from 'reqwest';
|
||||
|
||||
@ -5,14 +5,14 @@ title:
|
||||
zh-CN: 基本用法
|
||||
---
|
||||
|
||||
## en-US
|
||||
|
||||
Simple table with operations.
|
||||
|
||||
## zh-CN
|
||||
|
||||
简单的表格，最后一列是各种操作。
|
||||
|
||||
## en-US
|
||||
|
||||
Simple table with operations.
|
||||
|
||||
````jsx
|
||||
import { Table, Icon } from 'antd';
|
||||
|
||||
|
||||
@ -5,14 +5,14 @@ title:
|
||||
zh-CN: 基本用法
|
||||
---
|
||||
|
||||
## en-US
|
||||
|
||||
Add border, title and footer for table.
|
||||
|
||||
## zh-CN
|
||||
|
||||
添加表格边框线，页头和页脚。
|
||||
|
||||
## en-US
|
||||
|
||||
Add border, title and footer for table.
|
||||
|
||||
````jsx
|
||||
import { Table } from 'antd';
|
||||
|
||||
|
||||
@ -5,18 +5,18 @@ title:
|
||||
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 时，设置的表格不会渲染。
|
||||
|
||||
## 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.
|
||||
|
||||
````jsx
|
||||
import { Table } from 'antd';
|
||||
|
||||
|
||||
@ -5,18 +5,18 @@ title:
|
||||
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` 以控制每一层的缩进宽度。
|
||||
|
||||
> 注：暂不支持父子数据递归关联选择。
|
||||
|
||||
## 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.
|
||||
|
||||
````jsx
|
||||
import { Table } from 'antd';
|
||||
|
||||
|
||||
@ -5,14 +5,14 @@ title:
|
||||
zh-CN: 可展开
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
当表格内容较多不能一次性完全展示时。
|
||||
|
||||
## en-US
|
||||
|
||||
When there's too much information to show and the table can't display all at once.
|
||||
|
||||
# zh-CN
|
||||
|
||||
当表格内容较多不能一次性完全展示时。
|
||||
|
||||
````jsx
|
||||
import { Table } from 'antd';
|
||||
|
||||
|
||||
@ -5,6 +5,14 @@ title:
|
||||
zh-CN: 固定头和列
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
适合同时展示有大量数据和数据列。
|
||||
|
||||
> 若列头与内容不对齐，请指定每列宽度 `width`。
|
||||
|
||||
> 建议指定 scroll.x 为固定宽度。
|
||||
|
||||
## en-US
|
||||
|
||||
Suitable for large amounts of data with long columns.
|
||||
@ -13,14 +21,6 @@ Suitable for large amounts of data with long columns.
|
||||
|
||||
> A fixed width for `scroll.x` is recommended.
|
||||
|
||||
# zh-CN
|
||||
|
||||
适合同时展示有大量数据和数据列。
|
||||
|
||||
> 若列头与内容不对齐，请指定每列宽度 `width`。
|
||||
|
||||
> 建议指定 scroll.x 为固定宽度。
|
||||
|
||||
````jsx
|
||||
import { Table } from 'antd';
|
||||
|
||||
|
||||
@ -5,6 +5,14 @@ title:
|
||||
zh-CN: 固定列
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 `scroll.x` 配合使用。
|
||||
|
||||
> 若列头与内容不对齐，请指定每列宽度 `width`。
|
||||
|
||||
> 建议指定 scroll.x 为固定宽度。
|
||||
|
||||
## en-US
|
||||
|
||||
Fix some columns and scroll in other columns. You must set `scoll.x` meanwhile.
|
||||
@ -13,14 +21,6 @@ Fix some columns and scroll in other columns. You must set `scoll.x` meanwhile.
|
||||
|
||||
> A fixed width for `scroll.x` is recommended.
|
||||
|
||||
# zh-CN
|
||||
|
||||
对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 `scroll.x` 配合使用。
|
||||
|
||||
> 若列头与内容不对齐，请指定每列宽度 `width`。
|
||||
|
||||
> 建议指定 scroll.x 为固定宽度。
|
||||
|
||||
````jsx
|
||||
import { Table } from 'antd';
|
||||
|
||||
|
||||
@ -5,18 +5,18 @@ title:
|
||||
zh-CN: 固定表头
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
方便一页内展示大量数据。
|
||||
|
||||
需要指定 column 的 `width` 属性，否则列头和内容可能不对齐。
|
||||
|
||||
## 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` 属性，否则列头和内容可能不对齐。
|
||||
|
||||
````jsx
|
||||
import { Table } from 'antd';
|
||||
|
||||
|
||||
@ -5,18 +5,18 @@ title:
|
||||
zh-CN: 筛选和排序
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
对某一列数据进行筛选，使用列的 `filters` 属性来指定需要筛选菜单的列，`onFilter` 用于筛选当前数据，`filterMultiple` 用于指定多选和单选。
|
||||
|
||||
对某一列数据进行排序，通过指定列的 `sorter` 函数即可启动排序按钮。`sorter: function(a, b) { ... }`， a、b 为比较的两个列数据。
|
||||
|
||||
## 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 为比较的两个列数据。
|
||||
|
||||
````jsx
|
||||
import { Table } from 'antd';
|
||||
|
||||
|
||||
@ -5,14 +5,14 @@ title:
|
||||
zh-CN: 加载中的表格
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
用属性 `loading` 控制表格加载中状态。
|
||||
|
||||
## en-US
|
||||
|
||||
Controll loading states by `loading` property.
|
||||
|
||||
# zh-CN
|
||||
|
||||
用属性 `loading` 控制表格加载中状态。
|
||||
|
||||
````jsx
|
||||
import { Table, Button } from 'antd';
|
||||
|
||||
|
||||
@ -5,14 +5,14 @@ title:
|
||||
zh-CN: 不显示分页
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
传入 pagination 为 false 即可。此时表格将完整显示 dataSource 内的数据，不进行任何分页。
|
||||
|
||||
## en-US
|
||||
|
||||
Set `pagination={false}`, then no data paging and pagination will be shown.
|
||||
|
||||
# zh-CN
|
||||
|
||||
传入 pagination 为 false 即可。此时表格将完整显示 dataSource 内的数据，不进行任何分页。
|
||||
|
||||
````jsx
|
||||
import { Table } from 'antd';
|
||||
|
||||
|
||||
@ -6,14 +6,14 @@ title:
|
||||
zh-CN: 列分页
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
对于列数很多的数据，可以进行横向的分页，通过切换符切换当前展现的列。
|
||||
|
||||
## en-US
|
||||
|
||||
You can split long columns to switchable views.
|
||||
|
||||
# zh-CN
|
||||
|
||||
对于列数很多的数据，可以进行横向的分页，通过切换符切换当前展现的列。
|
||||
|
||||
````jsx
|
||||
import { Table } from 'antd';
|
||||
|
||||
|
||||
@ -5,14 +5,14 @@ title:
|
||||
zh-CN: 分页
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
数据项较多时显示分页。
|
||||
|
||||
## en-US
|
||||
|
||||
when use pagination in table.
|
||||
|
||||
# zh-CN
|
||||
|
||||
数据项较多时显示分页。
|
||||
|
||||
````jsx
|
||||
import { Table } from 'antd';
|
||||
|
||||
|
||||
@ -5,6 +5,16 @@ title:
|
||||
zh-CN: 可控的筛选和排序
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
使用受控属性对筛选和排序状态进行控制。
|
||||
|
||||
> 1. columns 中定义了 fileredValue 和 sortOrder 属性即视为受控模式。
|
||||
|
||||
> 2. 只支持同时对一列进行排序，请保证只有一列的 sortOrder 属性是生效的。
|
||||
|
||||
> 3. 务必指定 `column.key`。
|
||||
|
||||
## en-US
|
||||
|
||||
Controll filters and sorters by `fileredValue` and `sortOrder`.
|
||||
@ -15,16 +25,6 @@ Controll filters and sorters by `fileredValue` and `sortOrder`.
|
||||
|
||||
> 3. `column.key` is required.
|
||||
|
||||
# zh-CN
|
||||
|
||||
使用受控属性对筛选和排序状态进行控制。
|
||||
|
||||
> 1. columns 中定义了 fileredValue 和 sortOrder 属性即视为受控模式。
|
||||
|
||||
> 2. 只支持同时对一列进行排序，请保证只有一列的 sortOrder 属性是生效的。
|
||||
|
||||
> 3. 务必指定 `column.key`。
|
||||
|
||||
````jsx
|
||||
import { Table } from 'antd';
|
||||
|
||||
|
||||
@ -5,13 +5,14 @@ title:
|
||||
zh-CN: 选择和操作
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
选择后进行操作，完成后清空选择，通过 `rowSelection.selectedRowKeys` 来控制选中项。
|
||||
|
||||
## en-US
|
||||
|
||||
To perform operations and clear selections after selecting some rows, use `rowSelection.selectedRowKeys` to control selected rows.
|
||||
|
||||
# zh-CN
|
||||
|
||||
选择后进行操作，完成后清空选择，通过 `rowSelection.selectedRowKeys` 来控制选中项。
|
||||
|
||||
````jsx
|
||||
import { Table, Button } from 'antd';
|
||||
|
||||
@ -5,14 +5,14 @@ title:
|
||||
zh-CN: 选择框属性
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
配置选择框的默认属性。
|
||||
|
||||
## en-US
|
||||
|
||||
Set props to Checkbox or Radio.
|
||||
|
||||
# zh-CN
|
||||
|
||||
配置选择框的默认属性。
|
||||
|
||||
````jsx
|
||||
import { Table } from 'antd';
|
||||
|
||||
|
||||
@ -5,14 +5,14 @@ title:
|
||||
zh-CN: 可选择
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
第一列是联动的选择框。
|
||||
|
||||
## en-US
|
||||
|
||||
Rows can be selectable by making fisrt column as a selectable column.
|
||||
|
||||
# zh-CN
|
||||
|
||||
第一列是联动的选择框。
|
||||
|
||||
````jsx
|
||||
import { Table } from 'antd';
|
||||
|
||||
|
||||
@ -5,14 +5,14 @@ title:
|
||||
zh-CN: 紧凑型
|
||||
---
|
||||
|
||||
## 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';
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user