From 5c11a426ddb2b4a15405b879a3dcc44a875e6435 Mon Sep 17 00:00:00 2001 From: ParsaArvanehPA Date: Thu, 1 Feb 2024 22:52:18 +0330 Subject: [PATCH 1/6] fix(module:tabs): wrong cursor --- components/tabs/style/patch.less | 1 + 1 file changed, 1 insertion(+) diff --git a/components/tabs/style/patch.less b/components/tabs/style/patch.less index 4b2cdd47488..a3e00fdba0f 100644 --- a/components/tabs/style/patch.less +++ b/components/tabs/style/patch.less @@ -7,6 +7,7 @@ .ant-tabs-tab-btn { border: none; background-color: unset; + cursor: pointer; } .ant-tabs-tab a[nz-tab-link] { From 988985b8c09c0aef9f9b9d8272c03666ccebb841 Mon Sep 17 00:00:00 2001 From: Parsa Arvaneh Date: Thu, 21 Mar 2024 02:47:13 +0330 Subject: [PATCH 2/6] feat(module:table): radio selection type --- components/table/doc/index.en-US.md | 65 ++++++++++++------- components/table/doc/index.zh-CN.md | 27 ++++++-- .../table/src/addon/selection.component.ts | 19 +++++- 3 files changed, 82 insertions(+), 29 deletions(-) diff --git a/components/table/doc/index.en-US.md b/components/table/doc/index.en-US.md index 9a242e57dc1..dcf8791690c 100644 --- a/components/table/doc/index.en-US.md +++ b/components/table/doc/index.en-US.md @@ -106,21 +106,29 @@ The data passed to `[nzData]` is exported with [Template Context](https://angula Checkbox property -| Property | Description | Type | Default | -| ------------------- | --------------------------------------------------- | ----------------------- | ------- | -| `[nzShowCheckbox]` | Whether `nz-checkbox` should be shown in the header | `boolean` | - | -| `[nzDisabled]` | Whether the `nz-checkbox` is disabled | `boolean` | - | -| `[nzIndeterminate]` | `nz-checkbox` indeterminate status | `boolean` | - | -| `[nzLabel]` | ARIA label for the `nz-checkbox` | `string` | - | -| `[nzChecked]` | Checked status, double binding | `boolean` | - | -| `(nzCheckedChange)` | Callback when checked status changes | `EventEmitter` | - | +| Property | Description | Type | Default | +| ---------------------- | --------------------------------------------------- | ----------------------- | ------------ | +| `[nzShowCheckbox]` | Whether `nz-checkbox` should be shown in the header | `boolean` | - | +| `[nzDisabled]` | Whether the `nz-checkbox` is disabled | `boolean` | - | +| `[nzIndeterminate]` | `nz-checkbox` indeterminate status | `boolean` | - | +| `[nzLabel]` | ARIA label for the `nz-checkbox` | `string` | - | +| `[nzChecked]` | Checked status, double binding | `boolean` | - | +| `[nzRowSelectionType]` | Checkbox or radio | `'checkbox' \| 'radio'` | `'checkbox'` | +| `(nzCheckedChange)` | Callback when checked status changes | `EventEmitter` | - | + +radio property + +| Property | Description | Type | Default | +| ---------------------- | -------------------------------------------------------------------------------------------------------- | ----------------------- | ------------ | +| `[nzRowSelectionType]` | Checkbox or radio, should have `nzShowRowSelection = true` if trying to have a column with radio buttons | `'checkbox' \| 'radio'` | `'checkbox'` | Selection property -| Property | Description | Type | Default | -| ---------------------- | ------------------------------------------------------------------- | ---------------------------------------- | ------- | -| `[nzShowRowSelection]` | Whether to show row selection options | `boolean` | - | -| `[nzSelections]` | Selection options including `text` and `onSelect` callback function | `Array<{ text: string, onSelect: any }>` | - | +| Property | Description | Type | Default | +| ---------------------- | ------------------------------------------------------------------- | ---------------------------------------- | ------------ | +| `[nzShowRowSelection]` | Whether to show row selection options | `boolean` | - | +| `[nzRowSelectionType]` | Checkbox or radio | `'checkbox' \| 'radio'` | `'checkbox'` | +| `[nzSelections]` | Selection options including `text` and `onSelect` callback function | `Array<{ text: string, onSelect: any }>` | - | Sort property @@ -164,16 +172,29 @@ Other Checkbox property -| Property | Description | Type | Default | -| ------------------- | --------------------------------- | ----------------------- | ------- | -| `[nzShowCheckbox]` | Whether add nz-checkbox | `boolean` | - | -| `[nzDisabled]` | Whether disable checkbox | `boolean` | - | -| `[nzIndeterminate]` | Indeterminate status | `boolean` | - | -| `[nzLabel]` | ARIA label for the `nz-checkbox` | `string` | - | -| `[nzChecked]` | Checked status, double binding | `boolean` | - | -| `(nzCheckedChange)` | Checked status change callback | `EventEmitter` | - | -| `[colSpan]` | how many columns the cell extends | `number` | `null` | -| `[rowSpan]` | how many rows the cell extends | `number` | `null` | +| Property | Description | Type | Default | +| ---------------------- | --------------------------------- | ----------------------- | ------------ | +| `[nzShowCheckbox]` | Whether add nz-checkbox | `boolean` | - | +| `[nzDisabled]` | Whether disable checkbox | `boolean` | - | +| `[nzIndeterminate]` | Indeterminate status | `boolean` | - | +| `[nzLabel]` | ARIA label for the `nz-checkbox` | `string` | - | +| `[nzChecked]` | Checked status, double binding | `boolean` | - | +| `(nzCheckedChange)` | Checked status change callback | `EventEmitter` | - | +| `[nzRowSelectionType]` | Checkbox or radio | `'checkbox' \| 'radio'` | `'checkbox'` | +| `[colSpan]` | how many columns the cell extends | `number` | `null` | +| `[rowSpan]` | how many rows the cell extends | `number` | `null` | + +radio property + +| Property | Description | Type | Default | +| ---------------------- | --------------------------------- | ----------------------- | ------------ | +| `[nzDisabled]` | Whether disable checkbox | `boolean` | - | +| `[nzLabel]` | ARIA label for the `nz-checkbox` | `string` | - | +| `[nzChecked]` | Checked status, double binding | `boolean` | - | +| `(nzCheckedChange)` | Checked status change callback | `EventEmitter` | - | +| `[nzRowSelectionType]` | Checkbox or radio | `'checkbox' \| 'radio'` | `'checkbox'` | +| `[colSpan]` | how many columns the cell extends | `number` | `null` | +| `[rowSpan]` | how many rows the cell extends | `number` | `null` | Expand property diff --git a/components/table/doc/index.zh-CN.md b/components/table/doc/index.zh-CN.md index 182c294b77e..e7a7031cbd6 100644 --- a/components/table/doc/index.zh-CN.md +++ b/components/table/doc/index.zh-CN.md @@ -116,12 +116,19 @@ Table 组件同时具备了易用性和高度可定制性 | `[nzChecked]` | checkbox 是否被选中，可双向绑定 | `boolean` | - | | `(nzCheckedChange)` | 选中的回调 | `EventEmitter` | - | +无线电财产 + +| 参数 | 说明 | 类型 | 默认值 | +| ---------------------- | --------------------------------------------------------------------------------- | ----------------------- | ------------ | +| `[nzRowSelectionType]` | 复选框或单选框，如果尝试使用带有单选按钮的列，则应具有“nzShowRowSelection = true” | `'checkbox' \| 'radio'` | `'checkbox'` | + 下拉选择属性 -| 参数 | 说明 | 类型 | 默认值 | -| ---------------------- | ------------------------------------------- | ---------------------------------------- | ------ | -| `[nzShowRowSelection]` | 是否显示下拉选择 | `boolean` | - | -| `[nzSelections]` | 下拉选择的内容 `text` 及回调函数 `onSelect` | `Array<{ text: string, onSelect: any }>` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ---------------------- | ------------------------------------------- | ---------------------------------------- | ------------ | +| `[nzShowRowSelection]` | 是否显示下拉选择 | `boolean` | - | +| `[nzRowSelectionType]` | Checkbox or radio | `'checkbox' \| 'radio'` | `'checkbox'` | +| `[nzSelections]` | 下拉选择的内容 `text` 及回调函数 `onSelect` | `Array<{ text: string, onSelect: any }>` | - | 排序属性 @@ -178,6 +185,18 @@ Table 组件同时具备了易用性和高度可定制性 | `[colSpan]` | 单元格可横跨的列数 | `number` | `null` | | `[rowSpan]` | 单元格可横跨的行数 | `number` | `null` | +勾选属性 + +| 参数 | 说明 | 类型 | 默认值 | +| ---------------------- | ------------------------------- | ----------------------- | ------------ | +| `[nzDisabled]` | checkbox 是否禁用 | `boolean` | - | +| `[nzLabel]` | checkbox 的可访问性标签 | `string` | - | +| `[nzChecked]` | checkbox 是否被选中，可双向绑定 | `boolean` | - | +| `[nzRowSelectionType]` | Checkbox or radio | `'checkbox' \| 'radio'` | `'checkbox'` | +| `(nzCheckedChange)` | 选中的回调 | `EventEmitter` | - | +| `[colSpan]` | 单元格可横跨的列数 | `number` | `null` | +| `[rowSpan]` | 单元格可横跨的行数 | `number` | `null` | + 展开属性 | 参数 | 说明 | 类型 | 默认值 | diff --git a/components/table/src/addon/selection.component.ts b/components/table/src/addon/selection.component.ts index b537b3d07c2..b5f5455f608 100644 --- a/components/table/src/addon/selection.component.ts +++ b/components/table/src/addon/selection.component.ts @@ -11,6 +11,9 @@ import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; import { NzSafeAny } from 'ng-zorro-antd/core/types'; import { NzDropDownModule } from 'ng-zorro-antd/dropdown'; import { NzIconModule } from 'ng-zorro-antd/icon'; +import { NzRadioComponent, NzRadioGroupComponent } from 'ng-zorro-antd/radio'; + +import { NzRowSelectionType } from '../table.types'; @Component({ selector: 'nz-table-selection', @@ -19,7 +22,7 @@ import { NzIconModule } from 'ng-zorro-antd/icon'; encapsulation: ViewEncapsulation.None, template: ` -
+
@@ -42,10 +45,20 @@ import { NzIconModule } from 'ng-zorro-antd/icon';
`, host: { class: 'ant-table-selection' }, - imports: [NgIf, FormsModule, NzCheckboxModule, NzDropDownModule, NzIconModule, NgForOf], + imports: [ + NgIf, + FormsModule, + NzCheckboxModule, + NzDropDownModule, + NzIconModule, + NgForOf, + NzRadioComponent, + NzRadioGroupComponent + ], standalone: true }) export class NzTableSelectionComponent { + @Input() nzRowSelectionType: NzRowSelectionType = 'checkbox'; @Input() listOfSelections: Array<{ text: string; onSelect(...args: NzSafeAny[]): NzSafeAny }> = []; @Input() checked = false; @Input() disabled = false; From 5e4dd2a2f4d5658914fd1dadba94c62d4fb06e64 Mon Sep 17 00:00:00 2001 From: Parsa Arvaneh Date: Thu, 21 Mar 2024 02:47:36 +0330 Subject: [PATCH 3/6] feat(module:table): radio selection type --- components/table/demo/selection.md | 14 +++ components/table/demo/selection.ts | 116 ++++++++++++++++++ .../table/src/cell/td-addon.component.ts | 31 ++++- .../table/src/cell/th-selection.component.ts | 3 + components/table/src/table.types.ts | 1 + components/table/src/testing/td.spec.ts | 13 ++ 6 files changed, 175 insertions(+), 3 deletions(-) create mode 100644 components/table/demo/selection.md create mode 100644 components/table/demo/selection.ts diff --git a/components/table/demo/selection.md b/components/table/demo/selection.md new file mode 100644 index 00000000000..81957a2907f --- /dev/null +++ b/components/table/demo/selection.md @@ -0,0 +1,14 @@ +--- +order: 2 +title: + en-US: Selection + zh-CN: 可选择 +--- + +## zh-CN + +第一列是联动的选择框。可以通过 `nzRowSelectionType` 属性指定选择类型，默认为 `checkbox`。 + +## en-US + +Rows can be selectable by making first column as a selectable column. You can use `nzRowSelectionType` to set selection type. Default is `checkbox`. diff --git a/components/table/demo/selection.ts b/components/table/demo/selection.ts new file mode 100644 index 00000000000..0cdd31e49fe --- /dev/null +++ b/components/table/demo/selection.ts @@ -0,0 +1,116 @@ +import { Component, OnInit } from '@angular/core'; + +import { NzRowSelectionType } from 'ng-zorro-antd/table'; + +interface ItemData { + id: number; + name: string; + age: number; + address: string; +} + +@Component({ + selector: 'nz-demo-table-selection', + template: ` + + + + + + + + + + + + + + + Name + Age + Address + + + + + + + + + + + + {{ data.name }} + {{ data.age }} + {{ data.address }} + + + + `, + styles: ` + nz-radio-group { + margin-block-end: 1rem; + } + ` +}) +export class NzDemoTableSelectionComponent implements OnInit { + rowSelectionType: NzRowSelectionType = 'checkbox'; + + checked = false; + indeterminate = false; + listOfCurrentPageData: readonly ItemData[] = []; + listOfData: readonly ItemData[] = []; + setOfCheckedId = new Set(); + + updateCheckedSet(id: number, checked: boolean): void { + if (checked) { + if (this.rowSelectionType === 'radio') { + this.setOfCheckedId.forEach(x => { + this.setOfCheckedId.delete(x); + }); + } + + this.setOfCheckedId.add(id); + } else { + this.setOfCheckedId.delete(id); + } + } + + onItemChecked(id: number, checked: boolean): void { + this.updateCheckedSet(id, checked); + this.refreshCheckedStatus(); + } + + onAllChecked(value: boolean): void { + this.listOfCurrentPageData.forEach(item => this.updateCheckedSet(item.id, value)); + this.refreshCheckedStatus(); + } + + onCurrentPageDataChange($event: readonly ItemData[]): void { + this.listOfCurrentPageData = $event; + this.refreshCheckedStatus(); + } + + refreshCheckedStatus(): void { + this.checked = this.listOfCurrentPageData.every(item => this.setOfCheckedId.has(item.id)); + this.indeterminate = this.listOfCurrentPageData.some(item => this.setOfCheckedId.has(item.id)) && !this.checked; + } + + resetSelectedValues(): void { + this.setOfCheckedId = new Set(); + this.indeterminate = false; + } + + ngOnInit(): void { + this.listOfData = new Array(5).fill(0).map((_, index) => ({ + id: index, + name: `Edward King ${index}`, + age: 32, + address: `London, Park Lane no. ${index}` + })); + } +} diff --git a/components/table/src/cell/td-addon.component.ts b/components/table/src/cell/td-addon.component.ts index 2de80a7e38b..0697971602d 100644 --- a/components/table/src/cell/td-addon.component.ts +++ b/components/table/src/cell/td-addon.component.ts @@ -23,9 +23,11 @@ import { FormsModule } from '@angular/forms'; import { NzCheckboxModule } from 'ng-zorro-antd/checkbox'; import { BooleanInput } from 'ng-zorro-antd/core/types'; import { InputBoolean } from 'ng-zorro-antd/core/util'; +import { NzRadioComponent, NzRadioGroupComponent } from 'ng-zorro-antd/radio'; import { NzRowExpandButtonDirective } from '../addon/row-expand-button.directive'; import { NzRowIndentDirective } from '../addon/row-indent.directive'; +import { NzRowSelectionType } from '../table.types'; @Component({ selector: @@ -57,13 +59,30 @@ import { NzRowIndentDirective } from '../addon/row-indent.directive'; [attr.aria-label]="nzLabel" (ngModelChange)="onCheckedChange($event)" > + `, host: { '[class.ant-table-cell-with-append]': `nzShowExpand || nzIndentSize > 0`, - '[class.ant-table-selection-column]': `nzShowCheckbox` + '[class.ant-table-selection-column]': `nzShowCheckbox || nzShowRadio` }, - imports: [NzRowIndentDirective, NzRowExpandButtonDirective, NgIf, NgTemplateOutlet, NzCheckboxModule, FormsModule], + imports: [ + NzRowIndentDirective, + NzRowExpandButtonDirective, + NgIf, + NgTemplateOutlet, + NzCheckboxModule, + FormsModule, + NzRadioComponent, + NzRadioGroupComponent + ], standalone: true }) export class NzTdAddOnComponent implements OnChanges { @@ -72,12 +91,14 @@ export class NzTdAddOnComponent implements OnChanges { static ngAcceptInputType_nzExpand: BooleanInput; @Input() nzChecked = false; + @Input() nzRowSelectionType: NzRowSelectionType = 'checkbox'; @Input() nzDisabled = false; @Input() nzIndeterminate = false; @Input() nzLabel: string | null = null; @Input() nzIndentSize = 0; @Input() @InputBoolean() nzShowExpand = false; @Input() @InputBoolean() nzShowCheckbox = false; + @Input() @InputBoolean() nzShowRadio = false; @Input() @InputBoolean() nzExpand = false; @Input() nzExpandIcon: TemplateRef | null = null; @Output() readonly nzCheckedChange = new EventEmitter(); @@ -108,7 +129,11 @@ export class NzTdAddOnComponent implements OnChanges { this.nzShowExpand = true; } if (isFirstChange(nzChecked) && !this.isNzShowCheckboxChanged) { - this.nzShowCheckbox = true; + if (this.nzRowSelectionType === 'checkbox') { + this.nzShowCheckbox = true; + } else { + this.nzShowRadio = true; + } } } } diff --git a/components/table/src/cell/th-selection.component.ts b/components/table/src/cell/th-selection.component.ts index ff48a273741..1b0a7dd135b 100644 --- a/components/table/src/cell/th-selection.component.ts +++ b/components/table/src/cell/th-selection.component.ts @@ -20,6 +20,7 @@ import { BooleanInput, NzSafeAny } from 'ng-zorro-antd/core/types'; import { InputBoolean } from 'ng-zorro-antd/core/util'; import { NzTableSelectionComponent } from '../addon/selection.component'; +import { NzRowSelectionType } from '../table.types'; @Component({ selector: 'th[nzSelections],th[nzChecked],th[nzShowCheckbox],th[nzShowRowSelection]', @@ -31,6 +32,7 @@ import { NzTableSelectionComponent } from '../addon/selection.component'; [checked]="nzChecked" [disabled]="nzDisabled" [indeterminate]="nzIndeterminate" + [nzRowSelectionType]="nzRowSelectionType" [label]="nzLabel" [listOfSelections]="nzSelections" [showCheckbox]="nzShowCheckbox" @@ -49,6 +51,7 @@ export class NzThSelectionComponent implements OnChanges { @Input() nzSelections: Array<{ text: string; onSelect(...args: NzSafeAny[]): NzSafeAny }> = []; @Input() nzChecked = false; + @Input() nzRowSelectionType: NzRowSelectionType = 'checkbox'; @Input() nzDisabled = false; @Input() nzIndeterminate = false; @Input() nzLabel: string | null = null; diff --git a/components/table/src/table.types.ts b/components/table/src/table.types.ts index 4e9671b3f92..a786caf5786 100644 --- a/components/table/src/table.types.ts +++ b/components/table/src/table.types.ts @@ -9,6 +9,7 @@ export type NzTableLayout = 'fixed' | 'auto'; export type NzTablePaginationPosition = 'top' | 'bottom' | 'both'; export type NzTablePaginationType = 'default' | 'small'; export type NzTableSize = 'middle' | 'default' | 'small'; +export type NzRowSelectionType = 'checkbox' | 'radio'; export type NzTableFilterList = Array<{ text: string; value: NzSafeAny; byDefault?: boolean }>; export type NzTableSortOrder = string | 'ascend' | 'descend' | null; export type NzTableSortFn = (a: T, b: T, sortOrder?: NzTableSortOrder) => number; diff --git a/components/table/src/testing/td.spec.ts b/components/table/src/testing/td.spec.ts index 1953aa960b8..c9dcdf30329 100644 --- a/components/table/src/testing/td.spec.ts +++ b/components/table/src/testing/td.spec.ts @@ -5,6 +5,7 @@ import { By } from '@angular/platform-browser'; import { NzTdAddOnComponent } from '../cell/td-addon.component'; import { NzTableModule } from '../table.module'; +import { NzRowSelectionType } from '../table.types'; describe('nz-td', () => { beforeEach(fakeAsync(() => { @@ -24,11 +25,21 @@ describe('nz-td', () => { testComponent = fixture.debugElement.componentInstance; td = fixture.debugElement.query(By.directive(NzTdAddOnComponent)); }); + it('should default value for selection type be checkbox', () => { + fixture.detectChanges(); + expect(td.nativeElement.querySelector('.ant-checkbox-wrapper')).toBeDefined(); + expect(td.nativeElement.classList).toContain('ant-table-selection-column'); + }); it('should checkbox work', () => { fixture.detectChanges(); expect(td.nativeElement.querySelector('.ant-checkbox-wrapper')).toBeDefined(); expect(td.nativeElement.classList).toContain('ant-table-selection-column'); }); + it('should radio work', fakeAsync(() => { + testComponent.selectionType = 'radio'; + flush(); + expect(td.nativeElement.querySelector('.ant-radio-wrapper')).toBeDefined(); + })); it('should checked work', fakeAsync(() => { fixture.detectChanges(); expect(td.nativeElement.querySelector('.ant-checkbox-wrapper').firstElementChild!.classList).not.toContain( @@ -155,6 +166,7 @@ describe('nz-td', () => { (nzCheckedChange)="checkedChange($event)" [nzDisabled]="disabled" [(nzExpand)]="expand" + [nzRowSelectionType]="selectionType" (nzExpandChange)="expandChange($event)" [nzIndentSize]="indentSize" [nzLeft]="left" @@ -163,6 +175,7 @@ describe('nz-td', () => { ` }) export class NzTestTdComponent { + selectionType: NzRowSelectionType = 'checkbox'; checked = false; checkedChange = jasmine.createSpy('show change'); indeterminate = false; From 81665194b94fc433200ae7f83e79c53e6d7bcbda Mon Sep 17 00:00:00 2001 From: Parsa Arvaneh Date: Wed, 17 Jul 2024 13:36:25 +0330 Subject: [PATCH 4/6] feat(module:table): radio selection type --- components/table/doc/index.en-US.md | 22 ++++++++++------------ components/table/doc/index.zh-CN.md | 12 ++++++------ 2 files changed, 16 insertions(+), 18 deletions(-) diff --git a/components/table/doc/index.en-US.md b/components/table/doc/index.en-US.md index 33cf11029d5..b24da11fc36 100644 --- a/components/table/doc/index.en-US.md +++ b/components/table/doc/index.en-US.md @@ -114,21 +114,21 @@ Checkbox property | `[nzIndeterminate]` | `nz-checkbox` indeterminate status | `boolean` | - | | `[nzLabel]` | ARIA label for the `nz-checkbox` | `string` | - | | `[nzChecked]` | Checked status, double binding | `boolean` | - | -| `[nzRowSelectionType]` | Checkbox or radio | `'checkbox' \| 'radio'` | `'checkbox'` | +| `[nzRowSelectionType]` | Checkbox or Radio | `'checkbox' \| 'radio'` | `'checkbox'` | | `(nzCheckedChange)` | Callback when checked status changes | `EventEmitter` | - | -radio property +Radio property | Property | Description | Type | Default | | ---------------------- | -------------------------------------------------------------------------------------------------------- | ----------------------- | ------------ | -| `[nzRowSelectionType]` | Checkbox or radio, should have `nzShowRowSelection = true` if trying to have a column with radio buttons | `'checkbox' \| 'radio'` | `'checkbox'` | +| `[nzRowSelectionType]` | Checkbox or Radio, should have `nzShowRowSelection = true` if trying to have a column with radio buttons | `'checkbox' \| 'radio'` | `'checkbox'` | Selection property | Property | Description | Type | Default | | ---------------------- | ------------------------------------------------------------------- | ---------------------------------------- | ------------ | | `[nzShowRowSelection]` | Whether to show row selection options | `boolean` | - | -| `[nzRowSelectionType]` | Checkbox or radio | `'checkbox' \| 'radio'` | `'checkbox'` | +| `[nzRowSelectionType]` | Checkbox or Radio | `'checkbox' \| 'radio'` | `'checkbox'` | | `[nzSelections]` | Selection options including `text` and `onSelect` callback function | `Array<{ text: string, onSelect: any }>` | - | Sort property @@ -181,11 +181,11 @@ Checkbox property | `[nzLabel]` | ARIA label for the `nz-checkbox` | `string` | - | | `[nzChecked]` | Checked status, double binding | `boolean` | - | | `(nzCheckedChange)` | Checked status change callback | `EventEmitter` | - | -| `[nzRowSelectionType]` | Checkbox or radio | `'checkbox' \| 'radio'` | `'checkbox'` | +| `[nzRowSelectionType]` | Checkbox or Radio | `'checkbox' \| 'radio'` | `'checkbox'` | | `[colSpan]` | how many columns the cell extends | `number` | `null` | | `[rowSpan]` | how many rows the cell extends | `number` | `null` | -radio property +Radio property | Property | Description | Type | Default | | ---------------------- | --------------------------------- | ----------------------- | ------------ | @@ -193,7 +193,7 @@ radio property | `[nzLabel]` | ARIA label for the `nz-checkbox` | `string` | - | | `[nzChecked]` | Checked status, double binding | `boolean` | - | | `(nzCheckedChange)` | Checked status change callback | `EventEmitter` | - | -| `[nzRowSelectionType]` | Checkbox or radio | `'checkbox' \| 'radio'` | `'checkbox'` | +| `[nzRowSelectionType]` | Checkbox or Radio | `'checkbox' \| 'radio'` | `'checkbox'` | | `[colSpan]` | how many columns the cell extends | `number` | `null` | | `[rowSpan]` | how many rows the cell extends | `number` | `null` | @@ -223,13 +223,11 @@ Other property | ---------------- | ---------------------------------- | -------- | ------- | | `[nzIndentSize]` | Indent size in pixels of tree data | `number` | - | - ### thead -| Property | Description | Type | Default | -| -------- | ----------- | ---- | ------- | -| `(nzSortOrderChange)` | sort change callback，should used with `nzColumnKey` of `th` | `EventEmitter<{ key: string, value: 'descend' \| 'ascend' \| null }>` | - | - +| Property | Description | Type | Default | +| --------------------- | ------------------------------------------------------------ | --------------------------------------------------------------------- | ------- | +| `(nzSortOrderChange)` | sort change callback，should used with `nzColumnKey` of `th` | `EventEmitter<{ key: string, value: 'descend' \| 'ascend' \| null }>` | - | ### tr diff --git a/components/table/doc/index.zh-CN.md b/components/table/doc/index.zh-CN.md index 025eb8b5d03..440092582e6 100644 --- a/components/table/doc/index.zh-CN.md +++ b/components/table/doc/index.zh-CN.md @@ -116,7 +116,7 @@ Table 组件同时具备了易用性和高度可定制性 | `[nzChecked]` | checkbox 是否被选中，可双向绑定 | `boolean` | - | | `(nzCheckedChange)` | 选中的回调 | `EventEmitter` | - | -无线电财产 +单选属性 | 参数 | 说明 | 类型 | 默认值 | | ---------------------- | --------------------------------------------------------------------------------- | ----------------------- | ------------ | @@ -127,7 +127,7 @@ Table 组件同时具备了易用性和高度可定制性 | 参数 | 说明 | 类型 | 默认值 | | ---------------------- | ------------------------------------------- | ---------------------------------------- | ------------ | | `[nzShowRowSelection]` | 是否显示下拉选择 | `boolean` | - | -| `[nzRowSelectionType]` | Checkbox or radio | `'checkbox' \| 'radio'` | `'checkbox'` | +| `[nzRowSelectionType]` | Checkbox or Radio | `'checkbox' \| 'radio'` | `'checkbox'` | | `[nzSelections]` | 下拉选择的内容 `text` 及回调函数 `onSelect` | `Array<{ text: string, onSelect: any }>` | - | 排序属性 @@ -193,7 +193,7 @@ Table 组件同时具备了易用性和高度可定制性 | `[nzDisabled]` | checkbox 是否禁用 | `boolean` | - | | `[nzLabel]` | checkbox 的可访问性标签 | `string` | - | | `[nzChecked]` | checkbox 是否被选中，可双向绑定 | `boolean` | - | -| `[nzRowSelectionType]` | Checkbox or radio | `'checkbox' \| 'radio'` | `'checkbox'` | +| `[nzRowSelectionType]` | Checkbox or Radio | `'checkbox' \| 'radio'` | `'checkbox'` | | `(nzCheckedChange)` | 选中的回调 | `EventEmitter` | - | | `[colSpan]` | 单元格可横跨的列数 | `number` | `null` | | `[rowSpan]` | 单元格可横跨的行数 | `number` | `null` | @@ -226,9 +226,9 @@ Table 组件同时具备了易用性和高度可定制性 ### thead -| 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | -| `(nzSortOrderChange)` | 排序状态改变回调，需要与 `th` 上的 `nzColumnKey` 同时使用 | `EventEmitter<{ key: string, value: 'descend' \| 'ascend' \| null }>` | - | +| 参数 | 说明 | 类型 | 默认值 | +| --------------------- | --------------------------------------------------------- | --------------------------------------------------------------------- | ------ | +| `(nzSortOrderChange)` | 排序状态改变回调，需要与 `th` 上的 `nzColumnKey` 同时使用 | `EventEmitter<{ key: string, value: 'descend' \| 'ascend' \| null }>` | - | ### tr From 3a46b380b1e3878e1c23a0fd26466081dc6b8b43 Mon Sep 17 00:00:00 2001 From: Parsa Arvaneh Date: Wed, 17 Jul 2024 13:44:00 +0330 Subject: [PATCH 5/6] feat(module:table): radio selection type --- components/table/src/cell/td-addon.component.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/components/table/src/cell/td-addon.component.ts b/components/table/src/cell/td-addon.component.ts index eb8e6da820f..ecbcdb4ee5d 100644 --- a/components/table/src/cell/td-addon.component.ts +++ b/components/table/src/cell/td-addon.component.ts @@ -71,9 +71,15 @@ import { NzRowSelectionType } from '../table.types'; '[class.ant-table-cell-with-append]': `nzShowExpand || nzIndentSize > 0`, '[class.ant-table-selection-column]': `nzShowCheckbox || nzShowRadio` }, - imports: [NzRowIndentDirective, NzRowExpandButtonDirective, NgTemplateOutlet, NzCheckboxModule, FormsModule, + imports: [ + NzRowIndentDirective, + NzRowExpandButtonDirective, + NgTemplateOutlet, + NzCheckboxModule, + FormsModule, NzRadioComponent, - NzRadioGroupComponent], + NzRadioGroupComponent + ], standalone: true }) export class NzTdAddOnComponent implements OnChanges { From 105ad167e7f7ec8de8d0b5e7cf61604441d3afea Mon Sep 17 00:00:00 2001 From: Parsa Arvaneh Date: Sun, 4 Aug 2024 13:02:59 +0330 Subject: [PATCH 6/6] feat(module:table): radio selection type --- components/table/doc/index.en-US.md | 88 +++++------ components/table/doc/index.zh-CN.md | 232 ++++++++++++++-------------- 2 files changed, 160 insertions(+), 160 deletions(-) diff --git a/components/table/doc/index.en-US.md b/components/table/doc/index.en-US.md index 5f99e16a8f3..6f586d05427 100644 --- a/components/table/doc/index.en-US.md +++ b/components/table/doc/index.en-US.md @@ -63,7 +63,7 @@ The data passed to `[nzData]` is exported with [Template Context](https://angula ### nz-table:standalone | Property | Description | Type | Default | Global Config | -|-----------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------|--------------------|---------------| +| --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------ | ------------- | | `[nzData]` | Data record array to be rendered | `T[]` | - | | `[nzFrontPagination]` | Whether to paginate data on client. Should be set to `false` if data is to be paginated on server side or if all the data is to be displayed at once in the table without any pagination | `boolean` | `true` | | `[nzTotal]` | Total data count. Should set when `nzFrontPagination` is `false` | `number` | - | @@ -73,25 +73,25 @@ The data passed to `[nzData]` is exported with [Template Context](https://angula | `[nzShowPagination]` | Whether to show pagination component at bottom of the table | `boolean` | `true` | | `[nzPaginationPosition]` | Specify the position of pagination | `'top' \| 'bottom' \| 'both'` | `bottom` | | `[nzPaginationType]` | Specify the size of pagination | `'default' \| 'small'` | `default` | -| `[nzBordered]` | Whether to show all table borders | `boolean` | `false` | ✅ | +| `[nzBordered]` | Whether to show all table borders | `boolean` | `false` | ✅ | | `[nzOuterBordered]` | Whether to show table outer borders | `boolean` | `false` | - | | `[nzWidthConfig]` | Set col width can not used with `[nzWidth]` of `th` | `string[]` | `[]` | -| `[nzSize]` | Size of table | `'middle' \| 'small' \| 'default'` | `'default'` | ✅ | +| `[nzSize]` | Size of table | `'middle' \| 'small' \| 'default'` | `'default'` | ✅ | | `[nzLoading]` | Loading status of table | `boolean` | `false` | -| `[nzLoadingIndicator]` | The loading indicator | `TemplateRef` | - | ✅ | +| `[nzLoadingIndicator]` | The loading indicator | `TemplateRef` | - | ✅ | | `[nzLoadingDelay]` | Specifies a delay in milliseconds for loading state (prevents flush) | `number` | `0` | | `[nzScroll]` | Whether table can be scrolled in x/y direction. `x` or `y` can be a string that indicates the width and height of table body | `object` | - | | `[nzTitle]` | Table title renderer | `string \| TemplateRef` | - | | `[nzFooter]` | Table footer renderer | `string \| TemplateRef` | - | | `[nzNoResult]` | Custom no result content | `string \| TemplateRef` | - | | `[nzPageSizeOptions]` | Specify the sizeChanger options | `number[]` | `[10, 20, 30, 40]` | -| `[nzShowQuickJumper]` | Determine whether you can jump to pages directly | `boolean` | `false` | ✅ | -| `[nzShowSizeChanger]` | Determine whether `nzPageSize` can be changed | `boolean` | `false` | ✅ | +| `[nzShowQuickJumper]` | Determine whether you can jump to pages directly | `boolean` | `false` | ✅ | +| `[nzShowSizeChanger]` | Determine whether `nzPageSize` can be changed | `boolean` | `false` | ✅ | | `[nzShowTotal]` | To display Pagination total number and range, same as Pagination | `TemplateRef<{ $implicit: number, range: [ number, number ] }>` | - | | `[nzItemRender]` | To customize Pagination item, same as Pagination | `TemplateRef<{ $implicit: 'page' \| 'prev' \| 'next', page: number }>` | - | | `[nzHideOnSinglePage]` | Whether to hide pagination on single page | `boolean` | `false` | -| `[nzSimple]` | Whether to use simple mode | `boolean` | - | ✅ | -| `[nzTemplateMode]` | Template mode，no need to pass data to `nzData` | `boolean` | `false` | +| `[nzSimple]` | Whether to use simple mode | `boolean` | - | ✅ | +| `[nzTemplateMode]` | Template mode，no need to pass data to `nzData` | `boolean` | `false` | | `[nzVirtualItemSize]` | The size of the items in the list, same as [cdk itemSize](https://material.angular.io/cdk/scrolling/api) | `number` | `0` | | `[nzVirtualMaxBufferPx]` | The number of pixels worth of buffer to render for when rendering new items, same as [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `200` | | `[nzVirtualMinBufferPx]` | The minimum amount of buffer rendered beyond the viewport (in pixels),same as [cdk minBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `100` | @@ -107,15 +107,15 @@ The data passed to `[nzData]` is exported with [Template Context](https://angula Checkbox property -| Property | Description | Type | Default | -|---------------------|-----------------------------------------------------|-------------------------|---------| -| `[nzShowCheckbox]` | Whether `nz-checkbox` should be shown in the header | `boolean` | - | -| `[nzDisabled]` | Whether the `nz-checkbox` is disabled | `boolean` | - | -| `[nzIndeterminate]` | `nz-checkbox` indeterminate status | `boolean` | - | -| `[nzLabel]` | ARIA label for the `nz-checkbox` | `string` | - | -| `[nzChecked]` | Checked status, double binding | `boolean` | - | +| Property | Description | Type | Default | +| ---------------------- | --------------------------------------------------- | ----------------------- | ------------ | +| `[nzShowCheckbox]` | Whether `nz-checkbox` should be shown in the header | `boolean` | - | +| `[nzDisabled]` | Whether the `nz-checkbox` is disabled | `boolean` | - | +| `[nzIndeterminate]` | `nz-checkbox` indeterminate status | `boolean` | - | +| `[nzLabel]` | ARIA label for the `nz-checkbox` | `string` | - | +| `[nzChecked]` | Checked status, double binding | `boolean` | - | | `[nzRowSelectionType]` | Checkbox or Radio | `'checkbox' \| 'radio'` | `'checkbox'` | -| `(nzCheckedChange)` | Callback when checked status changes | `EventEmitter` | - | +| `(nzCheckedChange)` | Callback when checked status changes | `EventEmitter` | - | Radio property @@ -125,16 +125,16 @@ Radio property Selection property -| Property | Description | Type | Default | -| ---------------------- | ------------------------------------------------------------------- | ---------------------------------------- | ------- | -| `[nzShowRowSelection]` | Whether to show row selection options | `boolean` | - | +| Property | Description | Type | Default | +| ---------------------- | ------------------------------------------------------------------- | ---------------------------------------- | ------------ | +| `[nzShowRowSelection]` | Whether to show row selection options | `boolean` | - | | `[nzRowSelectionType]` | Checkbox or Radio | `'checkbox' \| 'radio'` | `'checkbox'` | -| `[nzSelections]` | Selection options including `text` and `onSelect` callback function | `Array<{ text: string, onSelect: any }>` | - | +| `[nzSelections]` | Selection options including `text` and `onSelect` callback function | `Array<{ text: string, onSelect: any }>` | - | Sort property | Property | Description | Type | Default | -|-----------------------|------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------|-------------------------------| +| --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | ----------------------------- | | `[nzShowSort]` | Whether to display sorting | `boolean` | - | | `[nzSortFn]` | Sort function used to sort the data on client side (ref to Array.sort compareFunction). Should be set to `true` when using server side sorting | `NzTableSortFn \| boolean` | - | | `[nzSortOrder]` | Sort direction | `'ascend' \| 'descend' \| null` | - | @@ -144,7 +144,7 @@ Sort property Filter property | Property | Description | Type | Default | -|----------------------|--------------------------------------------------------------------------------------------------------|------------------------------------------------------------|---------| +| -------------------- | ------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------- | ------- | | `[nzShowFilter]` | Whether to show filter | `boolean` | - | | `[nzFilterFn]` | Filter function used to filter the data on client side. Set to `true` when using server side filtering | `NzTableFilterFn \| boolean` | - | | `[nzFilters]` | Filter options, `text`, and `value` for callback, `byDefault` to enable filter by default | `Array<{ text: string; value: any; byDefault?: boolean }>` | - | @@ -154,7 +154,7 @@ Filter property Style property | Property | Description | Type | Default | -|-------------------|--------------------------------------------------------------------------------------------------------------|---------------------------------|---------| +| ----------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------- | ------- | | `[nzWidth]` | Specify the column width (in pixels), can not used when grouping columns | `string` | - | | `[nzLeft]` | Left pixels, used to fixed column to left, auto calc when set to `true` and disable fixed when `false` | `string \| boolean` | - | | `[nzRight]` | Right pixels, used to fixed column to right, auto calc when set to `true` and disable fixed when `false` | `string \| boolean` | - | @@ -166,30 +166,30 @@ Style property Other | Property | Description | Type | Default | -|-----------------|----------------------------------------------|----------|---------| +| --------------- | -------------------------------------------- | -------- | ------- | | `[nzColumnKey]` | column key, work with server sort and filter | `string` | - | ### td Checkbox property -| Property | Description | Type | Default | -|---------------------|-----------------------------------|-------------------------|---------| -| `[nzShowCheckbox]` | Whether add nz-checkbox | `boolean` | - | -| `[nzDisabled]` | Whether disable checkbox | `boolean` | - | -| `[nzIndeterminate]` | Indeterminate status | `boolean` | - | -| `[nzLabel]` | ARIA label for the `nz-checkbox` | `string` | - | -| `[nzChecked]` | Checked status, double binding | `boolean` | - | -| `(nzCheckedChange)` | Checked status change callback | `EventEmitter` | - | +| Property | Description | Type | Default | +| ---------------------- | --------------------------------- | ----------------------- | ------------ | +| `[nzShowCheckbox]` | Whether add nz-checkbox | `boolean` | - | +| `[nzDisabled]` | Whether disable checkbox | `boolean` | - | +| `[nzIndeterminate]` | Indeterminate status | `boolean` | - | +| `[nzLabel]` | ARIA label for the `nz-checkbox` | `string` | - | +| `[nzChecked]` | Checked status, double binding | `boolean` | - | +| `(nzCheckedChange)` | Checked status change callback | `EventEmitter` | - | | `[nzRowSelectionType]` | Checkbox or Radio | `'checkbox' \| 'radio'` | `'checkbox'` | -| `[colSpan]` | how many columns the cell extends | `number` | `null` | -| `[rowSpan]` | how many rows the cell extends | `number` | `null` | +| `[colSpan]` | how many columns the cell extends | `number` | `null` | +| `[rowSpan]` | how many rows the cell extends | `number` | `null` | Radio property | Property | Description | Type | Default | | ---------------------- | --------------------------------- | ----------------------- | ------------ | -| `[nzDisabled]` | Whether disable checkbox | `boolean` | - | +| `[nzDisabled]` | Whether disable radio | `boolean` | - | | `[nzLabel]` | ARIA label for the `nz-checkbox` | `string` | - | | `[nzChecked]` | Checked status, double binding | `boolean` | - | | `(nzCheckedChange)` | Checked status change callback | `EventEmitter` | - | @@ -200,7 +200,7 @@ Radio property Expand property | Property | Description | Type | Default | -|--------------------|---------------------------------------|-------------------------|---------| +| ------------------ | ------------------------------------- | ----------------------- | ------- | | `[nzShowExpand]` | Whether show expand icon | `boolean` | - | | `[nzExpand]` | Current expand status, double binding | `boolean` | - | | `[nzExpandIcon]` | Custom expand icon | `TemplateRef` | - | @@ -209,7 +209,7 @@ Expand property Style property | Property | Description | Type | Default | -|-------------------|--------------------------------------------------------------------------------------------------------------|---------------------------------|---------| +| ----------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------- | ------- | | `[nzLeft]` | Left pixels, used to fixed column to left, auto calc when set to `true` and disable fixed when `false` | `string \| boolean` | - | | `[nzRight]` | Right pixels, used to fixed column to right, auto calc when set to `true` and disable fixed when `false` | `string \| boolean` | - | | `[nzAlign]` | Specify how content is aligned | `'left' \| 'right' \| 'center'` | - | @@ -220,25 +220,25 @@ Style property Other property | Property | Description | Type | Default | -|------------------|------------------------------------|----------|---------| +| ---------------- | ---------------------------------- | -------- | ------- | | `[nzIndentSize]` | Indent size in pixels of tree data | `number` | - | ### thead -| Property | Description | Type | Default | -|-----------------------|-------------------------------------------------------------|-----------------------------------------------------------------------|---------| +| Property | Description | Type | Default | +| --------------------- | ------------------------------------------------------------ | --------------------------------------------------------------------- | ------- | | `(nzSortOrderChange)` | sort change callback，should used with `nzColumnKey` of `th` | `EventEmitter<{ key: string, value: 'descend' \| 'ascend' \| null }>` | - | ### tr -| Property | Description | Type | Default | -|--------------|---------------------------------------------------------|-----------|---------| +| Property | Description | Type | Default | +| ------------ | -------------------------------------------------------- | --------- | ------- | | `[nzExpand]` | Whether expand current row，used with `nzExpand` of `td` | `boolean` | - | ### tfoot | Property | Description | Type | Default | -|---------------|-------------------------------------|--------------------------------|---------| +| ------------- | ----------------------------------- | ------------------------------ | ------- | | `[nzSummary]` | Summary content | `boolean` | - | | `[nzFixed]` | Fixed summary, used with `nzScroll` | `boolean \| 'top' \| 'bottom'` | `false` | @@ -247,7 +247,7 @@ Other property Customized filter panel | Property | Description | Type | Default | -|---------------------|---------------------------------------------------------------------------------------------------|---------------------------|---------| +| ------------------- | ------------------------------------------------------------------------------------------------- | ------------------------- | ------- | | `[nzDropdownMenu]` | Dropdown menu | `NzDropdownMenuComponent` | - | | `[nzVisible]` | whether the dropdown menu is visible, double binding | `boolean` | - | | `[nzActive]` | whether the icon status is activated | `boolean` | `false` | diff --git a/components/table/doc/index.zh-CN.md b/components/table/doc/index.zh-CN.md index ad8f17f3184..d6130c64679 100644 --- a/components/table/doc/index.zh-CN.md +++ b/components/table/doc/index.zh-CN.md @@ -63,58 +63,58 @@ Table 组件同时具备了易用性和高度可定制性 ### nz-table:standalone -| 参数 | 说明 | 类型 | 默认值 | 全局配置 | -|-----------------------------|---------------------------------------------------------------------------------------------|------------------------------------------------------------------------|--------------------------|------| -| `[nzData]` | 数据数组 | `T[]` | - | -| `[nzFrontPagination]` | 是否在前端对数据进行分页，如果在服务器分页数据或者需要在前端显示全部数据时传入 false | `boolean` | `true` | -| `[nzTotal]` | 当前总数据，在服务器渲染时需要传入 | `number` | - | -| `[nzCustomColumn]` | 控制表格列的展示与排序，(开启后 `nzWidthConfig` 和 `th` 的 `[nzWidth]` 将不生效) | `NzCustomColumn[]` | - | -| `[nzPageIndex]` | 当前页码，可双向绑定 | `number` | - | -| `[nzPageSize]` | 每页展示多少数据，可双向绑定 | `number` | - | -| `[nzShowPagination]` | 是否显示分页器 | `boolean` | `true` | -| `[nzPaginationPosition]` | 指定分页显示的位置 | `'top' \| 'bottom' \| 'both'` | `bottom` | -| `[nzPaginationType]` | 指定分页显示的尺寸 | `'default' \| 'small'` | `default` | -| `[nzBordered]` | 是否展示外边框和列边框 | `boolean` | `false` | ✅ | -| `[nzOuterBordered]` | 是否显示外边框 | `boolean` | `false` | - | -| `[nzWidthConfig]` | 表头分组时指定每列宽度，与 `th` 的 `[nzWidth]` 不可混用 | `string[]` | `[]` | -| `[nzSize]` | 正常或迷你类型 | `'middle' \| 'small' \| 'default'` | `'default'` | ✅ | -| `[nzLoading]` | 页面是否加载中 | `boolean` | `false` | -| `[nzLoadingIndicator]` | 加载指示符 | `TemplateRef` | - | ✅ | -| `[nzLoadingDelay]` | 延迟显示加载效果的时间（防止闪烁） | `number` | `0` | +| 参数 | 说明 | 类型 | 默认值 | 全局配置 | +| --------------------------- | -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------ | -------- | +| `[nzData]` | 数据数组 | `T[]` | - | +| `[nzFrontPagination]` | 是否在前端对数据进行分页，如果在服务器分页数据或者需要在前端显示全部数据时传入 false | `boolean` | `true` | +| `[nzTotal]` | 当前总数据，在服务器渲染时需要传入 | `number` | - | +| `[nzCustomColumn]` | 控制表格列的展示与排序，(开启后 `nzWidthConfig` 和 `th` 的 `[nzWidth]` 将不生效) | `NzCustomColumn[]` | - | +| `[nzPageIndex]` | 当前页码，可双向绑定 | `number` | - | +| `[nzPageSize]` | 每页展示多少数据，可双向绑定 | `number` | - | +| `[nzShowPagination]` | 是否显示分页器 | `boolean` | `true` | +| `[nzPaginationPosition]` | 指定分页显示的位置 | `'top' \| 'bottom' \| 'both'` | `bottom` | +| `[nzPaginationType]` | 指定分页显示的尺寸 | `'default' \| 'small'` | `default` | +| `[nzBordered]` | 是否展示外边框和列边框 | `boolean` | `false` | ✅ | +| `[nzOuterBordered]` | 是否显示外边框 | `boolean` | `false` | - | +| `[nzWidthConfig]` | 表头分组时指定每列宽度，与 `th` 的 `[nzWidth]` 不可混用 | `string[]` | `[]` | +| `[nzSize]` | 正常或迷你类型 | `'middle' \| 'small' \| 'default'` | `'default'` | ✅ | +| `[nzLoading]` | 页面是否加载中 | `boolean` | `false` | +| `[nzLoadingIndicator]` | 加载指示符 | `TemplateRef` | - | ✅ | +| `[nzLoadingDelay]` | 延迟显示加载效果的时间（防止闪烁） | `number` | `0` | | `[nzScroll]` | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度：`{ x: "300px", y: "300px" }` | `object` | - | -| `[nzTitle]` | 表格标题 | `string \| TemplateRef` | - | -| `[nzFooter]` | 表格尾部 | `string \| TemplateRef` | - | -| `[nzNoResult]` | 无数据时显示内容 | `string \| TemplateRef` | - | -| `[nzPageSizeOptions]` | 页数选择器可选值 | `number[]` | `[ 10, 20, 30, 40, 50 ]` | -| `[nzShowQuickJumper]` | 是否可以快速跳转至某页 | `boolean` | `false` | ✅ | -| `[nzShowSizeChanger]` | 是否可以改变 `nzPageSize` | `boolean` | `false` | ✅ | -| `[nzShowTotal]` | 用于显示数据总量和当前数据范围，用法参照 Pagination 组件 | `TemplateRef<{ $implicit: number, range: [ number, number ] }>` | - | -| `[nzItemRender]` | 用于自定义页码的结构，用法参照 Pagination 组件 | `TemplateRef<{ $implicit: 'page' \| 'prev' \| 'next', page: number }>` | - | -| `[nzHideOnSinglePage]` | 只有一页时是否隐藏分页器 | `boolean` | `false` | ✅ | -| `[nzSimple]` | 当添加该属性时，显示为简单分页 | `boolean` | - | ✅ | -| `[nzTemplateMode]` | 模板模式，无需将数据传递给 `nzData` | `boolean` | `false` | -| `[nzVirtualItemSize]` | 虚拟滚动时每一列的高度，与 [cdk itemSize](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `0` | -| `[nzVirtualMaxBufferPx]` | 缓冲区最大像素高度，与 [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `200` | +| `[nzTitle]` | 表格标题 | `string \| TemplateRef` | - | +| `[nzFooter]` | 表格尾部 | `string \| TemplateRef` | - | +| `[nzNoResult]` | 无数据时显示内容 | `string \| TemplateRef` | - | +| `[nzPageSizeOptions]` | 页数选择器可选值 | `number[]` | `[ 10, 20, 30, 40, 50 ]` | +| `[nzShowQuickJumper]` | 是否可以快速跳转至某页 | `boolean` | `false` | ✅ | +| `[nzShowSizeChanger]` | 是否可以改变 `nzPageSize` | `boolean` | `false` | ✅ | +| `[nzShowTotal]` | 用于显示数据总量和当前数据范围，用法参照 Pagination 组件 | `TemplateRef<{ $implicit: number, range: [ number, number ] }>` | - | +| `[nzItemRender]` | 用于自定义页码的结构，用法参照 Pagination 组件 | `TemplateRef<{ $implicit: 'page' \| 'prev' \| 'next', page: number }>` | - | +| `[nzHideOnSinglePage]` | 只有一页时是否隐藏分页器 | `boolean` | `false` | ✅ | +| `[nzSimple]` | 当添加该属性时，显示为简单分页 | `boolean` | - | ✅ | +| `[nzTemplateMode]` | 模板模式，无需将数据传递给 `nzData` | `boolean` | `false` | +| `[nzVirtualItemSize]` | 虚拟滚动时每一列的高度，与 [cdk itemSize](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `0` | +| `[nzVirtualMaxBufferPx]` | 缓冲区最大像素高度，与 [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `200` | | `[nzVirtualMinBufferPx]` | 缓冲区最小像素高度，低于该值时将加载新结构，与 [cdk minBufferPx](https://material.angular.io/cdk/scrolling/api) 相同 | `number` | `100` | -| `[nzVirtualForTrackBy]` | 虚拟滚动数据 `TrackByFunction` 函数 | `TrackByFunction` | - | -| `(nzPageIndexChange)` | 当前页码改变时的回调函数 | `EventEmitter` | - | -| `(nzPageSizeChange)` | 页数改变时的回调函数 | `EventEmitter` | - | -| `(nzCurrentPageDataChange)` | 当前页面展示数据改变的回调函数 | `EventEmitter` | - | -| `(nzCustomColumnChange)` | 当表格重新排序后的回调 | `EventEmitter` | - | -| `(nzQueryParams)` | 当服务端分页、筛选、排序时，用于获得参数，具体见示例 | `EventEmitter` | - | +| `[nzVirtualForTrackBy]` | 虚拟滚动数据 `TrackByFunction` 函数 | `TrackByFunction` | - | +| `(nzPageIndexChange)` | 当前页码改变时的回调函数 | `EventEmitter` | - | +| `(nzPageSizeChange)` | 页数改变时的回调函数 | `EventEmitter` | - | +| `(nzCurrentPageDataChange)` | 当前页面展示数据改变的回调函数 | `EventEmitter` | - | +| `(nzCustomColumnChange)` | 当表格重新排序后的回调 | `EventEmitter` | - | +| `(nzQueryParams)` | 当服务端分页、筛选、排序时，用于获得参数，具体见示例 | `EventEmitter` | - | ### th 勾选属性 -| 参数 | 说明 | 类型 | 默认值 | -|---------------------|---------------------------|-------------------------|-----| -| `[nzShowCheckbox]` | 是否添加 checkbox | `boolean` | - | -| `[nzDisabled]` | checkbox 是否禁用 | `boolean` | - | -| `[nzIndeterminate]` | checkbox indeterminate 状态 | `boolean` | - | -| `[nzLabel]` | checkbox 的可访问性标签 | `string` | - | -| `[nzChecked]` | checkbox 是否被选中，可双向绑定 | `boolean` | - | -| `(nzCheckedChange)` | 选中的回调 | `EventEmitter` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------------------- | ------------------------------- | ----------------------- | ------ | +| `[nzShowCheckbox]` | 是否添加 checkbox | `boolean` | - | +| `[nzDisabled]` | checkbox 是否禁用 | `boolean` | - | +| `[nzIndeterminate]` | checkbox indeterminate 状态 | `boolean` | - | +| `[nzLabel]` | checkbox 的可访问性标签 | `string` | - | +| `[nzChecked]` | checkbox 是否被选中，可双向绑定 | `boolean` | - | +| `(nzCheckedChange)` | 选中的回调 | `EventEmitter` | - | 单选属性 @@ -124,67 +124,67 @@ Table 组件同时具备了易用性和高度可定制性 下拉选择属性 -| 参数 | 说明 | 类型 | 默认值 | -|------------------------|---------------------------------|------------------------------------------|-----| -| `[nzShowRowSelection]` | 是否显示下拉选择 | `boolean` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ---------------------- | ------------------------------------------- | ---------------------------------------- | ------------ | +| `[nzShowRowSelection]` | 是否显示下拉选择 | `boolean` | - | | `[nzRowSelectionType]` | Checkbox or Radio | `'checkbox' \| 'radio'` | `'checkbox'` | -| `[nzSelections]` | 下拉选择的内容 `text` 及回调函数 `onSelect` | `Array<{ text: string, onSelect: any }>` | - | +| `[nzSelections]` | 下拉选择的内容 `text` 及回调函数 `onSelect` | `Array<{ text: string, onSelect: any }>` | - | 排序属性 -| 参数 | 说明 | 类型 | 默认值 | -|-----------------------|----------------------------------------------------------------|-----------------------------------------------|-------------------------------| -| `[nzShowSort]` | 是否显示排序 | `boolean` | - | +| 参数 | 说明 | 类型 | 默认值 | +| --------------------- | ----------------------------------------------------------------------------------------- | --------------------------------------------- | ----------------------------- | +| `[nzShowSort]` | 是否显示排序 | `boolean` | - | | `[nzSortFn]` | 排序函数，前端排序使用一个函数(参考 Array.sort 的 compareFunction)，服务端排序时传入 true | `NzTableSortFn \| boolean` | - | -| `[nzSortDirections]` | 支持的排序方式，取值为 `'ascend'`, `'descend'`, `null` | `Array<'ascend' \| 'descend' \| null>` | `['ascend', 'descend', null]` | -| `[nzSortOrder]` | 当前排序状态，可双向绑定 | 'descend' \| 'ascend' \| null | null | -| `(nzSortOrderChange)` | 排序状态改变回调 | `EventEmitter<'descend' \| 'ascend' \| null>` | - | +| `[nzSortDirections]` | 支持的排序方式，取值为 `'ascend'`, `'descend'`, `null` | `Array<'ascend' \| 'descend' \| null>` | `['ascend', 'descend', null]` | +| `[nzSortOrder]` | 当前排序状态，可双向绑定 | 'descend' \| 'ascend' \| null | null | +| `(nzSortOrderChange)` | 排序状态改变回调 | `EventEmitter<'descend' \| 'ascend' \| null>` | - | 过滤属性 -| 参数 | 说明 | 类型 | 默认值 | -|-------------------------|------------------------------------------------------------|------------------------------------------------------------|-----------| -| `[nzShowFilter]` | 是否显示过滤 | `boolean` | - | -| `[nzFilterFn]` | 前端排序时，确定筛选的运行函数，服务端排序时，传入 true | `NzTableFilterFn \| boolean` | - | -| `[noDataVirtualHeight]` | 没有数据时内部滚动的高度，如果没有传递任何内容，则使用默认值。 | `string` | `'182px'` | +| 参数 | 说明 | 类型 | 默认值 | +| ----------------------- | -------------------------------------------------------------------------------------- | ---------------------------------------------------------- | --------- | +| `[nzShowFilter]` | 是否显示过滤 | `boolean` | - | +| `[nzFilterFn]` | 前端排序时，确定筛选的运行函数，服务端排序时，传入 true | `NzTableFilterFn \| boolean` | - | +| `[noDataVirtualHeight]` | 没有数据时内部滚动的高度，如果没有传递任何内容，则使用默认值。 | `string` | `'182px'` | | `[nzFilters]` | 过滤器内容, 显示数据 `text`，回调函数传出 `value`，设置 `byDefault` 以默认应用过滤规则 | `Array<{ text: string; value: any; byDefault?: boolean }>` | - | -| `[nzFilterMultiple]` | 是否为多选过滤器 | `boolean` | `true` | -| `(nzFilterChange)` | 过滤器内容选择的 value 数据回调 | `EventEmitter` | - | +| `[nzFilterMultiple]` | 是否为多选过滤器 | `boolean` | `true` | +| `(nzFilterChange)` | 过滤器内容选择的 value 数据回调 | `EventEmitter` | - | 样式属性 -| 参数 | 说明 | 类型 | 默认值 | -|-------------------|-------------------------------------------------------------|---------------------------------|---------| -| `[nzWidth]` | 指定该列宽度，表头未分组时可用 | `string` | - | -| `[nzLeft]` | 左侧距离，用于固定左侧列，当为 `true` 时自动计算，为 `false` 时停止固定 | `string \| boolean` | `false` | -| `[nzRight]` | 右侧距离，用于固定右侧列，当为 `true` 时自动计算，为 `false` 时停止固定 | `string \| boolean` | `false` | -| `[nzAlign]` | 设置列内容的对齐方式 | `'left' \| 'right' \| 'center'` | - | -| `[nzCellControl]` | 设置列的位置，该值为 `NzCustomColumn` 类型中 `value` 字段的值 | `string` | - | -| `[nzBreakWord]` | 是否折行显示 | `boolean` | `false` | +| 参数 | 说明 | 类型 | 默认值 | +| ----------------- | ---------------------------------------------------------------------------------------------- | ------------------------------- | ------- | +| `[nzWidth]` | 指定该列宽度，表头未分组时可用 | `string` | - | +| `[nzLeft]` | 左侧距离，用于固定左侧列，当为 `true` 时自动计算，为 `false` 时停止固定 | `string \| boolean` | `false` | +| `[nzRight]` | 右侧距离，用于固定右侧列，当为 `true` 时自动计算，为 `false` 时停止固定 | `string \| boolean` | `false` | +| `[nzAlign]` | 设置列内容的对齐方式 | `'left' \| 'right' \| 'center'` | - | +| `[nzCellControl]` | 设置列的位置，该值为 `NzCustomColumn` 类型中 `value` 字段的值 | `string` | - | +| `[nzBreakWord]` | 是否折行显示 | `boolean` | `false` | | `[nzEllipsis]` | 超过宽度将自动省略，暂不支持和排序筛选一起使用。仅当表格布局将为 `nzTableLayout="fixed"`时可用 | `boolean` | `false` | -| `[colSpan]` | 每单元格中扩展列的数量 | `number` | `null` | -| `[rowSpan]` | 每单元格中扩展行的数量 | `number` | `null` | +| `[colSpan]` | 每单元格中扩展列的数量 | `number` | `null` | +| `[rowSpan]` | 每单元格中扩展行的数量 | `number` | `null` | 其他 -| 参数 | 说明 | 类型 | 默认值 | -|-----------------|-----------------------|----------|-----| -| `[nzColumnKey]` | 当前列的 key，用于服务端筛选和排序使用 | `string` | - | +| 参数 | 说明 | 类型 | 默认值 | +| --------------- | -------------------------------------- | -------- | ------ | +| `[nzColumnKey]` | 当前列的 key，用于服务端筛选和排序使用 | `string` | - | ### td 勾选属性 -| 参数 | 说明 | 类型 | 默认值 | -|---------------------|---------------------------|-------------------------|--------| -| `[nzShowCheckbox]` | 是否添加 checkbox | `boolean` | - | -| `[nzDisabled]` | checkbox 是否禁用 | `boolean` | - | -| `[nzIndeterminate]` | checkbox indeterminate 状态 | `boolean` | - | -| `[nzLabel]` | checkbox 的可访问性标签 | `string` | - | -| `[nzChecked]` | checkbox 是否被选中，可双向绑定 | `boolean` | - | -| `(nzCheckedChange)` | 选中的回调 | `EventEmitter` | - | -| `[colSpan]` | 单元格可横跨的列数 | `number` | `null` | -| `[rowSpan]` | 单元格可横跨的行数 | `number` | `null` | +| 参数 | 说明 | 类型 | 默认值 | +| ------------------- | ------------------------------- | ----------------------- | ------ | +| `[nzShowCheckbox]` | 是否添加 checkbox | `boolean` | - | +| `[nzDisabled]` | checkbox 是否禁用 | `boolean` | - | +| `[nzIndeterminate]` | checkbox indeterminate 状态 | `boolean` | - | +| `[nzLabel]` | checkbox 的可访问性标签 | `string` | - | +| `[nzChecked]` | checkbox 是否被选中，可双向绑定 | `boolean` | - | +| `(nzCheckedChange)` | 选中的回调 | `EventEmitter` | - | +| `[colSpan]` | 单元格可横跨的列数 | `number` | `null` | +| `[rowSpan]` | 单元格可横跨的行数 | `number` | `null` | 勾选属性 @@ -200,59 +200,59 @@ Table 组件同时具备了易用性和高度可定制性 展开属性 -| 参数 | 说明 | 类型 | 默认值 | -|--------------------|----------------|-------------------------|-----| -| `[nzShowExpand]` | 是否显示展开按钮 | `boolean` | - | -| `[nzExpand]` | 当前展开按钮状态，可双向绑定 | `boolean` | - | -| `[nzExpandIcon]` | 自定义展开图标 | `TemplateRef` | - | -| `(nzExpandChange)` | 当前展开按钮状态改变回调函数 | `EventEmitter` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------------------ | ---------------------------- | ----------------------- | ------ | +| `[nzShowExpand]` | 是否显示展开按钮 | `boolean` | - | +| `[nzExpand]` | 当前展开按钮状态，可双向绑定 | `boolean` | - | +| `[nzExpandIcon]` | 自定义展开图标 | `TemplateRef` | - | +| `(nzExpandChange)` | 当前展开按钮状态改变回调函数 | `EventEmitter` | - | 样式属性 -| 参数 | 说明 | 类型 | 默认值 | -|-------------------|-------------------------------------------------------------|---------------------------------|---------| -| `[nzLeft]` | 左侧距离，用于固定左侧列，当为 `true` 时自动计算，为 `false` 时停止固定 | `string \| boolean` | `false` | -| `[nzRight]` | 右侧距离，用于固定右侧列，当为 `true` 时自动计算，为 `false` 时停止固定 | `string \| boolean` | `false` | -| `[nzAlign]` | 设置列内容的对齐方式 | `'left' \| 'right' \| 'center'` | - | -| `[nzCellControl]` | 设置列的位置，该值为 `NzCustomColumn` 类型中 `value` 字段的值 | `string` | - | -| `[nzBreakWord]` | 是否折行显示 | `boolean` | `false` | +| 参数 | 说明 | 类型 | 默认值 | +| ----------------- | ---------------------------------------------------------------------------------------------- | ------------------------------- | ------- | +| `[nzLeft]` | 左侧距离，用于固定左侧列，当为 `true` 时自动计算，为 `false` 时停止固定 | `string \| boolean` | `false` | +| `[nzRight]` | 右侧距离，用于固定右侧列，当为 `true` 时自动计算，为 `false` 时停止固定 | `string \| boolean` | `false` | +| `[nzAlign]` | 设置列内容的对齐方式 | `'left' \| 'right' \| 'center'` | - | +| `[nzCellControl]` | 设置列的位置，该值为 `NzCustomColumn` 类型中 `value` 字段的值 | `string` | - | +| `[nzBreakWord]` | 是否折行显示 | `boolean` | `false` | | `[nzEllipsis]` | 超过宽度将自动省略，暂不支持和排序筛选一起使用。仅当表格布局将为 `nzTableLayout="fixed"`时可用 | `boolean` | `false` | 其他 -| 参数 | 说明 | 类型 | 默认值 | -|------------------|--------------------------|----------|-----| -| `[nzIndentSize]` | 展示树形数据时，每层缩进的宽度，以 px 为单位 | `number` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ---------------- | -------------------------------------------- | -------- | ------ | +| `[nzIndentSize]` | 展示树形数据时，每层缩进的宽度，以 px 为单位 | `number` | - | ### thead -| 参数 | 说明 | 类型 | 默认值 | -|-----------------------|-----------------------------------------|-----------------------------------------------------------------------|-----| -| `(nzSortOrderChange)` | 排序状态改变回调，需要与 `th` 上的 `nzColumnKey` 同时使用 | `EventEmitter<{ key: string, value: 'descend' \| 'ascend' \| null }>` | - | +| 参数 | 说明 | 类型 | 默认值 | +| --------------------- | --------------------------------------------------------- | --------------------------------------------------------------------- | ------ | +| `(nzSortOrderChange)` | 排序状态改变回调，需要与 `th` 上的 `nzColumnKey` 同时使用 | `EventEmitter<{ key: string, value: 'descend' \| 'ascend' \| null }>` | - | ### tr -| 参数 | 说明 | 类型 | 默认值 | -|--------------|-------------------------------------|-----------|-----| -| `[nzExpand]` | 当前列是否展开，与 `td` 上的 `nzExpand` 属性配合使用 | `boolean` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------------ | ---------------------------------------------------- | --------- | ------ | +| `[nzExpand]` | 当前列是否展开，与 `td` 上的 `nzExpand` 属性配合使用 | `boolean` | - | ### tfoot -| 参数 | 说明 | 类型 | 默认值 | -|---------------|-----------------------------|--------------------------------|---------| -| `[nzSummary]` | 总结栏 | `boolean` | - | +| 参数 | 说明 | 类型 | 默认值 | +| ------------- | ------------------------------------------ | ------------------------------ | ------- | +| `[nzSummary]` | 总结栏 | `boolean` | - | | `[nzFixed]` | 总结栏是否固定，与 `nzScroll` 属性配合使用 | `boolean \| 'top' \| 'bottom'` | `false` | ### nz-filter-trigger:standalone 用于自定义筛选功能 -| 参数 | 说明 | 类型 | 默认值 | -|---------------------|---------------------------|---------------------------|---------| -| `[nzDropdownMenu]` | Dropdown 下拉菜单组件 | `NzDropdownMenuComponent` | - | -| `[nzVisible]` | 菜单是否显示，可双向绑定 | `boolean` | - | -| `[nzActive]` | 是否激活选中图标效果 | `boolean` | `false` | -| `[nzHasBackdrop]` | 是否附带背景板 | `boolean` | `false` | +| 参数 | 说明 | 类型 | 默认值 | +| ------------------- | ---------------------------------------- | ------------------------- | ------- | +| `[nzDropdownMenu]` | Dropdown 下拉菜单组件 | `NzDropdownMenuComponent` | - | +| `[nzVisible]` | 菜单是否显示，可双向绑定 | `boolean` | - | +| `[nzActive]` | 是否激活选中图标效果 | `boolean` | `false` | +| `[nzHasBackdrop]` | 是否附带背景板 | `boolean` | `false` | | `(nzVisibleChange)` | 菜单显示状态改变时调用，参数为 nzVisible | `EventEmitter` | - | ### [nz-virtual-scroll]:standalone