feat(module:table): support nzPaginationType property (#5986)

Co-authored-by: xulang <[email protected]>

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 {
     <div class="components-table-demo-control-bar">
       <form nz-form nzLayout="inline" [formGroup]="settingForm!">
         <nz-form-item *ngFor="let switch of listOfSwitch">
-          <nz-form-label> {{ switch.name }} </nz-form-label>
+          <nz-form-label>{{ switch.name }}</nz-form-label>
           <nz-form-control><nz-switch [formControlName]="switch.formControlName"></nz-switch></nz-form-control>
         </nz-form-item>
         <nz-form-item *ngFor="let radio of listOfRadio">
-          <nz-form-label> {{ radio.name }} </nz-form-label>
+          <nz-form-label>{{ radio.name }}</nz-form-label>
           <nz-form-control>
             <nz-radio-group [formControlName]="radio.formControlName">
               <label *ngFor="let o of radio.listOfOption" nz-radio-button [nzValue]="o.value">{{ o.label }}</label>
@@ -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 {
             </td>
           </tr>
           <tr *ngIf="settingValue.expandable" [nzExpand]="data.expand">
-            <span> {{ data.description }}</span>
+            <span>{{ data.description }}</span>
           </tr>
         </ng-container>
       </tbody>
@@ -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'

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` | ✅ |
 | `[nzOuterBordered]` | Whether to show table outer borders | `boolean` | `false` | - |
 | `[nzWidthConfig]` | Set col width can not used with `[nzWidth]` of `th` | `string[]` | `[]` |

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` | ✅ |
 | `[nzOuterBordered]` | 是否显示外边框 | `boolean` | `false` | - |
 | `[nzWidthConfig]` | 表头分组时指定每列宽度，与 `th` 的 `[nzWidth]` 不可混用 | `string[]` | `[]` |

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;

components/table/src/table/table.component.ts

@@ -34,7 +34,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';
 
@@ -107,7 +114,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"
@@ -157,6 +164,7 @@ export class NzTableComponent<T = NzSafeAny> 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;