Merge pull request #1768 from abpframework/feature/table-empty-template

feature: add empty template to tables

npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html

@@ -23,6 +23,7 @@
       /></label>
     </div>
     <p-table
+      *ngIf="[65, 200] as columnWidths"
       [value]="data$ | async"
       [lazy]="true"
       [lazyLoadOnInit]="false"
@@ -36,9 +37,17 @@
     >
       <ng-template pTemplate="colgroup">
         <colgroup>
-          <col *ngFor="let width of [65, 200]" [ngStyle]="{ 'width.px': width }" />
+          <col *ngFor="let width of columnWidths" [ngStyle]="{ 'width.px': width }" />
         </colgroup>
       </ng-template>
+      <ng-template pTemplate="emptymessage" let-columns>
+        <tr
+          abp-table-empty-message
+          [attr.colspan]="columnWidths.length"
+          localizationResource="AbpIdentityServer"
+          localizationProp="NoDataAvailableInDatatable"
+        ></tr>
+      </ng-template>
       <ng-template pTemplate="header" let-columns>
         <tr>
           <th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>

npm/ng-packs/packages/identity/src/lib/components/users/users.component.html

@@ -29,6 +29,7 @@
       /></label>
     </div>
     <p-table
+      *ngIf="[80, 200, 200, 200] as columnWidths"
       [value]="data$ | async"
       [lazy]="true"
       [lazyLoadOnInit]="false"
@@ -42,9 +43,17 @@
     >
       <ng-template pTemplate="colgroup">
         <colgroup>
-          <col *ngFor="let width of [80, 200, 200, 200]" [ngStyle]="{ 'width.px': width }" />
+          <col *ngFor="let width of columnWidths" [ngStyle]="{ 'width.px': width }" />
         </colgroup>
       </ng-template>
+      <ng-template pTemplate="emptymessage" let-columns>
+        <tr
+          abp-table-empty-message
+          [attr.colspan]="columnWidths.length"
+          localizationResource="AbpIdentityServer"
+          localizationProp="NoDataAvailableInDatatable"
+        ></tr>
+      </ng-template>
       <ng-template pTemplate="header">
         <tr>
           <th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>

npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html

@@ -30,6 +30,7 @@
       /></label>
     </div>
     <p-table
+      *ngIf="[65, 200] as columnWidths"
       [value]="data$ | async | abpSort: sortOrder"
       [lazy]="true"
       [lazyLoadOnInit]="false"
@@ -43,9 +44,17 @@
     >
       <ng-template pTemplate="colgroup">
         <colgroup>
-          <col *ngFor="let width of [65, 200]" [ngStyle]="{ 'width.px': width }" />
+          <col *ngFor="let width of columnWidths" [ngStyle]="{ 'width.px': width }" />
         </colgroup>
       </ng-template>
+      <ng-template pTemplate="emptymessage" let-columns>
+        <tr
+          abp-table-empty-message
+          [attr.colspan]="columnWidths.length"
+          localizationResource="AbpTenantManagement"
+          localizationProp="NoDataAvailableInDatatable"
+        ></tr>
+      </ng-template>
       <ng-template pTemplate="header" let-columns>
         <tr>
           <th>{{ 'AbpTenantManagement::Actions' | abpLocalization }}</th>