diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
index 3ecc6413ea..9d87bae629 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
+++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.html
@@ -20,22 +20,7 @@
   </div>
 
   <div class="card-body">
-    <ngx-datatable
-      [rows]="data$ | async"
-      [loadingIndicator]="list.isLoading$ | async"
-      [externalSorting]="true"
-      (sort)="sort($event)"
-      [externalPaging]="true"
-      [count]="totalCount$ | async"
-      [offset]="list.page"
-      [limit]="list.maxResultCount"
-      (page)="list.page = $event.offset"
-      [headerHeight]="50"
-      [footerHeight]="50"
-      columnMode="force"
-      rowHeight="auto"
-      class="material"
-    >
+    <ngx-datatable [rows]="data$ | async" [count]="totalCount$ | async" [abpList]="list">
       <ngx-datatable-column
         [name]="'AbpIdentity::Actions' | abpLocalization"
         [maxWidth]="150"
diff --git a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
index e17ad21ce0..f1604c39aa 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
+++ b/npm/ng-packs/packages/identity/src/lib/components/users/users.component.html
@@ -30,23 +30,7 @@
       </div>
     </div>
 
-    <ngx-datatable
-      [rows]="data$ | async"
-      [loadingIndicator]="list.isLoading$ | async"
-      [externalSorting]="true"
-      (sort)="sort($event)"
-      [externalPaging]="true"
-      [count]="totalCount$ | async"
-      [offset]="list.page"
-      [limit]="list.maxResultCount"
-      (page)="list.page = $event.offset"
-      [headerHeight]="50"
-      [footerHeight]="50"
-      [scrollbarH]="true"
-      columnMode="force"
-      rowHeight="auto"
-      class="material"
-    >
+    <ngx-datatable [rows]="data$ | async" [count]="totalCount$ | async" [abpList]="list">
       <ngx-datatable-column
         [name]="'AbpIdentity::Actions' | abpLocalization"
         [maxWidth]="150"
diff --git a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
index a73ccef949..c3b8eb2ad3 100644
--- a/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
+++ b/npm/ng-packs/packages/tenant-management/src/lib/components/tenants/tenants.component.html
@@ -31,22 +31,7 @@
       </div>
     </div>
 
-    <ngx-datatable
-      [rows]="data$ | async"
-      [loadingIndicator]="list.isLoading$ | async"
-      [externalSorting]="true"
-      (sort)="sort($event)"
-      [externalPaging]="true"
-      [count]="totalCount$ | async"
-      [offset]="list.page"
-      [limit]="list.maxResultCount"
-      (page)="list.page = $event.offset"
-      [headerHeight]="50"
-      [footerHeight]="50"
-      columnMode="force"
-      rowHeight="auto"
-      class="material"
-    >
+    <ngx-datatable [rows]="data$ | async" [count]="totalCount$ | async" [abpList]="list">
       <ngx-datatable-column
         [name]="'AbpTenantManagement::Actions' | abpLocalization"
         [maxWidth]="150"