Skip to content

Commit

Permalink
docs(*): balloon & table
Browse files Browse the repository at this point in the history
  • Loading branch information
youluna committed May 14, 2021
1 parent 4bf0b72 commit 85600e1
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 26 deletions.
4 changes: 2 additions & 2 deletions docs/balloon/demo/tooltip.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@ const Tooltip = Balloon.Tooltip;
const dataSource = [{
name: 'Li Bai',
intro: `Li Bai (Chinese: 李白; pinyin: Lǐ Bái; 701–762), also known as Li Bo, courtesy name Taibai (Chinese: 太白), art name Qinglian Jushi (Chinese: 青蓮居士), was a Chinese poet acclaimed from his own day to the present as a genius and a romantic figure who took traditional poetic forms to new heights.`,
id: 100306660940,
id: 100360940,
}, {
name: 'William Shakespeare',
intro: `William Shakespeare (bapt. 26 April 1564 – 23 April 1616) was an English playwright, poet, and actor, widely regarded as the greatest writer in the English language and the world's greatest dramatist. He is often called England's national poet and the "Bard of Avon" (or simply "the Bard").`,
id: 100306660941,
id: 100360941,
}];
const render = (value, index, record) => {
const intro = <div style={{overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap'}}>{value}</div>;
Expand Down
49 changes: 25 additions & 24 deletions docs/table/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,31 @@

建议用户在新的页面中使用 `Table.StickyLock`,如果没有深度的样式定制(例如选择到 `.next-table-lock-left` 这一层级),也可以把现有的 `Table` 升级到 `Table.StickyLock`


## FAQ

### `rowSelection` 模式,选择任意一个都是全选?

给定的数据源中的属性需要有一个唯一标示该条数据的主键,默认值为id,可通过 `primaryKey` 更改 e.g.`<Table primaryKey='myId'></Table>`

### `rowSelection` 模式,如何设置默认选中/禁用?

通过受控模式,设置 `rowSelection.selectedRowKeys` 可以默认选中选中;通过 `rowSelection.getProps` 可以自定义每一行checkbox的props,具体可搜索demo`选择可控`

### `rowSelection` 模式,如何屏蔽全选按钮/自定义全选按钮?

通过`rowSelection.titleProps` 可以自定义选择列的表头的props,可通过 `style: {display: 'none'}` 屏蔽全选按钮;此外还有 `rowSelection.titleAddons` `rowSelection.columnProps`等属性,具体用法可搜索demo `可选择`

### 支持行的双击事件/设置每一行的样式?处理整行点击?

通过 `rowProps` 属性,重写行支持的原生属性,比如`className style onDoubleClick`等;通过 `onRowClick` 处理整行点击。

### 已知问题

- 分组 Table 不支持在 Hover 状态和选中状态下显示背景色,无法合并单元格;
- 分组 Table ,`<Table fixedHeader/>` 没有效果,header不会固定, `<Table fixedHeader stickyHeader />` 才有效果,header可以sticky到页面上


## 如何使用

基本的 Table 包含行和列,使用 Table.Column 来定义列的信息,使用传入的 dataSource 属性数据来创建行。
Expand All @@ -42,7 +67,6 @@ ReactDOM.render(
<Table.Column title="Time" dataIndex="time"/>
</Table.StickyLock>, mountNode);
```

### 列配置

Table.Column 提供了非常多的配置属性用于自定义列,最常见的就是使用`cell`自定义单元格的渲染逻辑. 其他的配置选项可以参考下面的 Table.Column 的 API。
Expand Down Expand Up @@ -176,26 +200,3 @@ ReactDOM.render(
| 参数 | 说明 | 类型 | 默认值 |
| ---- | ------ | ------------------------------- | -------- |
| cell | 行渲染的逻辑 | ReactElement/ReactNode/Function | () => '' |

## FAQ

### `rowSelection` 模式,选择任意一个都是全选?

给定的数据源中的属性需要有一个唯一标示该条数据的主键,默认值为id,可通过 `primaryKey` 更改 e.g.`<Table primaryKey='myId'></Table>`

### `rowSelection` 模式,如何设置默认选中/禁用?

通过受控模式,设置 `rowSelection.selectedRowKeys` 可以默认选中选中;通过 `rowSelection.getProps` 可以自定义每一行checkbox的props,具体可搜索demo`选择可控`

### `rowSelection` 模式,如何屏蔽全选按钮/自定义全选按钮?

通过`rowSelection.titleProps` 可以自定义选择列的表头的props,可通过 `style: {display: 'none'}` 屏蔽全选按钮;此外还有 `rowSelection.titleAddons` `rowSelection.columnProps`等属性,具体用法可搜索demo `可选择`

### 支持行的双击事件/设置每一行的样式?处理整行点击?

通过 `rowProps` 属性,重写行支持的原生属性,比如`className style onDoubleClick`等;通过 `onRowClick` 处理整行点击。

### 已知问题

- 分组 Table 不支持在 Hover 状态和选中状态下显示背景色,无法合并单元格;
- Table 锁列特性下面无法使用合并单元格功能。

0 comments on commit 85600e1

Please sign in to comment.