mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-24 19:19:57 +08:00
feat: add Table expandable fixed (#29959)
This commit is contained in:
parent
1a3c8f2272
commit
87195d9b4e
@ -148,9 +148,9 @@ One of the Table `columns` prop for describing the table's columns, Column has t
|
||||
|
||||
### ColumnGroup
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| title | Title of the column group | ReactNode | - |
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ------------------------- | --------- | ------- |
|
||||
| title | Title of the column group | ReactNode | - |
|
||||
|
||||
### pagination
|
||||
|
||||
@ -166,22 +166,27 @@ More about pagination, please check [`Pagination`](/components/pagination/).
|
||||
|
||||
Properties for expandable.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| childrenColumnName | The column contains children to display | string | children |
|
||||
| columnWidth | Set the width of the expand column | string \| number | - |
|
||||
| defaultExpandAllRows | Expand all rows initially | boolean | false |
|
||||
| defaultExpandedRowKeys | Initial expanded row keys | string\[] | - |
|
||||
| expandedRowClassName | Expanded row's className | function(record, index, indent): string | - |
|
||||
| expandedRowKeys | Current expanded row keys | string\[] | - |
|
||||
| expandedRowRender | Expanded container render for each row | function(record, index, indent, expanded): ReactNode | - |
|
||||
| expandIcon | Customize row expand Icon. Ref [example](https://codesandbox.io/s/fervent-bird-nuzpr) | function(props): ReactNode | - |
|
||||
| expandIconColumnIndex | Customize expand icon column index. Not render when `-1` | number | - |
|
||||
| expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | false |
|
||||
| indentSize | Indent size in pixels of tree data | number | 15 |
|
||||
| rowExpandable | Enable row can be expandable | (record) => boolean | - |
|
||||
| onExpand | Callback executed when the row expand icon is clicked | function(expanded, record) | - |
|
||||
| onExpandedRowsChange | Callback executed when the expanded rows change | function(expandedRows) | - |
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| childrenColumnName | The column contains children to display | string | children | |
|
||||
| columnWidth | Set the width of the expand column | string \| number | - | |
|
||||
| defaultExpandAllRows | Expand all rows initially | boolean | false | |
|
||||
| defaultExpandedRowKeys | Initial expanded row keys | string\[] | - | |
|
||||
| expandedRowClassName | Expanded row's className | function(record, index, indent): string | - | |
|
||||
| expandedRowKeys | Current expanded row keys | string\[] | - | |
|
||||
| expandedRowRender | Expanded container render for each row | function(record, index, indent, expanded): ReactNode | - | |
|
||||
| expandIcon | Customize row expand Icon. Ref [example](https://codesandbox.io/s/fervent-bird-nuzpr) | function(props): ReactNode | - | |
|
||||
| expandIconColumnIndex | Customize expand icon column index. Not render when `-1` | number | - | |
|
||||
| expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | false | |
|
||||
| fixed | Whether the expansion icon is fixed. Optional true `left` `right` | boolean \| string | false | 4.16.0 |
|
||||
| indentSize | Indent size in pixels of tree data | number | 15 | |
|
||||
| rowExpandable | Enable row can be expandable | (record) => boolean | - | |
|
||||
| onExpand | Callback executed when the row expand icon is clicked | function(expanded, record) | - | |
|
||||
| onExpandedRowsChange | Callback executed when the expanded rows change | function(expandedRows) | - | |
|
||||
|
||||
- `fixed`
|
||||
- When set to true or `left` and `expandIconColumnIndex` is not set or is 0, enable fixed
|
||||
- When set to true or `right` and `expandIconColumnIndex` is set to the number of table columns, enable fixed
|
||||
|
||||
### rowSelection
|
||||
|
||||
|
@ -173,22 +173,27 @@ const columns = [
|
||||
|
||||
展开功能的配置。
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| childrenColumnName | 指定树形结构的列名 | string | children |
|
||||
| columnWidth | 自定义展开列宽度 | string \| number | - |
|
||||
| defaultExpandAllRows | 初始时,是否展开所有行 | boolean | false |
|
||||
| defaultExpandedRowKeys | 默认展开的行 | string\[] | - |
|
||||
| expandedRowClassName | 展开行的 className | function(record, index, indent): string | - |
|
||||
| expandedRowKeys | 展开的行,控制属性 | string\[] | - |
|
||||
| expandedRowRender | 额外的展开行 | function(record, index, indent, expanded): ReactNode | - |
|
||||
| expandIcon | 自定义展开图标,参考[示例](https://codesandbox.io/s/fervent-bird-nuzpr) | function(props): ReactNode | - |
|
||||
| expandIconColumnIndex | 自定义展开按钮的列顺序,`-1` 时不展示 | number | - |
|
||||
| expandRowByClick | 通过点击行来展开子行 | boolean | false |
|
||||
| indentSize | 展示树形数据时,每层缩进的宽度,以 px 为单位 | number | 15 |
|
||||
| rowExpandable | 设置是否允许行展开 | (record) => boolean | - |
|
||||
| onExpand | 点击展开图标时触发 | function(expanded, record) | - |
|
||||
| onExpandedRowsChange | 展开的行变化时触发 | function(expandedRows) | - |
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| childrenColumnName | 指定树形结构的列名 | string | children | |
|
||||
| columnWidth | 自定义展开列宽度 | string \| number | - | |
|
||||
| defaultExpandAllRows | 初始时,是否展开所有行 | boolean | false | |
|
||||
| defaultExpandedRowKeys | 默认展开的行 | string\[] | - | |
|
||||
| expandedRowClassName | 展开行的 className | function(record, index, indent): string | - | |
|
||||
| expandedRowKeys | 展开的行,控制属性 | string\[] | - | |
|
||||
| expandedRowRender | 额外的展开行 | function(record, index, indent, expanded): ReactNode | - | |
|
||||
| expandIcon | 自定义展开图标,参考[示例](https://codesandbox.io/s/fervent-bird-nuzpr) | function(props): ReactNode | - | |
|
||||
| expandIconColumnIndex | 自定义展开按钮的列顺序,`-1` 时不展示 | number | - | |
|
||||
| expandRowByClick | 通过点击行来展开子行 | boolean | false | |
|
||||
| fixed | 控制展开图标是否固定,可选 true `left` `right` | boolean \| string | false | 4.16.0 |
|
||||
| indentSize | 展示树形数据时,每层缩进的宽度,以 px 为单位 | number | 15 | |
|
||||
| rowExpandable | 设置是否允许行展开 | (record) => boolean | - | |
|
||||
| onExpand | 点击展开图标时触发 | function(expanded, record) | - | |
|
||||
| onExpandedRowsChange | 展开的行变化时触发 | function(expandedRows) | - | |
|
||||
|
||||
- `fixed`
|
||||
- 当设置为 true 或 `left` 且 `expandIconColumnIndex` 未设置或为 0 时,开启固定
|
||||
- 当设置为 true 或 `right` 且 `expandIconColumnIndex` 设置为表格列数时,开启固定
|
||||
|
||||
### rowSelection
|
||||
|
||||
|
@ -142,7 +142,7 @@
|
||||
"rc-slider": "~9.7.1",
|
||||
"rc-steps": "~4.1.0",
|
||||
"rc-switch": "~3.2.0",
|
||||
"rc-table": "~7.13.0",
|
||||
"rc-table": "~7.14.0",
|
||||
"rc-tabs": "~11.7.0",
|
||||
"rc-textarea": "~0.3.0",
|
||||
"rc-tooltip": "~5.1.0",
|
||||
|
Loading…
Reference in New Issue
Block a user