diff --git a/components/table/demo/dynamic-settings.ts b/components/table/demo/dynamic-settings.ts index 7bf379d3873..452971b09ef 100644 --- a/components/table/demo/dynamic-settings.ts +++ b/components/table/demo/dynamic-settings.ts @@ -1,6 +1,6 @@ import { Component, OnInit } from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; -import { NzTableLayout, NzTablePaginationPosition, NzTableSize } from 'ng-zorro-antd/table'; +import { NzTableLayout, NzTablePaginationPosition, NzTablePaginationType, NzTableSize } from 'ng-zorro-antd/table'; interface ItemData { name: string; @@ -30,6 +30,7 @@ interface Setting { tableScroll: string; tableLayout: NzTableLayout; position: NzTablePaginationPosition; + paginationType: NzTablePaginationType; } @Component({ @@ -38,11 +39,11 @@ interface Setting {
- {{ switch.name }} + {{ switch.name }} - {{ radio.name }} + {{ radio.name }} @@ -59,6 +60,7 @@ interface Setting { [nzBordered]="settingValue.bordered" [nzSimple]="settingValue.simple" [nzLoading]="settingValue.loading" + [nzPaginationType]="settingValue.paginationType" [nzPaginationPosition]="settingValue.position" [nzShowSizeChanger]="settingValue.sizeChanger" [nzFrontPagination]="settingValue.pagination" @@ -100,7 +102,7 @@ interface Setting { - {{ data.description }} + {{ data.description }} @@ -175,6 +177,14 @@ export class NzDemoTableDynamicSettingsComponent implements OnInit { { value: 'bottom', label: 'Bottom' }, { value: 'both', label: 'Both' } ] + }, + { + name: 'Pagination Type', + formControlName: 'paginationType', + listOfOption: [ + { value: 'default', label: 'Default' }, + { value: 'small', label: 'Small' } + ] } ]; @@ -233,6 +243,7 @@ export class NzDemoTableDynamicSettingsComponent implements OnInit { ellipsis: false, simple: false, size: 'small', + paginationType: 'default', tableScroll: 'unset', tableLayout: 'auto', position: 'bottom' diff --git a/components/table/doc/index.en-US.md b/components/table/doc/index.en-US.md index a75ef9e9cda..92ee50681e0 100644 --- a/components/table/doc/index.en-US.md +++ b/components/table/doc/index.en-US.md @@ -71,6 +71,7 @@ The data passed to `[nzData]` is exported with [Template Context](https://angula | `[nzPageSize]` | pageSize, double binding | `number` | - | | `[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` | ✅ | | `[nzOutBordered]` | Whether to show table outer borders | `boolean` | `false` | - | | `[nzWidthConfig]` | Set col width can not used with `[nzWidth]` of `th` | `string[]` | `[]` | diff --git a/components/table/doc/index.zh-CN.md b/components/table/doc/index.zh-CN.md index 1cb45ad284a..72eb2406060 100644 --- a/components/table/doc/index.zh-CN.md +++ b/components/table/doc/index.zh-CN.md @@ -72,6 +72,7 @@ Table 组件同时具备了易用性和高度可定制性 | `[nzPageSize]` | 每页展示多少数据,可双向绑定 | `number` | - | | `[nzShowPagination]` | 是否显示分页器 | `boolean` | `true` | | `[nzPaginationPosition]` | 指定分页显示的位置 | `'top' \| 'bottom' \| 'both'` | `bottom` | +| `[nzPaginationType]` | 指定分页显示的尺寸 | `'default' \| 'small'` | `default` | | `[nzBordered]` | 是否展示外边框和列边框 | `boolean` | `false` | ✅ | | `[nzOutBordered]` | 是否显示外边框 | `boolean` | `false` | - | | `[nzWidthConfig]` | 表头分组时指定每列宽度,与 `th` 的 `[nzWidth]` 不可混用 | `string[]` | `[]` | diff --git a/components/table/src/table.types.ts b/components/table/src/table.types.ts index 45a2840593c..430010041a5 100644 --- a/components/table/src/table.types.ts +++ b/components/table/src/table.types.ts @@ -12,6 +12,7 @@ export type NzTableData = }; export type NzTableLayout = 'fixed' | 'auto'; export type NzTablePaginationPosition = 'top' | 'bottom' | 'both'; +export type NzTablePaginationType = 'default' | 'small'; export type NzTableSize = 'middle' | 'default' | 'small'; export type NzTableFilterList = Array<{ text: string; value: NzSafeAny; byDefault?: boolean }>; export type NzTableSortOrder = string | 'ascend' | 'descend' | null; diff --git a/components/table/src/table/table.component.ts b/components/table/src/table/table.component.ts index 58923066a12..56b83089ef2 100644 --- a/components/table/src/table/table.component.ts +++ b/components/table/src/table/table.component.ts @@ -32,7 +32,14 @@ import { BehaviorSubject, combineLatest, Subject } from 'rxjs'; import { filter, map, takeUntil } from 'rxjs/operators'; import { NzTableDataService } from '../table-data.service'; import { NzTableStyleService } from '../table-style.service'; -import { NzTableData, NzTableLayout, NzTablePaginationPosition, NzTableQueryParams, NzTableSize } from '../table.types'; +import { + NzTableData, + NzTableLayout, + NzTablePaginationPosition, + NzTablePaginationType, + NzTableQueryParams, + NzTableSize +} from '../table.types'; import { NzTableInnerScrollComponent } from './table-inner-scroll.component'; import { NzTableVirtualScrollDirective } from './table-virtual-scroll.directive'; @@ -103,7 +110,7 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'table'; [nzShowQuickJumper]="nzShowQuickJumper" [nzHideOnSinglePage]="nzHideOnSinglePage" [nzShowTotal]="nzShowTotal" - [nzSize]="nzSize === 'default' ? 'default' : 'small'" + [nzSize]="nzPaginationType === 'small' ? 'small' : nzSize === 'default' ? 'default' : 'small'" [nzPageSize]="nzPageSize" [nzTotal]="nzTotal" [nzSimple]="nzSimple" @@ -153,6 +160,7 @@ export class NzTableComponent implements OnInit, OnDestroy, OnCha @Input() nzData: T[] = []; @Input() nzPaginationPosition: NzTablePaginationPosition = 'bottom'; @Input() nzScroll: { x?: string | null; y?: string | null } = { x: null, y: null }; + @Input() nzPaginationType: NzTablePaginationType = 'default'; @Input() @InputBoolean() nzFrontPagination = true; @Input() @InputBoolean() nzTemplateMode = false; @Input() @InputBoolean() nzShowPagination = true;