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 9962d8dbb4..d71f6cce5e 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
@@ -19,90 +19,70 @@
     </div>
   </div>
 
-  <div class="card-body">
-    <abp-table
-      *ngIf="[150, 0] as columnWidths"
-      [abpLoading]="loading"
-      [abpLoadingDelay]="500"
-      [abpTableSort]="{ key: sortKey, order: sortOrder }"
-      [colgroupTemplate]="tableColGroup"
-      [headerTemplate]="tableHeader"
-      [bodyTemplate]="tableBody"
-      [value]="data$ | async"
-      [rows]="pageQuery.maxResultCount"
-      [totalRecords]="totalCount$ | async"
-      [scrollable]="true"
-      (pageChange)="onPageChange($event)"
+  <div class="">
+    <ngx-datatable
+      [rows]="data$ | async"
+      [loadingIndicator]="list.isLoading$ | async"
+      [externalSorting]="true"
+      (sort)="onSort($event)"
+      [externalPaging]="true"
+      [count]="totalCount$ | async"
+      [offset]="list.page - 1"
+      [limit]="list.maxResultCount"
+      (page)="list.page = $event.offset + 1"
+      [headerHeight]="50"
+      [footerHeight]="50"
+      columnMode="force"
+      rowHeight="auto"
+      class="material"
     >
-      <ng-template #tableColGroup>
-        <colgroup>
-          <col *ngFor="let width of columnWidths" [ngStyle]="{ 'width.px': width || undefined }" />
-        </colgroup>
-      </ng-template>
-      <ng-template #tableHeader>
-        <tr>
-          <th>{{ 'AbpIdentity::Actions' | abpLocalization }}</th>
-          <th (click)="sortOrderIcon.sort('name')">
-            {{ 'AbpIdentity::RoleName' | abpLocalization }}
-            <abp-sort-order-icon
-              #sortOrderIcon
-              sortKey="name"
-              [(selectedSortKey)]="sortKey"
-              [(order)]="sortOrder"
-            ></abp-sort-order-icon>
-          </th>
-        </tr>
-      </ng-template>
-      <ng-template #tableBody let-data>
-        <tr>
-          <td class="text-center">
-            <div ngbDropdown container="body" class="d-inline-block">
+      <ngx-datatable-column
+        [name]="'AbpIdentity::Actions' | abpLocalization"
+        [maxWidth]="150"
+        [sortable]="false"
+      >
+        <ng-template let-value="value" ngx-datatable-cell-template>
+          <div ngbDropdown container="body" class="d-inline-block">
+            <button
+              class="btn btn-primary btn-sm dropdown-toggle"
+              data-toggle="dropdown"
+              aria-haspopup="true"
+              ngbDropdownToggle
+            >
+              <i class="fa fa-cog mr-1"></i>{{ 'AbpIdentity::Actions' | abpLocalization }}
+            </button>
+            <div ngbDropdownMenu>
               <button
-                class="btn btn-primary btn-sm dropdown-toggle"
-                data-toggle="dropdown"
-                aria-haspopup="true"
-                ngbDropdownToggle
+                *abpPermission="'AbpIdentity.Roles.Update'"
+                ngbDropdownItem
+                (click)="edit(value.id)"
               >
-                <i class="fa fa-cog mr-1"></i>{{ 'AbpIdentity::Actions' | abpLocalization }}
+                {{ 'AbpIdentity::Edit' | abpLocalization }}
+              </button>
+              <button
+                *abpPermission="'AbpIdentity.Roles.ManagePermissions'"
+                ngbDropdownItem
+                (click)="openPermissionsModal(value.name)"
+              >
+                {{ 'AbpIdentity::Permissions' | abpLocalization }}
+              </button>
+              <button
+                *ngIf="!value.isStatic"
+                [abpPermission]="'AbpIdentity.Roles.Delete'"
+                ngbDropdownItem
+                (click)="delete(value.id, value.name)"
+              >
+                {{ 'AbpIdentity::Delete' | abpLocalization }}
               </button>
-              <div ngbDropdownMenu>
-                <button
-                  *abpPermission="'AbpIdentity.Roles.Update'"
-                  ngbDropdownItem
-                  (click)="edit(data.id)"
-                >
-                  {{ 'AbpIdentity::Edit' | abpLocalization }}
-                </button>
-                <button
-                  *abpPermission="'AbpIdentity.Roles.ManagePermissions'"
-                  ngbDropdownItem
-                  (click)="openPermissionsModal(data.name)"
-                >
-                  {{ 'AbpIdentity::Permissions' | abpLocalization }}
-                </button>
-                <button
-                  *ngIf="!data.isStatic"
-                  [abpPermission]="'AbpIdentity.Roles.Delete'"
-                  ngbDropdownItem
-                  (click)="delete(data.id, data.name)"
-                >
-                  {{ 'AbpIdentity::Delete' | abpLocalization }}
-                </button>
-              </div>
             </div>
-          </td>
-          <td>
-            {{ data.name
-            }}<span *ngIf="data.isDefault" class="badge badge-pill badge-success ml-1">{{
-              'AbpIdentity::DisplayName:IsDefault' | abpLocalization
-            }}</span>
-            <span *ngIf="data.isPublic" class="badge badge-pill badge-info ml-1">{{
-              'AbpIdentity::DisplayName:IsPublic' | abpLocalization
-            }}</span>
-          </td>
-        </tr>
-      </ng-template>
-    </abp-table>
+          </div>
+        </ng-template>
+      </ngx-datatable-column>
+      <ngx-datatable-column
+        [name]="'AbpIdentity::RoleName' | abpLocalization"
+        prop="name"
+      ></ngx-datatable-column>
+    </ngx-datatable>
   </div>
 </div>
 
diff --git a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
index 5e0f64e811..e2dc5fa59d 100644
--- a/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
+++ b/npm/ng-packs/packages/identity/src/lib/components/roles/roles.component.ts
@@ -1,5 +1,6 @@
-import { ABP } from '@abp/ng.core';
-import { ConfirmationService, Confirmation } from '@abp/ng.theme.shared';
+import { ListService } from '@abp/ng.core';
+import { ePermissionManagementComponents } from '@abp/ng.permission-management';
+import { Confirmation, ConfirmationService } from '@abp/ng.theme.shared';
 import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { Select, Store } from '@ngxs/store';
@@ -14,11 +15,11 @@ import {
 } from '../../actions/identity.actions';
 import { Identity } from '../../models/identity';
 import { IdentityState } from '../../states/identity.state';
-import { ePermissionManagementComponents } from '@abp/ng.permission-management';
 
 @Component({
   selector: 'abp-roles',
   templateUrl: './roles.component.html',
+  providers: [ListService],
 })
 export class RolesComponent implements OnInit {
   @Select(IdentityState.getRoles)
@@ -37,16 +38,10 @@ export class RolesComponent implements OnInit {
 
   providerKey: string;
 
-  pageQuery: ABP.PageQueryParams = { maxResultCount: 10 };
-
   loading = false;
 
   modalBusy = false;
 
-  sortOrder = '';
-
-  sortKey = '';
-
   permissionManagementKey = ePermissionManagementComponents.PermissionManagement;
 
   @ViewChild('formRef', { static: false, read: ElementRef })
@@ -57,6 +52,7 @@ export class RolesComponent implements OnInit {
   };
 
   constructor(
+    public readonly list: ListService,
     private confirmationService: ConfirmationService,
     private fb: FormBuilder,
     private store: Store,
@@ -126,18 +122,8 @@ export class RolesComponent implements OnInit {
       });
   }
 
-  onPageChange(page: number) {
-    this.pageQuery.skipCount = (page - 1) * this.pageQuery.maxResultCount;
-
-    this.get();
-  }
-
   get() {
-    this.loading = true;
-    this.store
-      .dispatch(new GetRoles(this.pageQuery))
-      .pipe(finalize(() => (this.loading = false)))
-      .subscribe();
+    this.list.hookToQuery(query => this.store.dispatch(new GetRoles(query))).subscribe();
   }
 
   onClickSaveButton() {
@@ -152,4 +138,10 @@ export class RolesComponent implements OnInit {
       this.visiblePermissions = true;
     }, 0);
   }
+
+  onSort(event) {
+    const { prop, dir } = event.sorts[0];
+    this.list.sortKey = prop;
+    this.list.sortOrder = dir;
+  }
 }