From 9fe38e02f36bd1b2ea8e15e7bd0de7f02629a3dd Mon Sep 17 00:00:00 2001
From: David Requeno <108202767+DavidReque@users.noreply.github.com>
Date: Sat, 7 Mar 2026 02:03:31 -0600
Subject: [PATCH] Feature/enable column sorting in data provider table (#6476)

* Enable column sorting

* Update changelog
---
 CHANGELOG.md                                  |  4 ++++
 .../admin-settings.component.html             | 23 ++++++++++++++++---
 .../admin-settings.component.ts               | 10 +++++++-
 3 files changed, 33 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b2b2eb1ca..9a837052a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added support for column sorting to the data providers management of the admin control panel
+
 ### Changed
 
 - Included asset profile data in the endpoint `GET api/v1/portfolio/holdings`
diff --git a/apps/client/src/app/components/admin-settings/admin-settings.component.html b/apps/client/src/app/components/admin-settings/admin-settings.component.html
index 41a9992c9..76af96c4e 100644
--- a/apps/client/src/app/components/admin-settings/admin-settings.component.html
+++ b/apps/client/src/app/components/admin-settings/admin-settings.component.html
@@ -40,9 +40,21 @@
           </mat-card-actions>
         </mat-card>
       }
-      <table class="gf-table w-100" mat-table [dataSource]="dataSource">
+      <table
+        class="gf-table w-100"
+        mat-table
+        matSort
+        matSortActive="name"
+        matSortDirection="asc"
+        [dataSource]="dataSource"
+      >
         <ng-container matColumnDef="name">
-          <th *matHeaderCellDef class="px-1" mat-header-cell>
+          <th
+            *matHeaderCellDef
+            class="px-1"
+            mat-header-cell
+            mat-sort-header="name"
+          >
             <ng-container i18n>Name</ng-container>
           </th>
           <td *matCellDef="let element" class="px-1" mat-cell>
@@ -102,7 +114,12 @@
         </ng-container>
 
         <ng-container matColumnDef="assetProfileCount">
-          <th *matHeaderCellDef class="px-1 text-right" mat-header-cell>
+          <th
+            *matHeaderCellDef
+            class="justify-content-end px-1"
+            mat-header-cell
+            mat-sort-header="assetProfileCount"
+          >
             <ng-container i18n>Asset Profiles</ng-container>
           </th>
           <td *matCellDef="let element" class="px-1 text-right" mat-cell>
diff --git a/apps/client/src/app/components/admin-settings/admin-settings.component.ts b/apps/client/src/app/components/admin-settings/admin-settings.component.ts
index 219fd2847..b8cd3409d 100644
--- a/apps/client/src/app/components/admin-settings/admin-settings.component.ts
+++ b/apps/client/src/app/components/admin-settings/admin-settings.component.ts
@@ -23,17 +23,20 @@ import {
   ChangeDetectorRef,
   Component,
   OnDestroy,
-  OnInit
+  OnInit,
+  ViewChild
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
 import { IonIcon } from '@ionic/angular/standalone';
 import { addIcons } from 'ionicons';
 import { ellipsisHorizontal, trashOutline } from 'ionicons/icons';
+import { get } from 'lodash';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { catchError, filter, of, Subject, takeUntil } from 'rxjs';
 
@@ -52,6 +55,7 @@ import { catchError, filter, of, Subject, takeUntil } from 'rxjs';
     MatCardModule,
     MatMenuModule,
     MatProgressBarModule,
+    MatSortModule,
     MatTableModule,
     NgxSkeletonLoaderModule,
     RouterModule
@@ -61,6 +65,8 @@ import { catchError, filter, of, Subject, takeUntil } from 'rxjs';
   templateUrl: './admin-settings.component.html'
 })
 export class GfAdminSettingsComponent implements OnDestroy, OnInit {
+  @ViewChild(MatSort) sort: MatSort;
+
   public dataSource = new MatTableDataSource<DataProviderInfo>();
   public defaultDateFormat: string;
   public displayedColumns = [
@@ -166,6 +172,8 @@ export class GfAdminSettingsComponent implements OnDestroy, OnInit {
         });
 
         this.dataSource = new MatTableDataSource(filteredProviders);
+        this.dataSource.sort = this.sort;
+        this.dataSource.sortingDataAccessor = get;
 
         const ghostfolioApiKey = settings[
           PROPERTY_API_KEY_GHOSTFOLIO