Skip to content

Commit b940aff

Browse files
committed
docs: refine bilingual README branding
1 parent c9c45fb commit b940aff

2 files changed

Lines changed: 67 additions & 69 deletions

File tree

README.md

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
<div align="center">
22
<h1>@rc-component/table</h1>
3-
<p><sub>Part of the Ant Design ecosystem.</sub></p>
4-
<img alt="Ant Design" height="32" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
5-
<p>Low-level table primitives for React, maintained in the Ant Design ecosystem.</p>
3+
<p><sub><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /> Part of the Ant Design ecosystem.</sub></p>
4+
<p>📋 Low-level table primitives for React, maintained in the Ant Design ecosystem.</p>
65
</div>
76

87
<p align="center">English | <a href="./README.zh-CN.md">简体中文</a></p>

README.zh-CN.md

Lines changed: 65 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
<div align="center">
22
<h1>@rc-component/table</h1>
3-
<p><sub>Ant Design 生态的一部分。</sub></p>
4-
<img alt="Ant Design" height="32" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
3+
<p><sub><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /> Ant Design 生态的一部分。</sub></p>
54
<p>📋 React 底层表格基础组件,服务于复杂数据展示。</p>
65
</div>
76

@@ -16,9 +15,9 @@
1615

1716
## 特性
1817

19-
- Flexible column, summary, fixed header, sticky, expandable row, and virtual table support.
20-
- TypeScript-first API designed for composition in design systems.
21-
- 被 Ant Design 使用 Table and other React data display experiences.
18+
- 灵活的列、摘要、固定标题、粘性、可扩展行和虚拟表支持。
19+
- TypeScript-first API 专为设计系统中的组合而设计。
20+
- 被 Ant Design 使用 Table React 数据展示体验。
2221

2322
## 安装
2423

@@ -64,48 +63,48 @@ export default () => <Table columns={columns} data={data} />;
6463

6564
| 名称 | 类型 | 默认值 | 说明 |
6665
| --- | --- | --- | --- |
67-
| tableLayout | `auto` \| `fixed` | `auto` \| `fixed` for any columns is fixed or ellipsis or header is fixed | https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout |
66+
| tableLayout | `auto` \| `fixed` | `auto` \| 任何列的 `fixed` 都是固定的,或者省略号或标题是固定的 | https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout |
6867
| prefixCls | String | `rc-table` | |
6968
| className | String | | additional className |
70-
| id | String | | identifier of the container div |
71-
| useFixedHeader | Boolean | false | whether use separator table for header. better set width for columns |
72-
| scroll | Object | {x: false, y: false} | 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 |
73-
| expandable | Object | | Config expand props |
69+
| id | String | | 容器div的标识符 |
70+
| useFixedHeader | Boolean | false | 是否对标题使用分隔符表。更好地设置列宽度 |
71+
| 滚动 | Object | {x: false, y: false} | 表格是否可以在x/y方向滚动,`x``y`可以是一个数字,表示表格主体的宽度和高度 |
72+
| expandable | Object | | 配置展开道具 |
7473
| expandable.defaultExpandAllRows | Boolean | false | Expand All Rows initially |
75-
| expandable.defaultExpandedRowKeys | String[] | [] | initial expanded rows keys |
76-
| expandable.expandedRowKeys | String[] | | current expanded rows keys |
77-
| expandable.expandedRowRender | Function(recode, index, indent, expanded):ReactNode | | Content render to expanded row |
78-
| expandable.expandedRowClassName | `string` \| `(recode, index, indent) => string` | | get expanded row's className |
79-
| expandable.expandRowByClick | boolean | | Support expand by click row |
80-
| expandable.expandIconColumnIndex | Number | 0 | The index of expandIcon which column will be inserted when expandIconAsCell is false |
74+
| expandable.defaultExpandedRowKeys | String[] | [] | 初始扩展行键 |
75+
| expandable.expandedRowKeys | String[] | | 当前扩展行键 |
76+
| expandable.expandedRowRender | 功能(重新编码、索引、缩进、扩展):ReactNode | | 内容渲染到扩展行 |
77+
| expandable.expandedRowClassName | `string` \| `(recode, index, indent) => string` | | 获取扩展行的className |
78+
| expandable.expandRowByClick | boolean | | 支持点击行展开 |
79+
| expandable.expandIconColumnIndex | Number | 0 | ExpandIconAsCell 为 false 时将插入哪一列的 ExpandIcon 索引 |
8180
| expandable.expandIcon | props => ReactNode | | Customize expand icon |
82-
| expandable.indentSize | Number | 15 | indentSize for every level of data.i.children, better using with column.width specified |
83-
| expandable.rowExpandable | (record) => boolean | | Config row support expandable |
84-
| expandable.onExpand | Function(expanded, record) | | function to call when click expand icon |
85-
| expandable.onExpandedRowsChange | Function(expandedRows) | | function to call when the expanded rows change |
86-
| expandable.fixed | String \| Boolean | - | this expand icon will be fixed when table scroll horizontally: true or `left` or `right` and `expandIconColumnIndex` need to stay first or last |
87-
| rowKey | string or Function(record, index):string | 'key' | If rowKey is string, `record[rowKey]` will be used as key. If rowKey is function, the return value of `rowKey(record, index)` will be use as key. |
88-
| rowClassName | string or Function(record, index, indent):string | | get row's className |
89-
| rowRef | Function(record, index, indent):string | | get row's ref key |
90-
| data | Object[] | | data record array to be rendered |
91-
| onRow | Function(record, index) | | Set custom props per each row. |
92-
| onHeaderRow | Function(record, index) | | Set custom props per each header row. |
93-
| showHeader | Boolean | true | whether table head is shown |
81+
| expandable.indentSize | Number | 15 | 每一级 `data[i].children` 的缩进尺寸,建议配合指定的 `column.width` 使用 |
82+
| expandable.rowExpandable | (record) => boolean | | 配置行支持可扩展 |
83+
| expandable.onExpand | Function(expanded, record) | | 单击展开图标时调用的函数 |
84+
| expandable.onExpandedRowsChange | Function(expandedRows) | | 扩展行更改时调用的函数 |
85+
| expandable.fixed | String \| Boolean | - | 当表格水平滚动时,此展开图标将被修复: true `left` `right` `expandIconColumnIndex` 需要保留在第一个或最后一个 |
86+
| rowKey | 字符串或函数(记录,索引):字符串 | 'key' | 如果 rowKey 是字符串,则 `record[rowKey]` 将用作键。如果 rowKey 是函数,则 `rowKey(record, index)` 的返回值将用作 key |
87+
| rowClassName | 字符串或函数(记录、索引、缩进):字符串 | | 获取行的className |
88+
| rowRef | 函数(记录、索引、缩进):字符串 | | get row's ref key |
89+
| 数据 | Object[] | | 要呈现的数据记录数组 |
90+
| onRow | Function(record, index) | | 每行设置自定义道具。 |
91+
| onHeaderRow | Function(record, index) | | 为每个标题行设置自定义道具。 |
92+
| showHeader | Boolean | true | 是否显示表头 |
9493
| hidden | Boolean | `false` | Hidden column. |
95-
| title | Function(currentData) | | table title render function |
96-
| footer | Function(currentData) | | table footer render function |
97-
| emptyText | React.Node or Function | `No Data` | Display text when data is empty |
98-
| columns | Object[] | | The columns config of table, see table below |
99-
| components | Object | | Override table elements, see [#171](https://github.com/react-component/table/pull/171) for more details |
100-
| sticky | boolean \| {offsetHeader?: number, offsetScroll?: number, getContainer?: () => Window \| HTMLElement } | false | stick header and scroll bar |
101-
| summary | (data: readonly RecordType[]) => React.ReactNode | - | `summary` attribute in `table` component is used to define the summary row. |
102-
| rowHoverable | boolean | true | Table hover interaction |
94+
| title | Function(currentData) | | 表格标题渲染函数 |
95+
| footer | Function(currentData) | | 表页脚渲染函数 |
96+
| emptyText | React.Node 或函数 | `No Data` | 数据为空时显示文本 |
97+
| columns | Object[] | | 表的列配置见下表 |
98+
| components | Object | | 覆盖表元素,请参阅 [#171](https://github.com/react-component/table/pull/171) 了解更多详细信息 |
99+
| sticky | 布尔值\| {offsetHeader?: 数字, offsetScroll?: 数字, getContainer?: () => 窗口 \| HTML 元素 } | false | 粘贴标题和滚动条 |
100+
| summary | (数据:只读 RecordType[]=> React.ReactNode | - | `table` 组件中的 `summary` 属性用于定义汇总行。 |
101+
| rowHoverable | boolean | true | 表格 hover 交互 |
103102

104-
### Methods
103+
### 方法
105104

106105
#### scrollTo
107106

108-
Table component exposes `scrollTo` method to scroll to a specific position:
107+
Table 组件公开 `scrollTo` 方法来滚动到特定位置:
109108

110109
```js
111110
const tblRef = useRef();
@@ -114,48 +113,48 @@ tblRef.current?.scrollTo({ key: 'rowKey', align: 'start' });
114113
115114
| 名称 | 类型 | 默认值 | 说明 |
116115
| --- | --- | --- | --- |
117-
| index | number | - | Row index to scroll to |
118-
| top | number | - | Scroll to specific top position (in px) |
119-
| key | string | - | Scroll to row by row key |
120-
| offset | number | - | Additional offset from target position |
121-
| align | `start` \| `center` \| `end` \| `nearest` | `nearest` | Alignment of the target element within the scroll container. `start` aligns to top, `center` to middle, `end` to bottom, `nearest` automatically chooses the closest alignment. Note: Virtual table does not support `center`. |
116+
| index | number | - | 要滚动到的行索引 |
117+
| top | number | - | 滚动到特定顶部位置(以像素为单位) |
118+
| key | string | - | 按行键滚动至行 |
119+
| offset | number | - | 与目标位置的额外偏移 |
120+
| align | `start` \| `center` \| `end` \| `nearest` | `nearest` | 滚动容器内目标元素的对齐方式。 `start` 对齐到顶部,`center` 对齐到中间,`end` 对齐到底部,`nearest` 自动选择最接近的对齐方式。注意:虚拟表不支持 `center` |
122121
123122
## Column Props
124123
125124
| 名称 | 类型 | 默认值 | 说明 |
126125
| --- | --- | --- | --- |
127-
| key | String | | key of this column |
128-
| className | String | | className of this column |
129-
| colSpan | Number | | thead colSpan of this column |
130-
| title | React Node | | title of this column |
131-
| dataIndex | String | | display field of the data record |
132-
| width | String \| Number | | width of the specific proportion calculation according to the width of the columns |
133-
| minWidth | Number | | the minimum width of the column, only worked when tableLayout is auto |
134-
| fixed | String \| Boolean | | this column will be fixed when table scroll horizontally: true or 'left' or 'right' |
135-
| align | String | | specify how cell content is aligned |
136-
| ellipsis | Boolean | | specify whether cell content be ellipsized |
137-
| rowScope | 'row' \| 'rowgroup' | | Set scope attribute for all cells in this column |
138-
| onCell | Function(record, index) | | Set custom props per each cell. |
139-
| onHeaderCell | Function(record) | | Set custom props per each header cell. |
140-
| render | Function(value, row, index) | | The render function of cell, has three params: the text of this cell, the record of this row, the index of this row, it's return an object:{ children: value, props: { colSpan: 1, rowSpan:1 } } ==> 'children' is the text of this cell, props is some setting of this cell, eg: 'colspan' set td colspan, 'rowspan' set td rowspan |
126+
| key | String | | 本栏目关键 |
127+
| className | String | | 该列的className |
128+
| colSpan | Number | | 该列的 head colSpan |
129+
| title | React节点 | | 本栏目标题 |
130+
| dataIndex | String | | 数据记录的显示字段 |
131+
| 宽度 | String \| Number | | 宽度具体比例根据柱子的宽度计算 |
132+
| minWidth | Number | | 列的最小宽度,仅当 tableLayout auto 时有效 |
133+
| fixed | String \| Boolean | | 当表格水平滚动时此列将被固定: true 'left' 'right' |
134+
| align | String | | 指定单元格内容的对齐方式 |
135+
| ellipsis | Boolean | | 指定单元格内容是否省略 |
136+
| rowScope | 'row' \| 'rowgroup' | | 设置此列中所有单元格的范围属性 |
137+
| onCell | Function(record, index) | | 为每个单元格设置自定义道具。 |
138+
| onHeaderCell | Function(record) | | 为每个标题单元格设置自定义属性。 |
139+
| 使成为 | 函数(值、行、索引) | | 单元格渲染函数,参数为单元格文本、当前行记录和行索引。可返回 `{ children: value, props: { colSpan: 1, rowSpan: 1 } }`,其中 `children` 是单元格文本,`props` 是单元格设置,例如 `colSpan` 设置 td colspan`rowSpan` 设置 td rowspan |
141140
142141
## Summary Props
143142
144143
### Table.Summary
145144
146145
| 名称 | 类型 | 默认值 | 说明 |
147146
| --- | --- | --- | --- |
148-
| key | String | | key of this summary |
149-
| fixed | boolean \| 'top' \| 'bottom' | - | `true` fixes the summary row at the bottom of the table. `top` fixes the summary row at the top of the table, while `bottom` fixes it at the bottom. `undefined` or `false` makes the summary row scrollable along with the table. |
147+
| key | String | | 本摘要的关键 |
148+
| fixed | boolean \| 'top' \| 'bottom' | - | `true` 修复了表格底部的汇总行。 `top` 将汇总行固定在表格顶部,而 `bottom` 将其固定在底部。 `undefined` `false` 使摘要行可随表格一起滚动。 |
150149
151150
### Table.Summary.Row
152151
153152
| 名称 | 类型 | 默认值 | 说明 |
154153
| --- | --- | --- | --- |
155-
| key | String | | key of this summary |
156-
| className | String | - | className of this summary row |
157-
| style | React.CSSProperties | - | style of this summary row |
158-
| onClick | (e?: React.MouseEvent\<HTMLElement>) => void | - | The `onClick` attribute in `Table.Summary.Row` component can be used to set a click event handler for the summary row. |
154+
| key | String | | 本摘要的关键 |
155+
| className | String | - | 此摘要行的className |
156+
| 风格 | React.CSSProperties | - | 此摘要行的样式 |
157+
| onClick | (e?: React.MouseEvent\<HTMLElement>) => void | - | `Table.Summary.Row` 组件中的 `onClick` 属性可用于设置汇总行的单击事件处理程序。 |
159158
160159
## 本地开发
161160
@@ -164,7 +163,7 @@ npm install
164163
npm start
165164
```
166165
167-
Run checks before sending a pull request:
166+
在发送拉取请求之前运行检查:
168167
169168
```bash
170169
npm run lint
@@ -179,14 +178,14 @@ npm run build
179178
npm run prepublishOnly
180179
```
181180
182-
The release flow is handled by `@rc-component/np` through the `rc-np` command after the package build.
181+
包构建完成后,发布流程由 `@rc-component/np` 通过 `rc-np` 命令处理。
183182
## Ecosystem
184183
185184
该包属于 React Component 组织,并与 Ant Design 一同维护。 上方 Ant Design 标识仅用于说明生态归属;组件本身仍保持框架级、低样式耦合的定位。
186185
187186
## 许可证
188187
189-
@rc-component/table is released under the [MIT](./LICENSE.md) license.
188+
@rc-component/table 基于 [MIT](./LICENSE.md) 许可证发布。
190189
191190
[npm-image]: https://img.shields.io/npm/v/@rc-component/table.svg?style=flat-square
192191
[npm-url]: https://npmjs.org/package/@rc-component/table

0 commit comments

Comments
 (0)