LND layout component basic & removed default sort

backend/controllers/lnd/channels.js

@@ -38,7 +38,6 @@ export const getAllChannels = (req, res, next) => {
                 channel.balancedness = (total === 0) ? 1 : (1 - Math.abs((local - remote) / total)).toFixed(3);
                 return getAliasForChannel(req.session.selectedNode, channel);
             })).then((values) => {
-                body.channels = common.sortDescByKey(body.channels, 'balancedness');
                 logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Channels', msg: 'Sorted Channels List Received', data: body });
                 return res.status(200).json(body);
             }).catch((errRes) => {
@@ -110,7 +109,6 @@ export const getClosedChannels = (req, res, next) => {
                 channel.close_type = (!channel.close_type) ? 'COOPERATIVE_CLOSE' : channel.close_type;
                 return getAliasForChannel(req.session.selectedNode, channel);
             })).then((values) => {
-                body.channels = common.sortDescByKey(body.channels, 'close_height');
                 logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Channels', msg: 'Closed Channels List Received', data: body });
                 return res.status(200).json(body);
             }).catch((errRes) => {

backend/controllers/lnd/invoices.js

@@ -46,7 +46,6 @@ export const listInvoices = (req, res, next) => {
                 invoice.r_hash = invoice.r_hash ? Buffer.from(invoice.r_hash, 'base64').toString('hex') : '';
                 invoice.description_hash = invoice.description_hash ? Buffer.from(invoice.description_hash, 'base64').toString('hex') : null;
             });
-            body.invoices = common.sortDescByKey(body.invoices, 'creation_date');
         }
         logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Invoice', msg: 'Sorted Invoices List Received', data: body });
         res.status(200).json(body);

backend/controllers/lnd/payments.js

@@ -58,10 +58,6 @@ export const getPayments = (req, res, next) => {
     options.url = req.session.selectedNode.ln_server_url + '/v1/payments?max_payments=' + req.query.max_payments + '&index_offset=' + req.query.index_offset + '&reversed=' + req.query.reversed;
     request(options).then((body) => {
         logger.log({ selectedNode: req.session.selectedNode, level: 'DEBUG', fileName: 'Payments', msg: 'Payment List Received', data: body });
-        if (body.payments && body.payments.length > 0) {
-            body.payments = common.sortDescByKey(body.payments, 'creation_date');
-        }
-        logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Payments', msg: 'Sorted Payments List Received', data: body });
         res.status(200).json(body);
     }).catch((errRes) => {
         const err = common.handleError(errRes, 'Payments', 'List Payments Error', req.session.selectedNode);

backend/controllers/lnd/peers.js

@@ -26,10 +26,6 @@ export const getPeers = (req, res, next) => {
         logger.log({ selectedNode: req.session.selectedNode, level: 'DEBUG', fileName: 'Peers', msg: 'Peers List Received', data: body });
         const peers = !body.peers ? [] : body.peers;
         return Promise.all(peers === null || peers === void 0 ? void 0 : peers.map((peer) => getAliasForPeers(req.session.selectedNode, peer))).then((values) => {
-            logger.log({ selectedNode: req.session.selectedNode, level: 'DEBUG', fileName: 'Peers', msg: 'Peers with Alias before Sort', data: body });
-            if (body.peers) {
-                body.peers = common.sortDescByStrKey(body.peers, 'alias');
-            }
             logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Peers', msg: 'Sorted Peers List Received', data: body.peers });
             res.status(200).json(body.peers);
         });
@@ -56,7 +52,6 @@ export const postPeer = (req, res, next) => {
             const peers = (!body.peers) ? [] : body.peers;
             return Promise.all(peers === null || peers === void 0 ? void 0 : peers.map((peer) => getAliasForPeers(req.session.selectedNode, peer))).then((values) => {
                 if (body.peers) {
-                    body.peers = common.sortDescByStrKey(body.peers, 'alias');
                     body.peers = common.newestOnTop(body.peers, 'pub_key', req.body.pubkey);
                     logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Peers', msg: 'Peers List after Connect Received', data: body });
                 }

backend/controllers/lnd/switch.js

@@ -46,9 +46,6 @@ export const getAllForwardingEvents = (req, start, end, offset, caller, callback
         }
         if (!body.last_offset_index || body.last_offset_index < offset + num_max_events) {
             responseData[caller].last_offset_index = body.last_offset_index ? body.last_offset_index : 0;
-            if (responseData[caller].forwarding_events) {
-                responseData[caller].forwarding_events = common.sortDescByKey(responseData[caller].forwarding_events, 'timestamp');
-            }
             return callback(responseData[caller]);
         }
         else {

backend/controllers/lnd/transactions.js

@@ -13,10 +13,6 @@ export const getTransactions = (req, res, next) => {
     options.url = req.session.selectedNode.ln_server_url + '/v1/transactions';
     request(options).then((body) => {
         logger.log({ selectedNode: req.session.selectedNode, level: 'DEBUG', fileName: 'Transactions', msg: 'Transactions List Received', data: body });
-        if (body.transactions && body.transactions.length > 0) {
-            body.transactions = common.sortDescByKey(body.transactions, 'time_stamp');
-        }
-        logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Transactions', msg: 'Sorted Transactions List Received', data: body.transactions });
         res.status(200).json(body.transactions);
     }).catch((errRes) => {
         const err = common.handleError(errRes, 'Transactions', 'List Transactions Error', req.session.selectedNode);

backend/controllers/shared/loop.js

@@ -216,10 +216,6 @@ export const swaps = (req, res, next) => {
     options.url = options.url + '/v1/loop/swaps';
     request(options).then((body) => {
         logger.log({ selectedNode: req.session.selectedNode, level: 'DEBUG', fileName: 'Loop', msg: 'Loop Swaps Received', data: body });
-        if (body.swaps && body.swaps.length > 0) {
-            body.swaps = common.sortDescByKey(body.swaps, 'initiation_time');
-            logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Loop', msg: 'Sorted Loop Swaps List Received', data: body });
-        }
         res.status(200).json(body.swaps);
     }).catch((errRes) => {
         const err = common.handleError(errRes, 'Loop', 'List Swaps Error', req.session.selectedNode);

server/controllers/lnd/channels.ts

@@ -40,7 +40,6 @@ export const getAllChannels = (req, res, next) => {
           return getAliasForChannel(req.session.selectedNode, channel);
         })
       ).then((values) => {
-        body.channels = common.sortDescByKey(body.channels, 'balancedness');
         logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Channels', msg: 'Sorted Channels List Received', data: body });
         return res.status(200).json(body);
       }).catch((errRes) => {
@@ -109,7 +108,6 @@ export const getClosedChannels = (req, res, next) => {
           return getAliasForChannel(req.session.selectedNode, channel);
         })
       ).then((values) => {
-        body.channels = common.sortDescByKey(body.channels, 'close_height');
         logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Channels', msg: 'Closed Channels List Received', data: body });
         return res.status(200).json(body);
       }).catch((errRes) => {

server/controllers/lnd/invoices.ts

@@ -44,7 +44,6 @@ export const listInvoices = (req, res, next) => {
         invoice.r_hash = invoice.r_hash ? Buffer.from(invoice.r_hash, 'base64').toString('hex') : '';
         invoice.description_hash = invoice.description_hash ? Buffer.from(invoice.description_hash, 'base64').toString('hex') : null;
       });
-      body.invoices = common.sortDescByKey(body.invoices, 'creation_date');
     }
     logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Invoice', msg: 'Sorted Invoices List Received', data: body });
     res.status(200).json(body);

server/controllers/lnd/payments.ts

@@ -57,10 +57,6 @@ export const getPayments = (req, res, next) => {
   options.url = req.session.selectedNode.ln_server_url + '/v1/payments?max_payments=' + req.query.max_payments + '&index_offset=' + req.query.index_offset + '&reversed=' + req.query.reversed;
   request(options).then((body) => {
     logger.log({ selectedNode: req.session.selectedNode, level: 'DEBUG', fileName: 'Payments', msg: 'Payment List Received', data: body });
-    if (body.payments && body.payments.length > 0) {
-      body.payments = common.sortDescByKey(body.payments, 'creation_date');
-    }
-    logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Payments', msg: 'Sorted Payments List Received', data: body });
     res.status(200).json(body);
   }).catch((errRes) => {
     const err = common.handleError(errRes, 'Payments', 'List Payments Error', req.session.selectedNode);

server/controllers/lnd/peers.ts

@@ -27,10 +27,6 @@ export const getPeers = (req, res, next) => {
     logger.log({ selectedNode: req.session.selectedNode, level: 'DEBUG', fileName: 'Peers', msg: 'Peers List Received', data: body });
     const peers = !body.peers ? [] : body.peers;
     return Promise.all(peers?.map((peer) => getAliasForPeers(req.session.selectedNode, peer))).then((values) => {
-      logger.log({ selectedNode: req.session.selectedNode, level: 'DEBUG', fileName: 'Peers', msg: 'Peers with Alias before Sort', data: body });
-      if (body.peers) {
-        body.peers = common.sortDescByStrKey(body.peers, 'alias');
-      }
       logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Peers', msg: 'Sorted Peers List Received', data: body.peers });
       res.status(200).json(body.peers);
     });
@@ -56,7 +52,6 @@ export const postPeer = (req, res, next) => {
       const peers = (!body.peers) ? [] : body.peers;
       return Promise.all(peers?.map((peer) => getAliasForPeers(req.session.selectedNode, peer))).then((values) => {
         if (body.peers) {
-          body.peers = common.sortDescByStrKey(body.peers, 'alias');
           body.peers = common.newestOnTop(body.peers, 'pub_key', req.body.pubkey);
           logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Peers', msg: 'Peers List after Connect Received', data: body });
         }

server/controllers/lnd/switch.ts

@@ -40,9 +40,6 @@ export const getAllForwardingEvents = (req, start, end, offset, caller, callback
     }
     if (!body.last_offset_index || body.last_offset_index < offset + num_max_events) {
       responseData[caller].last_offset_index = body.last_offset_index ? body.last_offset_index : 0;
-      if (responseData[caller].forwarding_events) {
-        responseData[caller].forwarding_events = common.sortDescByKey(responseData[caller].forwarding_events, 'timestamp');
-      }
       return callback(responseData[caller]);
     } else {
       return getAllForwardingEvents(req, start, end, offset + num_max_events, caller, callback);

server/controllers/lnd/transactions.ts

@@ -12,10 +12,6 @@ export const getTransactions = (req, res, next) => {
   options.url = req.session.selectedNode.ln_server_url + '/v1/transactions';
   request(options).then((body) => {
     logger.log({ selectedNode: req.session.selectedNode, level: 'DEBUG', fileName: 'Transactions', msg: 'Transactions List Received', data: body });
-    if (body.transactions && body.transactions.length > 0) {
-      body.transactions = common.sortDescByKey(body.transactions, 'time_stamp');
-    }
-    logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Transactions', msg: 'Sorted Transactions List Received', data: body.transactions });
     res.status(200).json(body.transactions);
   }).catch((errRes) => {
     const err = common.handleError(errRes, 'Transactions', 'List Transactions Error', req.session.selectedNode);

server/controllers/shared/loop.ts

@@ -219,10 +219,6 @@ export const swaps = (req, res, next) => {
   options.url = options.url + '/v1/loop/swaps';
   request(options).then((body) => {
     logger.log({ selectedNode: req.session.selectedNode, level: 'DEBUG', fileName: 'Loop', msg: 'Loop Swaps Received', data: body });
-    if (body.swaps && body.swaps.length > 0) {
-      body.swaps = common.sortDescByKey(body.swaps, 'initiation_time');
-      logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Loop', msg: 'Sorted Loop Swaps List Received', data: body });
-    }
     res.status(200).json(body.swaps);
   }).catch((errRes) => {
     const err = common.handleError(errRes, 'Loop', 'List Swaps Error', req.session.selectedNode);

src/app/lnd/backup/channel-backup-table/channel-backup-table.component.html

@@ -31,7 +31,9 @@
         <td mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '28rem'}">{{channel?.channel_point}}</td>
       </ng-container>
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef class="pr-3"><span fxLayoutAlign="end center">Actions</span></th>        
+        <th mat-header-cell *matHeaderCellDef>
+          <div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>
+        </th>
         <td mat-cell *matCellDef="let channel" fxLayoutAlign="end center">
           <div class="bordered-box table-actions-select" fxLayoutAlign="center center">
             <mat-select placeholder="Actions" tabindex="1" class="mr-0">

src/app/lnd/backup/channel-restore-table/channel-restore-table.component.html

@@ -26,7 +26,9 @@
         <td mat-cell *matCellDef="let channel" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '45rem'}">{{channel?.channel_point}}</td>
       </ng-container>
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef class="pr-3"><span fxLayoutAlign="end center">Actions</span></th>
+        <th mat-header-cell *matHeaderCellDef>
+          <div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>          
+        </th>
         <td mat-cell *matCellDef="let channel">
           <span fxLayoutAlign="end center">
             <button mat-stroked-button color="primary" type="button" tabindex="1" (click)="onRestoreChannels(channel)">Restore</button>          

src/app/lnd/graph/lookups/node-lookup/node-lookup.component.html

@@ -46,10 +46,12 @@
           <td mat-cell *matCellDef="let address"> {{address?.addr}} </td>
         </ng-container>
         <ng-container matColumnDef="actions">
-          <th mat-header-cell *matHeaderCellDef class="pl-1"><span fxLayoutAlign="end center">Actions</span></th>
+          <th mat-header-cell *matHeaderCellDef class="pl-1">
+            <div class="bordered-box table-actions-select btn-action" fxLayoutAlign="center center">Actions</div>            
+          </th>
           <td mat-cell *matCellDef="let address" class="pl-1">
             <span fxLayoutAlign="end center">
-              <button mat-stroked-button color="primary" type="button" tabindex="1" rtlClipboard [payload]="lookupResult.node.pub_key + '@' + address.addr" (copied)="onCopyNodeURI($event)">Copy Node URI</button>          
+              <button mat-stroked-button class="btn-action-copy" color="primary" type="button" tabindex="1" rtlClipboard [payload]="lookupResult.node.pub_key + '@' + address.addr" (copied)="onCopyNodeURI($event)">Copy Node URI</button>          
             </span>
           </td>
         </ng-container>

src/app/lnd/graph/lookups/node-lookup/node-lookup.component.scss

@@ -0,0 +1,9 @@
+div.bordered-box.table-actions-select.btn-action {
+  min-width: 13rem;
+  width: 13rem;
+}
+
+button.mat-stroked-button.btn-action-copy {
+  min-width: 13rem;
+  width: 13rem;
+}

src/app/lnd/graph/query-routes/query-routes.component.html

@@ -53,8 +53,10 @@
         </td>
       </ng-container>
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef class="pl-4 pr-3"><span fxLayoutAlign="end center">Actions</span></th>
-        <td mat-cell *matCellDef="let hop" class="pl-4">
+        <th mat-header-cell *matHeaderCellDef class="pl-2">
+          <div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>          
+        </th>
+        <td mat-cell *matCellDef="let hop" class="pl-2" fxLayoutAlign="end center">
           <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onHopClick(hop, $event)" class="table-actions-button">View Info</button>          
         </td>
       </ng-container>

src/app/lnd/graph/query-routes/query-routes.component.ts

@@ -8,12 +8,16 @@ import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 
 import { Hop } from '../../../shared/models/lndModels';
-import { AlertTypeEnum, DataTypeEnum, ScreenSizeEnum } from '../../../shared/services/consts-enums-functions';
+import { AlertTypeEnum, DataTypeEnum, LND_DEFAULT_PAGE_SETTINGS, PAGE_SIZE, ScreenSizeEnum, SortOrderEnum } from '../../../shared/services/consts-enums-functions';
 
 import { LNDEffects } from '../../store/lnd.effects';
 import { RTLState } from '../../../store/rtl.state';
 import { openAlert } from '../../../store/rtl.actions';
 import { getQueryRoutes } from '../../store/lnd.actions';
+import { PageSettings, TableSetting } from '../../../shared/models/pageSettings';
+import { lndPageSettings } from '../../store/lnd.selector';
+import { ApiCallStatusPayload } from '../../../shared/models/apiCallsPayload';
+import { LoggerService } from '../../../shared/services/logger.service';
 
 @Component({
   selector: 'rtl-query-routes',
@@ -23,6 +27,8 @@ import { getQueryRoutes } from '../../store/lnd.actions';
 export class QueryRoutesComponent implements OnInit, OnDestroy {
 
   @ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
+  public PAGE_ID = 'graph_lookup';
+  public tableSetting: TableSetting = { tableId: 'query_routes', recordsPerPage: PAGE_SIZE, sortBy: 'hop_sequence', sortOrder: SortOrderEnum.ASCENDING };
   public destinationPubkey = '';
   public amount = null;
   public qrHops: any;
@@ -32,22 +38,24 @@ export class QueryRoutesComponent implements OnInit, OnDestroy {
   public faExclamationTriangle = faExclamationTriangle;
   public screenSize = '';
   public screenSizeEnum = ScreenSizeEnum;
-  private unSubs: Array<Subject<void>> = [new Subject(), new Subject()];
+  private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject()];
 
-  constructor(private store: Store<RTLState>, private lndEffects: LNDEffects, private commonService: CommonService) {
+  constructor(private logger: LoggerService, private store: Store<RTLState>, private lndEffects: LNDEffects, private commonService: CommonService) {
     this.screenSize = this.commonService.getScreenSize();
-    if (this.screenSize === ScreenSizeEnum.XS) {
-      this.displayedColumns = ['pubkey_alias', 'actions'];
-    } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.displayedColumns = ['hop_sequence', 'pubkey_alias', 'fee_msat', 'actions'];
-    } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.displayedColumns = ['hop_sequence', 'pubkey_alias', 'chan_capacity', 'amt_to_forward_msat', 'fee_msat', 'actions'];
-    } else {
-      this.displayedColumns = ['hop_sequence', 'pubkey_alias', 'chan_capacity', 'amt_to_forward_msat', 'fee_msat', 'actions'];
-    }
   }
 
   ngOnInit() {
+    this.store.select(lndPageSettings).pipe(takeUntil(this.unSubs[0])).
+      subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
+        this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!;
+        if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
+        } else {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
+        }
+        this.displayedColumns.push('actions');
+        this.logger.info(this.displayedColumns);
+      });
     this.lndEffects.setQueryRoutes.pipe(takeUntil(this.unSubs[1])).subscribe((queryRoute) => {
       this.qrHops = new MatTableDataSource([]);
       if (queryRoute.routes && queryRoute.routes.length && queryRoute.routes.length > 0 && queryRoute.routes[0].hops) {
@@ -59,6 +67,7 @@ export class QueryRoutesComponent implements OnInit, OnDestroy {
       }
       this.qrHops.sort = this.sort;
       this.qrHops.sortingDataAccessor = (data: any, sortHeaderId: string) => ((data[sortHeaderId] && isNaN(data[sortHeaderId])) ? data[sortHeaderId].toLocaleLowerCase() : data[sortHeaderId] ? +data[sortHeaderId] : null);
+      this.qrHops.sort?.sort({ id: this.tableSetting.sortBy, start: this.tableSetting.sortOrder, disableClear: true });
     });
   }
 

src/app/lnd/on-chain/utxo-tables/on-chain-transaction-history/on-chain-transaction-history.component.ts

@@ -9,14 +9,15 @@ import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { Transaction } from '../../../../shared/models/lndModels';
-import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, APICallStatusEnum } from '../../../../shared/services/consts-enums-functions';
+import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, APICallStatusEnum, SortOrderEnum, LND_DEFAULT_PAGE_SETTINGS } from '../../../../shared/services/consts-enums-functions';
 import { ApiCallStatusPayload } from '../../../../shared/models/apiCallsPayload';
 import { LoggerService } from '../../../../shared/services/logger.service';
 import { CommonService } from '../../../../shared/services/common.service';
 
 import { RTLState } from '../../../../store/rtl.state';
 import { openAlert } from '../../../../store/rtl.actions';
-import { transactions } from '../../../store/lnd.selector';
+import { lndPageSettings, transactions } from '../../../store/lnd.selector';
+import { PageSettings, TableSetting } from '../../../../shared/models/pageSettings';
 
 @Component({
   selector: 'rtl-on-chain-transaction-history',
@@ -30,8 +31,10 @@ export class OnChainTransactionHistoryComponent implements OnInit, OnChanges, On
 
   @ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
   @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
+  public PAGE_ID = 'on_chain';
+  public tableSetting: TableSetting = { tableId: 'transactions', recordsPerPage: PAGE_SIZE, sortBy: 'time_stamp', sortOrder: SortOrderEnum.DESCENDING };
   public transactions: Transaction[];
-  faHistory = faHistory;
+  public faHistory = faHistory;
   public displayedColumns: any[] = [];
   public listTransactions: any;
   public pageSize = PAGE_SIZE;
@@ -46,19 +49,27 @@ export class OnChainTransactionHistoryComponent implements OnInit, OnChanges, On
 
   constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>, private datePipe: DatePipe) {
     this.screenSize = this.commonService.getScreenSize();
-    if (this.screenSize === ScreenSizeEnum.XS) {
-      this.displayedColumns = ['time_stamp', 'amount', 'actions'];
-    } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.displayedColumns = ['time_stamp', 'amount', 'num_confirmations', 'total_fees', 'actions'];
-    } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.displayedColumns = ['time_stamp', 'label', 'amount', 'total_fees', 'num_confirmations', 'actions'];
-    } else {
-      this.displayedColumns = ['time_stamp', 'label', 'amount', 'total_fees', 'block_height', 'num_confirmations', 'actions'];
-    }
   }
 
   ngOnInit() {
-    this.store.select(transactions).pipe(takeUntil(this.unSubs[0])).
+    this.store.select(lndPageSettings).pipe(takeUntil(this.unSubs[0])).
+      subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
+        this.errorMessage = '';
+        this.apiCallStatus = settings.apiCallStatus;
+        if (this.apiCallStatus.status === APICallStatusEnum.ERROR) {
+          this.errorMessage = this.apiCallStatus.message || '';
+        }
+        this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!;
+        if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
+        } else {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
+        }
+        this.displayedColumns.push('actions');
+        this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
+        this.logger.info(this.displayedColumns);
+      });
+    this.store.select(transactions).pipe(takeUntil(this.unSubs[1])).
       subscribe((transactionsSelector: { transactions: Transaction[], apiCallStatus: ApiCallStatusPayload }) => {
         this.errorMessage = '';
         this.apiCallStatus = transactionsSelector.apiCallStatus;
@@ -111,6 +122,7 @@ export class OnChainTransactionHistoryComponent implements OnInit, OnChanges, On
     this.listTransactions = new MatTableDataSource<Transaction>([...transactions]);
     this.listTransactions.sort = this.sort;
     this.listTransactions.sortingDataAccessor = (data: any, sortHeaderId: string) => ((data[sortHeaderId] && isNaN(data[sortHeaderId])) ? data[sortHeaderId].toLocaleLowerCase() : data[sortHeaderId] ? +data[sortHeaderId] : null);
+    this.listTransactions.sort?.sort({ id: this.tableSetting.sortBy, start: this.tableSetting.sortOrder, disableClear: true });
     this.listTransactions.filterPredicate = (rowData: Transaction, fltr: string) => {
       const newRowData = ((rowData.time_stamp) ? this.datePipe.transform(new Date(rowData.time_stamp * 1000), 'dd/MMM/YYYY HH:mm')?.toLowerCase() : '') + JSON.stringify(rowData).toLowerCase();
       return newRowData.includes(fltr);

src/app/lnd/on-chain/utxo-tables/utxos/utxos.component.html

@@ -9,15 +9,18 @@
       <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
       <table mat-table #table fxFlex="100" [dataSource]="listUTXOs" matSort
         [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
+        <ng-container matColumnDef="is_dust">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
+          <td mat-cell *matCellDef="let utxo">
+            <span *ngIf="utxo.amount_sat < DUST_AMOUNT; else emptySpace" matTooltip="Risk of dust attack" matTooltipPosition="right">
+              <mat-icon fxLayoutAlign="start center" color="warn" class="small-icon">warning</mat-icon>
+            </span>
+          </td>
+        </ng-container>
         <ng-container matColumnDef="tx_id">
           <th mat-header-cell *matHeaderCellDef mat-sort-header> Transaction ID </th>
-          <td mat-cell *matCellDef="let utxo" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '25rem'}">
-            <span fxLayout="row">
-              <span *ngIf="utxos.length > 0 && dustUtxos.length > 0 && !isDustUTXO">
-                <span *ngIf="utxo.amount_sat < 1000; else emptySpace" matTooltip="Risk of dust attack" matTooltipPosition="right">
-                  <mat-icon fxLayoutAlign="start center" color="warn" class="small-icon">warning</mat-icon>
-                </span>
-              </span>
+          <td mat-cell *matCellDef="let utxo">
+            <span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '25rem'}">
               <span class="ellipsis-child">{{utxo.outpoint.txid_str}}</span>
             </span>
           </td>
@@ -29,8 +32,12 @@
           </td>
         </ng-container>
         <ng-container matColumnDef="label">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Label </th>
-          <td mat-cell *matCellDef="let utxo" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '25rem'}"> {{utxo?.label}} </td>
+          <th mat-header-cell *matHeaderCellDef mat-sort-header class="pl-1"> Label </th>
+          <td mat-cell *matCellDef="let utxo" class="pl-1">
+            <span fxLayout="row" class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '12rem' : '25rem'}">
+              <span class="ellipsis-child">{{utxo?.label}}</span>
+            </span>            
+          </td>
         </ng-container>
         <ng-container matColumnDef="amount_sat">
           <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before"> Amount (Sats) </th>

src/app/lnd/on-chain/utxo-tables/utxos/utxos.component.scss

@@ -1,12 +1,8 @@
-.mat-column-label {
-  padding-left: 1rem;
-  flex: 1 1 15%;
-  white-space: nowrap;
-  overflow: hidden;  
-  text-overflow: ellipsis;
+.mat-column-is_dust {
+  width: 2rem;
 }
 
-.mat-column-tx_id {
+.mat-column-label, .mat-column-tx_id {
   flex: 1 1 15%;
   & .ellipsis-child {
     white-space: nowrap;

src/app/lnd/on-chain/utxo-tables/utxos/utxos.component.ts

@@ -1,4 +1,5 @@
 import { Component, ViewChild, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
 import { DecimalPipe } from '@angular/common';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -9,7 +10,7 @@ import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { UTXO } from '../../../../shared/models/lndModels';
-import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, WALLET_ADDRESS_TYPE, APICallStatusEnum } from '../../../../shared/services/consts-enums-functions';
+import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, WALLET_ADDRESS_TYPE, APICallStatusEnum, SortOrderEnum, LND_DEFAULT_PAGE_SETTINGS } from '../../../../shared/services/consts-enums-functions';
 import { ApiCallStatusPayload } from '../../../../shared/models/apiCallsPayload';
 import { LoggerService } from '../../../../shared/services/logger.service';
 import { CommonService } from '../../../../shared/services/common.service';
@@ -19,7 +20,8 @@ import { OnChainLabelModalComponent } from '../../on-chain-label-modal/on-chain-
 import { RTLEffects } from '../../../../store/rtl.effects';
 import { RTLState } from '../../../../store/rtl.state';
 import { openAlert, openConfirmation } from '../../../../store/rtl.actions';
-import { utxos } from '../../../store/lnd.selector';
+import { lndPageSettings, utxos } from '../../../store/lnd.selector';
+import { PageSettings, TableSetting } from '../../../../shared/models/pageSettings';
 
 @Component({
   selector: 'rtl-on-chain-utxos',
@@ -34,10 +36,13 @@ export class OnChainUTXOsComponent implements OnInit, OnChanges, OnDestroy {
   @ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
   @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
   @Input() isDustUTXO = false;
+  public faMoneyBillWave = faMoneyBillWave;
+  public DUST_AMOUNT = 1000;
+  public PAGE_ID = 'on_chain';
+  public tableSetting: TableSetting = { tableId: 'utxos', recordsPerPage: PAGE_SIZE, sortBy: 'tx_id', sortOrder: SortOrderEnum.DESCENDING };
   public utxos: UTXO[];
   public dustUtxos: UTXO[];
   public addressType = WALLET_ADDRESS_TYPE;
-  faMoneyBillWave = faMoneyBillWave;
   public displayedColumns: any[] = [];
   public listUTXOs: any;
   public pageSize = PAGE_SIZE;
@@ -48,23 +53,34 @@ export class OnChainUTXOsComponent implements OnInit, OnChanges, OnDestroy {
   public selFilter = '';
   public apiCallStatus: ApiCallStatusPayload | null = null;
   public apiCallStatusEnum = APICallStatusEnum;
-  private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject()];
+  private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject()];
 
-  constructor(private logger: LoggerService, private commonService: CommonService, private dataService: DataService, private store: Store<RTLState>, private rtlEffects: RTLEffects, private decimalPipe: DecimalPipe) {
+  constructor(private logger: LoggerService, private commonService: CommonService, private dataService: DataService, private store: Store<RTLState>, private rtlEffects: RTLEffects, private decimalPipe: DecimalPipe, private router: Router) {
     this.screenSize = this.commonService.getScreenSize();
-    if (this.screenSize === ScreenSizeEnum.XS) {
-      this.displayedColumns = ['amount_sat', 'confirmations', 'actions'];
-    } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.displayedColumns = ['tx_id', 'output', 'amount_sat', 'actions'];
-    } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.displayedColumns = ['tx_id', 'output', 'label', 'amount_sat', 'confirmations', 'actions'];
-    } else {
-      this.displayedColumns = ['tx_id', 'output', 'label', 'amount_sat', 'confirmations', 'actions'];
-    }
   }
 
   ngOnInit() {
-    this.store.select(utxos).pipe(takeUntil(this.unSubs[0])).
+    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
+    this.router.onSameUrlNavigation = 'reload';
+    this.tableSetting.tableId = this.isDustUTXO ? 'dust_utxos' : 'utxos';
+    this.store.select(lndPageSettings).pipe(takeUntil(this.unSubs[0])).
+      subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
+        this.errorMessage = '';
+        this.apiCallStatus = settings.apiCallStatus;
+        if (this.apiCallStatus.status === APICallStatusEnum.ERROR) {
+          this.errorMessage = this.apiCallStatus.message || '';
+        }
+        this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!;
+        if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
+        } else {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
+        }
+        this.displayedColumns.push('actions');
+        this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
+        this.logger.info(this.displayedColumns);
+      });
+    this.store.select(utxos).pipe(takeUntil(this.unSubs[1])).
       subscribe((utxosSelector: { utxos: UTXO[], apiCallStatus: ApiCallStatusPayload }) => {
         this.errorMessage = '';
         this.apiCallStatus = utxosSelector.apiCallStatus;
@@ -72,8 +88,11 @@ export class OnChainUTXOsComponent implements OnInit, OnChanges, OnDestroy {
           this.errorMessage = !this.apiCallStatus.message ? '' : (typeof (this.apiCallStatus.message) === 'object') ? JSON.stringify(this.apiCallStatus.message) : this.apiCallStatus.message;
         }
         if (utxosSelector.utxos && utxosSelector.utxos.length > 0) {
-          this.dustUtxos = utxosSelector.utxos?.filter((utxo) => +(utxo.amount_sat || 0) < 1000);
+          this.dustUtxos = utxosSelector.utxos?.filter((utxo) => +(utxo.amount_sat || 0) < this.DUST_AMOUNT);
           this.utxos = utxosSelector.utxos;
+          if (this.utxos.length > 0 && this.dustUtxos.length > 0 && !this.isDustUTXO) {
+            this.displayedColumns.unshift('is_dust');
+          }
           this.loadUTXOsTable((this.isDustUTXO) ? this.dustUtxos : this.utxos);
         }
         this.logger.info(utxosSelector);
@@ -117,21 +136,22 @@ export class OnChainUTXOsComponent implements OnInit, OnChanges, OnDestroy {
 
   loadUTXOsTable(UTXOs: UTXO[]) {
     this.listUTXOs = new MatTableDataSource<UTXO>([...UTXOs]);
-    this.listUTXOs.filterPredicate = (utxo: UTXO, fltr: string) => {
-      const newUTXO = ((utxo.label ? utxo.label.toLowerCase() : '') + (utxo.outpoint?.txid_str ? utxo.outpoint.txid_str.toLowerCase() : '') + (utxo.outpoint?.output_index ? utxo.outpoint?.output_index : '') +
-        (utxo.outpoint?.txid_bytes ? utxo.outpoint?.txid_bytes.toLowerCase() : '') + (utxo.address ? utxo.address.toLowerCase() : '') + (utxo.address_type ? utxo.address_type.toLowerCase() : '') +
-        (utxo.amount_sat ? utxo.amount_sat : '') + (utxo.confirmations ? utxo.confirmations : '') + (utxo.pk_script ? utxo.pk_script.toLowerCase() : ''));
-      return newUTXO.includes(fltr);
-    };
     this.listUTXOs.sortingDataAccessor = (data: any, sortHeaderId: string) => {
       switch (sortHeaderId) {
+        case 'is_dust': return +(data.amount_sat || 0) < this.DUST_AMOUNT;
         case 'tx_id': return data.outpoint.txid_str.toLocaleLowerCase();
         case 'output': return +data.outpoint.output_index;
         default: return (data[sortHeaderId] && isNaN(data[sortHeaderId])) ? data[sortHeaderId].toLocaleLowerCase() : data[sortHeaderId] ? +data[sortHeaderId] : null;
       }
     };
     this.listUTXOs.sort = this.sort;
-    this.listUTXOs.filterPredicate = (utxo: UTXO, fltr: string) => JSON.stringify(utxo).toLowerCase().includes(fltr);
+    this.listUTXOs.sort?.sort({ id: this.tableSetting.sortBy, start: this.tableSetting.sortOrder, disableClear: true });
+    this.listUTXOs.filterPredicate = (utxo: UTXO, fltr: string) => {
+      const newUTXO = ((utxo.label ? utxo.label.toLowerCase() : '') + (utxo.outpoint?.txid_str ? utxo.outpoint.txid_str.toLowerCase() : '') + (utxo.outpoint?.output_index ? utxo.outpoint?.output_index : '') +
+        (utxo.outpoint?.txid_bytes ? utxo.outpoint?.txid_bytes.toLowerCase() : '') + (utxo.address ? utxo.address.toLowerCase() : '') + (utxo.address_type ? utxo.address_type.toLowerCase() : '') +
+        (utxo.amount_sat ? utxo.amount_sat : '') + (utxo.confirmations ? utxo.confirmations : '') + (utxo.pk_script ? utxo.pk_script.toLowerCase() : ''));
+      return newUTXO.includes(fltr);
+    };
     this.listUTXOs.paginator = this.paginator;
     this.applyFilter();
     this.logger.info(this.listUTXOs);
@@ -169,7 +189,7 @@ export class OnChainUTXOsComponent implements OnInit, OnChanges, OnDestroy {
       }
     }));
     this.rtlEffects.closeConfirm.
-      pipe(takeUntil(this.unSubs[0])).
+      pipe(takeUntil(this.unSubs[2])).
       subscribe((confirmRes) => {
         if (confirmRes) {
           this.dataService.leaseUTXO((utxo.outpoint?.txid_bytes || ''), (utxo.outpoint?.output_index || 0));

src/app/lnd/peers-channels/channels/channels-tables/channel-active-htlcs-table/channel-active-htlcs-table.component.ts

@@ -8,14 +8,15 @@ import { MatTableDataSource } from '@angular/material/table';
 
 import { ChannelInformationComponent } from '../../channel-information-modal/channel-information.component';
 import { Channel, ChannelHTLC, ChannelsSummary, LightningBalance } from '../../../../../shared/models/lndModels';
-import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, APICallStatusEnum } from '../../../../../shared/services/consts-enums-functions';
+import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, APICallStatusEnum, SortOrderEnum, LND_DEFAULT_PAGE_SETTINGS } from '../../../../../shared/services/consts-enums-functions';
 import { ApiCallStatusPayload } from '../../../../../shared/models/apiCallsPayload';
 import { LoggerService } from '../../../../../shared/services/logger.service';
 import { CommonService } from '../../../../../shared/services/common.service';
 
 import { openAlert } from '../../../../../store/rtl.actions';
 import { RTLState } from '../../../../../store/rtl.state';
-import { channels } from '../../../../store/lnd.selector';
+import { channels, lndPageSettings } from '../../../../store/lnd.selector';
+import { PageSettings, TableSetting } from '../../../../../shared/models/pageSettings';
 
 @Component({
   selector: 'rtl-channel-active-htlcs-table',
@@ -29,6 +30,8 @@ export class ChannelActiveHTLCsTableComponent implements OnInit, AfterViewInit,
 
   @ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
   @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
+  public PAGE_ID = 'peers_channels';
+  public tableSetting: TableSetting = { tableId: 'active_HTLCs', recordsPerPage: PAGE_SIZE, sortBy: 'expiration_height', sortOrder: SortOrderEnum.DESCENDING };
   public channels: any;
   public channelsJSONArr: Channel[] = [];
   public displayedColumns: any[] = [];
@@ -45,19 +48,27 @@ export class ChannelActiveHTLCsTableComponent implements OnInit, AfterViewInit,
 
   constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>) {
     this.screenSize = this.commonService.getScreenSize();
-    if (this.screenSize === ScreenSizeEnum.XS) {
-      this.displayedColumns = ['amount', 'actions'];
-    } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.displayedColumns = ['amount', 'incoming', 'actions'];
-    } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.displayedColumns = ['amount', 'incoming', 'expiration_height', 'actions'];
-    } else {
-      this.displayedColumns = ['amount', 'incoming', 'expiration_height', 'hash_lock', 'actions'];
-    }
   }
 
   ngOnInit() {
-    this.store.select(channels).pipe(takeUntil(this.unSubs[0])).
+    this.store.select(lndPageSettings).pipe(takeUntil(this.unSubs[0])).
+      subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
+        this.errorMessage = '';
+        this.apiCallStatus = settings.apiCallStatus;
+        if (this.apiCallStatus.status === APICallStatusEnum.ERROR) {
+          this.errorMessage = this.apiCallStatus.message || '';
+        }
+        this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!;
+        if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
+        } else {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
+        }
+        this.displayedColumns.push('actions');
+        this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
+        this.logger.info(this.displayedColumns);
+      });
+    this.store.select(channels).pipe(takeUntil(this.unSubs[1])).
       subscribe((channelsSelector: { channels: Channel[], channelsSummary: ChannelsSummary, lightningBalance: LightningBalance, apiCallStatus: ApiCallStatusPayload }) => {
         this.errorMessage = '';
         this.apiCallStatus = channelsSelector.apiCallStatus;
@@ -134,6 +145,7 @@ export class ChannelActiveHTLCsTableComponent implements OnInit, AfterViewInit,
           return (data[sortHeaderId] && isNaN(data[sortHeaderId])) ? data[sortHeaderId].toLocaleLowerCase() : data[sortHeaderId] ? +data[sortHeaderId] : null;
       }
     };
+    this.channels.sort?.sort({ id: this.tableSetting.sortBy, start: this.tableSetting.sortOrder, disableClear: true });
     this.channels.paginator = this.paginator;
     this.channels.filterPredicate = (channel: Channel, fltr: string) => {
       const newChannel = (channel.remote_alias ? channel.remote_alias.toLowerCase() : '') +

src/app/lnd/peers-channels/channels/channels-tables/channel-closed-table/channel-closed-table.component.ts

@@ -8,14 +8,15 @@ import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { ClosedChannel } from '../../../../../shared/models/lndModels';
-import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, CHANNEL_CLOSURE_TYPE, APICallStatusEnum } from '../../../../../shared/services/consts-enums-functions';
+import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, CHANNEL_CLOSURE_TYPE, APICallStatusEnum, SortOrderEnum, LND_DEFAULT_PAGE_SETTINGS } from '../../../../../shared/services/consts-enums-functions';
 import { ApiCallStatusPayload } from '../../../../../shared/models/apiCallsPayload';
 import { LoggerService } from '../../../../../shared/services/logger.service';
 import { CommonService } from '../../../../../shared/services/common.service';
 
 import { openAlert } from '../../../../../store/rtl.actions';
 import { RTLState } from '../../../../../store/rtl.state';
-import { closedChannels } from '../../../../store/lnd.selector';
+import { closedChannels, lndPageSettings } from '../../../../store/lnd.selector';
+import { PageSettings, TableSetting } from '../../../../../shared/models/pageSettings';
 
 @Component({
   selector: 'rtl-channel-closed-table',
@@ -29,6 +30,8 @@ export class ChannelClosedTableComponent implements OnInit, AfterViewInit, OnDes
 
   @ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
   @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
+  public PAGE_ID = 'peers_channels';
+  public tableSetting: TableSetting = { tableId: 'closed', recordsPerPage: PAGE_SIZE, sortBy: 'close_type', sortOrder: SortOrderEnum.DESCENDING };
   public channelClosureType = CHANNEL_CLOSURE_TYPE;
   public faHistory = faHistory;
   public displayedColumns: any[] = [];
@@ -46,17 +49,27 @@ export class ChannelClosedTableComponent implements OnInit, AfterViewInit, OnDes
 
   constructor(private logger: LoggerService, private store: Store<RTLState>, private commonService: CommonService) {
     this.screenSize = this.commonService.getScreenSize();
-    if (this.screenSize === ScreenSizeEnum.XS) {
-      this.displayedColumns = ['remote_alias', 'actions'];
-    } else if (this.screenSize === ScreenSizeEnum.SM || this.screenSize === ScreenSizeEnum.MD) {
-      this.displayedColumns = ['close_type', 'remote_alias', 'settled_balance', 'actions'];
-    } else {
-      this.displayedColumns = ['close_type', 'remote_alias', 'capacity', 'close_height', 'settled_balance', 'actions'];
-    }
   }
 
   ngOnInit() {
-    this.store.select(closedChannels).pipe(takeUntil(this.unSubs[0])).
+    this.store.select(lndPageSettings).pipe(takeUntil(this.unSubs[0])).
+      subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
+        this.errorMessage = '';
+        this.apiCallStatus = settings.apiCallStatus;
+        if (this.apiCallStatus.status === APICallStatusEnum.ERROR) {
+          this.errorMessage = this.apiCallStatus.message || '';
+        }
+        this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!;
+        if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
+        } else {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
+        }
+        this.displayedColumns.push('actions');
+        this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
+        this.logger.info(this.displayedColumns);
+      });
+    this.store.select(closedChannels).pipe(takeUntil(this.unSubs[1])).
       subscribe((closedChannelsSelector: { closedChannels: ClosedChannel[], apiCallStatus: ApiCallStatusPayload }) => {
         this.errorMessage = '';
         this.apiCallStatus = closedChannelsSelector.apiCallStatus;
@@ -109,6 +122,7 @@ export class ChannelClosedTableComponent implements OnInit, AfterViewInit, OnDes
     this.closedChannels = new MatTableDataSource<ClosedChannel>([...closedChannels]);
     this.closedChannels.sort = this.sort;
     this.closedChannels.sortingDataAccessor = (data: any, sortHeaderId: string) => ((data[sortHeaderId] && isNaN(data[sortHeaderId])) ? data[sortHeaderId].toLocaleLowerCase() : data[sortHeaderId] ? +data[sortHeaderId] : null);
+    this.closedChannels.sort?.sort({ id: this.tableSetting.sortBy, start: this.tableSetting.sortOrder, disableClear: true });
     this.closedChannels.filterPredicate = (channel: ClosedChannel, fltr: string) => JSON.stringify(channel).toLowerCase().includes(fltr);
     this.closedChannels.paginator = this.paginator;
     this.applyFilter();

src/app/lnd/peers-channels/channels/channels-tables/channel-open-table/channel-open-table.component.html

@@ -8,14 +8,24 @@
   <div [perfectScrollbar] fxLayout="column" fxLayoutAlign="start center" fxFlex="100" class="table-container">
     <mat-progress-bar *ngIf="apiCallStatus?.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
     <table mat-table #table fxFlex="100" [dataSource]="channels" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
+      <ng-container matColumnDef="active">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
+        <td mat-cell *matCellDef="let channel">
+          <span *ngIf="channel.active" class="dot green" matTooltip="Active" matTooltipPosition="right"></span>
+          <span *ngIf="!channel.active" class="dot yellow" matTooltip="Inactive" matTooltipPosition="right"></span>
+        </td>
+      </ng-container>
+      <ng-container matColumnDef="private">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
+        <td mat-cell *matCellDef="let channel">
+          <span *ngIf="channel.private" class="mr-1" matTooltip="Private" matTooltipPosition="right"><fa-icon [icon]="faEyeSlash"></fa-icon></span>
+          <span *ngIf="!channel.private" class="mr-1" matTooltip="Public" matTooltipPosition="right"><fa-icon [icon]="faEye"></fa-icon></span>
+        </td>
+      </ng-container>
       <ng-container matColumnDef="remote_alias">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Peer </th>
         <td mat-cell *matCellDef="let channel">
           <div class="ellipsis-parent" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : (screenSize === screenSizeEnum.MD) ? '15rem' : '22rem'}">
-            <span *ngIf="channel.active" class="dot green" matTooltip="Active" matTooltipPosition="right"></span>
-            <span *ngIf="!channel.active" class="dot yellow" matTooltip="Inactive" matTooltipPosition="right"></span>
-            <span *ngIf="channel.private" class="mr-1" matTooltip="Private" matTooltipPosition="right"><fa-icon [icon]="faEyeSlash"></fa-icon></span>
-            <span *ngIf="!channel.private" class="mr-1" matTooltip="Public" matTooltipPosition="right"><fa-icon [icon]="faEye"></fa-icon></span>
             <span class="ellipsis-child">{{channel.remote_alias || channel.remote_pubkey}}</span>
           </div>
         </td>

src/app/lnd/peers-channels/channels/channels-tables/channel-open-table/channel-open-table.component.ts

@@ -12,7 +12,7 @@ import { faEye, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
 import { ChannelInformationComponent } from '../../channel-information-modal/channel-information.component';
 import { SelNodeChild } from '../../../../../shared/models/RTLconfig';
 import { BlockchainBalance, Channel, ChannelsSummary, GetInfo, LightningBalance, Peer } from '../../../../../shared/models/lndModels';
-import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, UserPersonaEnum, LoopTypeEnum, APICallStatusEnum, UI_MESSAGES } from '../../../../../shared/services/consts-enums-functions';
+import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, UserPersonaEnum, LoopTypeEnum, APICallStatusEnum, UI_MESSAGES, SortOrderEnum, LND_DEFAULT_PAGE_SETTINGS } from '../../../../../shared/services/consts-enums-functions';
 import { ApiCallStatusPayload } from '../../../../../shared/models/apiCallsPayload';
 import { LoggerService } from '../../../../../shared/services/logger.service';
 import { LoopService } from '../../../../../shared/services/loop.service';
@@ -26,7 +26,8 @@ import { RTLEffects } from '../../../../../store/rtl.effects';
 import { RTLState } from '../../../../../store/rtl.state';
 import { openAlert, openConfirmation } from '../../../../../store/rtl.actions';
 import { channelLookup, fetchChannels, updateChannel } from '../../../../store/lnd.actions';
-import { blockchainBalance, channels, lndNodeInformation, lndNodeSettings, peers } from '../../../../store/lnd.selector';
+import { blockchainBalance, channels, lndNodeInformation, lndNodeSettings, lndPageSettings, peers } from '../../../../store/lnd.selector';
+import { PageSettings, TableSetting } from '../../../../../shared/models/pageSettings';
 
 @Component({
   selector: 'rtl-channel-open-table',
@@ -40,6 +41,8 @@ export class ChannelOpenTableComponent implements OnInit, AfterViewInit, OnDestr
 
   @ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
   @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
+  public PAGE_ID = 'peers_channels';
+  public tableSetting: TableSetting = { tableId: 'open', recordsPerPage: PAGE_SIZE, sortBy: 'balancedness', sortOrder: SortOrderEnum.DESCENDING };
   public timeUnit = 'mins:secs';
   public userPersonaEnum = UserPersonaEnum;
   public selNode: SelNodeChild | null = {};
@@ -66,15 +69,6 @@ export class ChannelOpenTableComponent implements OnInit, AfterViewInit, OnDestr
 
   constructor(private logger: LoggerService, private store: Store<RTLState>, private lndEffects: LNDEffects, private commonService: CommonService, private rtlEffects: RTLEffects, private decimalPipe: DecimalPipe, private loopService: LoopService, private router: Router) {
     this.screenSize = this.commonService.getScreenSize();
-    if (this.screenSize === ScreenSizeEnum.XS) {
-      this.displayedColumns = ['remote_alias', 'local_balance', 'remote_balance', 'actions'];
-    } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.displayedColumns = ['remote_alias', 'local_balance', 'remote_balance', 'balancedness', 'actions'];
-    } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.displayedColumns = ['remote_alias', 'local_balance', 'remote_balance', 'balancedness', 'actions'];
-    } else {
-      this.displayedColumns = ['remote_alias', 'uptime', 'total_satoshis_sent', 'total_satoshis_received', 'local_balance', 'remote_balance', 'balancedness', 'actions'];
-    }
     this.selFilter = this.router.getCurrentNavigation()?.extras?.state?.filter ? this.router.getCurrentNavigation()?.extras?.state?.filter : '';
   }
 
@@ -90,15 +84,34 @@ export class ChannelOpenTableComponent implements OnInit, AfterViewInit, OnDestr
           this.versionsArr = this.information.version.split('.');
         }
       });
-    this.store.select(peers).pipe(takeUntil(this.unSubs[2])).
+    this.store.select(lndPageSettings).pipe(takeUntil(this.unSubs[2])).
+      subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
+        this.errorMessage = '';
+        this.apiCallStatus = settings.apiCallStatus;
+        if (this.apiCallStatus.status === APICallStatusEnum.ERROR) {
+          this.errorMessage = this.apiCallStatus.message || '';
+        }
+        this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!;
+        if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
+        } else {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
+        }
+        this.displayedColumns.unshift('private');
+        this.displayedColumns.unshift('active');
+        this.displayedColumns.push('actions');
+        this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
+        this.logger.info(this.displayedColumns);
+      });
+    this.store.select(peers).pipe(takeUntil(this.unSubs[3])).
       subscribe((peersSelector: { peers: Peer[], apiCallStatus: ApiCallStatusPayload }) => {
         this.numPeers = (peersSelector.peers && peersSelector.peers.length) ? peersSelector.peers.length : 0;
       });
-    this.store.select(blockchainBalance).pipe(takeUntil(this.unSubs[3])).
+    this.store.select(blockchainBalance).pipe(takeUntil(this.unSubs[4])).
       subscribe((bcBalanceSelector: { blockchainBalance: BlockchainBalance, apiCallStatus: ApiCallStatusPayload }) => {
         this.totalBalance = bcBalanceSelector.blockchainBalance?.total_balance ? +bcBalanceSelector.blockchainBalance?.total_balance : 0;
       });
-    this.store.select(channels).pipe(takeUntil(this.unSubs[4])).
+    this.store.select(channels).pipe(takeUntil(this.unSubs[5])).
       subscribe((channelsSelector: { channels: Channel[], channelsSummary: ChannelsSummary, lightningBalance: LightningBalance, apiCallStatus: ApiCallStatusPayload }) => {
         this.errorMessage = '';
         this.apiCallStatus = channelsSelector.apiCallStatus;
@@ -184,7 +197,7 @@ export class ChannelOpenTableComponent implements OnInit, AfterViewInit, OnDestr
         }
       }));
       this.rtlEffects.closeConfirm.
-        pipe(takeUntil(this.unSubs[5])).
+        pipe(takeUntil(this.unSubs[6])).
         subscribe((confirmRes) => {
           if (confirmRes) {
             const base_fee = confirmRes[0].inputValue;
@@ -232,7 +245,7 @@ export class ChannelOpenTableComponent implements OnInit, AfterViewInit, OnDestr
         }, 0);
       });
       this.rtlEffects.closeConfirm.
-        pipe(takeUntil(this.unSubs[6])).
+        pipe(takeUntil(this.unSubs[7])).
         subscribe((confirmRes: boolean | any[]) => {
           if (confirmRes) {
             const updateChanPayload = {
@@ -296,6 +309,7 @@ export class ChannelOpenTableComponent implements OnInit, AfterViewInit, OnDestr
     };
     this.channels.sort = this.sort;
     this.channels.sortingDataAccessor = (data: any, sortHeaderId: string) => ((data[sortHeaderId] && isNaN(data[sortHeaderId])) ? data[sortHeaderId].toLocaleLowerCase() : data[sortHeaderId] ? +data[sortHeaderId] : null);
+    this.channels.sort?.sort({ id: this.tableSetting.sortBy, start: this.tableSetting.sortOrder, disableClear: true });
     this.channels.paginator = this.paginator;
     this.applyFilter();
     this.logger.info(this.channels);
@@ -353,7 +367,7 @@ export class ChannelOpenTableComponent implements OnInit, AfterViewInit, OnDestr
 
   onLoopOut(selChannel: Channel) {
     this.loopService.getLoopOutTermsAndQuotes(this.targetConf).
-      pipe(takeUntil(this.unSubs[7])).
+      pipe(takeUntil(this.unSubs[8])).
       subscribe((response) => {
         this.store.dispatch(openAlert({
           payload: {

src/app/lnd/peers-channels/peers/peers.component.ts

@@ -8,7 +8,7 @@ import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { Peer, GetInfo, BlockchainBalance } from '../../../shared/models/lndModels';
-import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, APICallStatusEnum } from '../../../shared/services/consts-enums-functions';
+import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, APICallStatusEnum, SortOrderEnum, LND_DEFAULT_PAGE_SETTINGS } from '../../../shared/services/consts-enums-functions';
 import { ApiCallStatusPayload } from '../../../shared/models/apiCallsPayload';
 import { LoggerService } from '../../../shared/services/logger.service';
 import { CommonService } from '../../../shared/services/common.service';
@@ -19,7 +19,8 @@ import { RTLEffects } from '../../../store/rtl.effects';
 import { RTLState } from '../../../store/rtl.state';
 import { openAlert, openConfirmation } from '../../../store/rtl.actions';
 import { detachPeer } from '../../store/lnd.actions';
-import { blockchainBalance, lndNodeInformation, peers } from '../../store/lnd.selector';
+import { blockchainBalance, lndNodeInformation, lndPageSettings, peers } from '../../store/lnd.selector';
+import { PageSettings, TableSetting } from '../../../shared/models/pageSettings';
 
 @Component({
   selector: 'rtl-peers',
@@ -33,6 +34,8 @@ export class PeersComponent implements OnInit, AfterViewInit, OnDestroy {
 
   @ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
   @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
+  public PAGE_ID = 'peers_channels';
+  public tableSetting: TableSetting = { tableId: 'peers', recordsPerPage: PAGE_SIZE, sortBy: 'alias', sortOrder: SortOrderEnum.DESCENDING };
   public availableBalance = 0;
   public faUsers = faUsers;
   public displayedColumns: any[] = [];
@@ -47,28 +50,36 @@ export class PeersComponent implements OnInit, AfterViewInit, OnDestroy {
   public selFilter = '';
   public apiCallStatus: ApiCallStatusPayload | null = null;
   public apiCallStatusEnum = APICallStatusEnum;
-  private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject()];
+  private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject()];
 
   constructor(private logger: LoggerService, private store: Store<RTLState>, private rtlEffects: RTLEffects, private commonService: CommonService) {
     this.screenSize = this.commonService.getScreenSize();
-    if (this.screenSize === ScreenSizeEnum.XS) {
-      this.displayedColumns = ['alias', 'actions'];
-    } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.displayedColumns = ['alias', 'sat_sent', 'sat_recv', 'actions'];
-    } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.displayedColumns = ['alias', 'sat_sent', 'sat_recv', 'ping_time', 'actions'];
-    } else {
-      this.displayedColumns = ['alias', 'pub_key', 'sat_sent', 'sat_recv', 'ping_time', 'actions'];
-    }
   }
 
   ngOnInit() {
     this.store.select(lndNodeInformation).pipe(takeUntil(this.unSubs[0])).subscribe((nodeInfo: GetInfo) => { this.information = nodeInfo; });
-    this.store.select(blockchainBalance).pipe(takeUntil(this.unSubs[1])).
+    this.store.select(lndPageSettings).pipe(takeUntil(this.unSubs[1])).
+      subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
+        this.errorMessage = '';
+        this.apiCallStatus = settings.apiCallStatus;
+        if (this.apiCallStatus.status === APICallStatusEnum.ERROR) {
+          this.errorMessage = this.apiCallStatus.message || '';
+        }
+        this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!;
+        if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
+        } else {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
+        }
+        this.displayedColumns.push('actions');
+        this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
+        this.logger.info(this.displayedColumns);
+      });
+    this.store.select(blockchainBalance).pipe(takeUntil(this.unSubs[2])).
       subscribe((bcBalanceSelector: { blockchainBalance: BlockchainBalance, apiCallStatus: ApiCallStatusPayload }) => {
         this.availableBalance = bcBalanceSelector.blockchainBalance.total_balance || 0;
       });
-    this.store.select(peers).pipe(takeUntil(this.unSubs[0])).
+    this.store.select(peers).pipe(takeUntil(this.unSubs[3])).
       subscribe((peersSelector: { peers: Peer[], apiCallStatus: ApiCallStatusPayload }) => {
         this.errorMessage = '';
         this.apiCallStatus = peersSelector.apiCallStatus;
@@ -152,7 +163,7 @@ export class PeersComponent implements OnInit, AfterViewInit, OnDestroy {
       }
     }));
     this.rtlEffects.closeConfirm.
-      pipe(takeUntil(this.unSubs[3])).
+      pipe(takeUntil(this.unSubs[4])).
       subscribe((confirmRes) => {
         if (confirmRes) {
           this.store.dispatch(detachPeer({ payload: { pubkey: peerToDetach.pub_key! } }));
@@ -168,6 +179,7 @@ export class PeersComponent implements OnInit, AfterViewInit, OnDestroy {
     this.peers = peers ? new MatTableDataSource<Peer>([...peers]) : new MatTableDataSource([]);
     this.peers.sort = this.sort;
     this.peers.sortingDataAccessor = (data: any, sortHeaderId: string) => ((data[sortHeaderId] && isNaN(data[sortHeaderId])) ? data[sortHeaderId].toLocaleLowerCase() : data[sortHeaderId] ? +data[sortHeaderId] : null);
+    this.peers.sort?.sort({ id: this.tableSetting.sortBy, start: this.tableSetting.sortOrder, disableClear: true });
     this.peers.filterPredicate = (peer: Peer, fltr: string) => JSON.stringify(peer).toLowerCase().includes(fltr);
     this.peers.paginator = this.paginator;
     this.applyFilter();

src/app/lnd/reports/transactions/transactions-report.component.html

@@ -41,7 +41,7 @@
         </ngx-charts-bar-vertical-2d>      
       </div>
       <div class="mt-1">
-        <rtl-transactions-report-table *ngIf="transactionsNonZeroReportData.length > 0 && apiCallStatus.status === apiCallStatusEnum.COMPLETED" [dataList]="transactionsNonZeroReportData" [dataRange]="reportPeriod" [filterValue]="transactionFilterValue"></rtl-transactions-report-table>
+        <rtl-transactions-report-table *ngIf="transactionsNonZeroReportData.length > 0 && apiCallStatus.status === apiCallStatusEnum.COMPLETED" [displayedColumns]="displayedColumns" [tableSetting]="tableSetting" [dataList]="transactionsNonZeroReportData" [dataRange]="reportPeriod" [filterValue]="transactionFilterValue"></rtl-transactions-report-table>
       </div>
     </div>
   </div>

src/app/lnd/reports/transactions/transactions-report.component.ts

@@ -6,13 +6,15 @@ import { Store } from '@ngrx/store';
 import { Payment, Invoice, ListInvoices, ListPayments } from '../../../shared/models/lndModels';
 import { CommonService } from '../../../shared/services/common.service';
 import { LoggerService } from '../../../shared/services/logger.service';
-import { APICallStatusEnum, MONTHS, ScreenSizeEnum, SCROLL_RANGES } from '../../../shared/services/consts-enums-functions';
+import { APICallStatusEnum, LND_DEFAULT_PAGE_SETTINGS, MONTHS, PAGE_SIZE, ScreenSizeEnum, SCROLL_RANGES, SortOrderEnum } from '../../../shared/services/consts-enums-functions';
 import { ApiCallStatusPayload } from '../../../shared/models/apiCallsPayload';
 import { fadeIn } from '../../../shared/animation/opacity-animation';
 
 import { RTLState } from '../../../store/rtl.state';
 import { allLightningTransactions } from '../../store/lnd.selector';
 import { getAllLightningTransactions } from '../../store/lnd.actions';
+import { PageSettings, TableSetting } from '../../../shared/models/pageSettings';
+import { clnPageSettings } from '../../../cln/store/cln.selector';
 
 @Component({
   selector: 'rtl-transactions-report',
@@ -27,6 +29,9 @@ export class TransactionsReportComponent implements OnInit, OnDestroy {
   public secondsInADay = 24 * 60 * 60;
   public payments: Payment[] = [];
   public invoices: Invoice[] = [];
+  public PAGE_ID = 'reports';
+  public tableSetting: TableSetting = { tableId: 'transactions', recordsPerPage: PAGE_SIZE, sortBy: 'date', sortOrder: SortOrderEnum.DESCENDING };
+  public displayedColumns: any[] = ['date', 'amount_paid', 'num_payments', 'amount_received', 'num_invoices'];
   public transactionsReportSummary = { paymentsSelectedPeriod: 0, invoicesSelectedPeriod: 0, amountPaidSelectedPeriod: 0, amountReceivedSelectedPeriod: 0 };
   public transactionFilterValue = '';
   public today = new Date(Date.now());
@@ -45,14 +50,34 @@ export class TransactionsReportComponent implements OnInit, OnDestroy {
   public errorMessage = '';
   public apiCallStatus: ApiCallStatusPayload | null = null;
   public apiCallStatusEnum = APICallStatusEnum;
-  private unSubs: Array<Subject<void>> = [new Subject(), new Subject()];
+  private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject()];
 
   constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>) { }
 
   ngOnInit() {
     this.screenSize = this.commonService.getScreenSize();
     this.showYAxisLabel = !(this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM);
-    this.store.select(allLightningTransactions).pipe(takeUntil(this.unSubs[0])).
+    this.store.select(clnPageSettings).pipe(takeUntil(this.unSubs[0])).
+      subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
+        if (settings.apiCallStatus.status === APICallStatusEnum.ERROR) {
+          if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
+            this.displayedColumns = ['date', 'amount_paid', 'amount_received'];
+          } else {
+            this.displayedColumns = ['date', 'amount_paid', 'num_payments', 'amount_received', 'num_invoices'];
+          }
+        } else {
+          this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!;
+          if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
+            this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
+          } else {
+            this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
+          }
+        }
+        this.displayedColumns.push('actions');
+        this.logger.info(this.displayedColumns);
+      });
+
+    this.store.select(allLightningTransactions).pipe(takeUntil(this.unSubs[1])).
       subscribe((allLTSelector: { allLightningTransactions: { listPaymentsAll: ListPayments, listInvoicesAll: ListInvoices }, apiCallStatus: ApiCallStatusPayload }) => {
         if (allLTSelector.apiCallStatus.status === APICallStatusEnum.UN_INITIATED) {
           this.store.dispatch(getAllLightningTransactions());
@@ -70,7 +95,7 @@ export class TransactionsReportComponent implements OnInit, OnDestroy {
         }
         this.logger.info(allLTSelector);
       });
-    this.commonService.containerSizeUpdated.pipe(takeUntil(this.unSubs[1])).subscribe((CONTAINER_SIZE) => {
+    this.commonService.containerSizeUpdated.pipe(takeUntil(this.unSubs[2])).subscribe((CONTAINER_SIZE) => {
       switch (this.screenSize) {
         case ScreenSizeEnum.MD:
           this.screenPaddingX = CONTAINER_SIZE.width / 10;

src/app/lnd/routing/forwarding-history/forwarding-history.component.ts

@@ -8,14 +8,15 @@ import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 
 import { ForwardingEvent, SwitchRes } from '../../../shared/models/lndModels';
-import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, APICallStatusEnum } from '../../../shared/services/consts-enums-functions';
+import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, APICallStatusEnum, SortOrderEnum, LND_DEFAULT_PAGE_SETTINGS } from '../../../shared/services/consts-enums-functions';
 import { ApiCallStatusPayload } from '../../../shared/models/apiCallsPayload';
 import { LoggerService } from '../../../shared/services/logger.service';
 import { CommonService } from '../../../shared/services/common.service';
 import { openAlert } from '../../../store/rtl.actions';
 
 import { RTLState } from '../../../store/rtl.state';
-import { forwardingHistory } from '../../store/lnd.selector';
+import { forwardingHistory, lndPageSettings } from '../../store/lnd.selector';
+import { PageSettings, TableSetting } from '../../../shared/models/pageSettings';
 
 @Component({
   selector: 'rtl-forwarding-history',
@@ -31,6 +32,8 @@ export class ForwardingHistoryComponent implements OnInit, AfterViewInit, OnChan
   @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
   @Input() eventsData = [];
   @Input() filterValue = '';
+  public PAGE_ID = 'routing';
+  public tableSetting: TableSetting = { tableId: 'forwarding_history', recordsPerPage: PAGE_SIZE, sortBy: 'timestamp', sortOrder: SortOrderEnum.DESCENDING };
   public forwardingHistoryData: ForwardingEvent[] = [];
   public displayedColumns: any[] = [];
   public forwardingHistoryEvents: any;
@@ -45,17 +48,27 @@ export class ForwardingHistoryComponent implements OnInit, AfterViewInit, OnChan
 
   constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>, private datePipe: DatePipe) {
     this.screenSize = this.commonService.getScreenSize();
-    if (this.screenSize === ScreenSizeEnum.XS) {
-      this.displayedColumns = ['timestamp', 'fee_msat', 'actions'];
-    } else if (this.screenSize === ScreenSizeEnum.SM || this.screenSize === ScreenSizeEnum.MD) {
-      this.displayedColumns = ['timestamp', 'amt_in', 'amt_out', 'fee_msat', 'actions'];
-    } else {
-      this.displayedColumns = ['timestamp', 'alias_in', 'alias_out', 'amt_in', 'amt_out', 'fee_msat', 'actions'];
-    }
   }
 
   ngOnInit() {
-    this.store.select(forwardingHistory).pipe(takeUntil(this.unSubs[0])).
+    this.store.select(lndPageSettings).pipe(takeUntil(this.unSubs[0])).
+      subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
+        this.errorMessage = '';
+        this.apiCallStatus = settings.apiCallStatus;
+        if (this.apiCallStatus.status === APICallStatusEnum.ERROR) {
+          this.errorMessage = this.apiCallStatus.message || '';
+        }
+        this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!;
+        if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
+        } else {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
+        }
+        this.displayedColumns.push('actions');
+        this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
+        this.logger.info(this.displayedColumns);
+      });
+    this.store.select(forwardingHistory).pipe(takeUntil(this.unSubs[1])).
       subscribe((fhSelector: { forwardingHistory: SwitchRes, apiCallStatus: ApiCallStatusPayload }) => {
         if (this.eventsData.length <= 0) {
           this.errorMessage = '';
@@ -117,6 +130,7 @@ export class ForwardingHistoryComponent implements OnInit, AfterViewInit, OnChan
     this.forwardingHistoryEvents = forwardingEvents ? new MatTableDataSource<ForwardingEvent>([...forwardingEvents]) : new MatTableDataSource([]);
     this.forwardingHistoryEvents.sort = this.sort;
     this.forwardingHistoryEvents.sortingDataAccessor = (data: any, sortHeaderId: string) => ((data[sortHeaderId] && isNaN(data[sortHeaderId])) ? data[sortHeaderId].toLocaleLowerCase() : data[sortHeaderId] ? +data[sortHeaderId] : null);
+    this.forwardingHistoryEvents.sort?.sort({ id: this.tableSetting.sortBy, start: this.tableSetting.sortOrder, disableClear: true });
     this.forwardingHistoryEvents.filterPredicate = (rowData: ForwardingEvent, fltr: string) => {
       const newRowData = ((rowData.timestamp) ? this.datePipe.transform(new Date(rowData.timestamp * 1000), 'dd/MMM/YYYY HH:mm')?.toLowerCase() : '') + JSON.stringify(rowData).toLowerCase();
       return newRowData.includes(fltr);

src/app/lnd/routing/non-routing-peers/non-routing-peers.component.html

@@ -37,8 +37,10 @@
           <td mat-cell *matCellDef="let nonRPeer"><span fxLayoutAlign="end center">{{nonRPeer.remote_balance | number}}</span></td>
         </ng-container>
         <ng-container matColumnDef="actions">
-          <th mat-header-cell *matHeaderCellDef class="pr-3"><span fxLayoutAlign="end center">Actions</span></th>
-          <td mat-cell *matCellDef="let nonRPeer" class="pl-2" fxLayoutAlign="end center">
+          <th mat-header-cell *matHeaderCellDef class="pr-3">
+            <div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>
+          </th>
+          <td mat-cell *matCellDef="let nonRPeer" class="pr-2" fxLayoutAlign="end center">
             <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onManagePeer(nonRPeer)">Manage</button>
           </td>
         </ng-container>

src/app/lnd/routing/non-routing-peers/non-routing-peers.component.ts

@@ -7,13 +7,14 @@ import { MatTableDataSource } from '@angular/material/table';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 
 import { ForwardingEvent, SwitchRes, Channel, ChannelsSummary, LightningBalance } from '../../../shared/models/lndModels';
-import { APICallStatusEnum, getPaginatorLabel, PAGE_SIZE, PAGE_SIZE_OPTIONS, ScreenSizeEnum } from '../../../shared/services/consts-enums-functions';
+import { APICallStatusEnum, getPaginatorLabel, LND_DEFAULT_PAGE_SETTINGS, PAGE_SIZE, PAGE_SIZE_OPTIONS, ScreenSizeEnum, SortOrderEnum } from '../../../shared/services/consts-enums-functions';
 import { ApiCallStatusPayload } from '../../../shared/models/apiCallsPayload';
 import { LoggerService } from '../../../shared/services/logger.service';
 import { CommonService } from '../../../shared/services/common.service';
 import { RTLState } from '../../../store/rtl.state';
-import { channels, forwardingHistory } from '../../store/lnd.selector';
+import { channels, forwardingHistory, lndPageSettings } from '../../store/lnd.selector';
 import { ActivatedRoute, Router } from '@angular/router';
+import { PageSettings, TableSetting } from '../../../shared/models/pageSettings';
 
 @Component({
   selector: 'rtl-non-routing-peers',
@@ -27,6 +28,8 @@ export class NonRoutingPeersComponent implements OnInit, AfterViewInit, OnDestro
 
   @ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
   @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
+  public PAGE_ID = 'routing';
+  public tableSetting: TableSetting = { tableId: 'non_routing_peers', recordsPerPage: PAGE_SIZE, sortBy: 'remote_alias', sortOrder: SortOrderEnum.DESCENDING };
   public routingPeersData: any[] = [];
   public displayedColumns: any[] = [];
   public NonRoutingPeers: any = new MatTableDataSource<any>([]);
@@ -39,23 +42,31 @@ export class NonRoutingPeersComponent implements OnInit, AfterViewInit, OnDestro
   public activeChannels: Channel[] = [];
   public apiCallStatus: ApiCallStatusPayload | null = null;
   public apiCallStatusEnum = APICallStatusEnum;
-  private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject()];
+  private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject()];
 
   constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>, private router: Router, private activatedRoute: ActivatedRoute) {
     this.screenSize = this.commonService.getScreenSize();
-    if (this.screenSize === ScreenSizeEnum.XS) {
-      this.displayedColumns = ['remote_alias', 'local_balance', 'remote_balance', 'actions'];
-    } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.displayedColumns = ['remote_alias', 'local_balance', 'remote_balance', 'actions'];
-    } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.displayedColumns = ['chan_id', 'remote_alias', 'local_balance', 'remote_balance', 'actions'];
-    } else {
-      this.displayedColumns = ['chan_id', 'remote_alias', 'total_satoshis_received', 'total_satoshis_sent', 'local_balance', 'remote_balance', 'actions'];
-    }
   }
 
   ngOnInit() {
-    this.store.select(forwardingHistory).pipe(takeUntil(this.unSubs[0])).
+    this.store.select(lndPageSettings).pipe(takeUntil(this.unSubs[0])).
+      subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
+        this.errorMessage = '';
+        this.apiCallStatus = settings.apiCallStatus;
+        if (this.apiCallStatus.status === APICallStatusEnum.ERROR) {
+          this.errorMessage = this.apiCallStatus.message || '';
+        }
+        this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!;
+        if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
+        } else {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
+        }
+        this.displayedColumns.push('actions');
+        this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
+        this.logger.info(this.displayedColumns);
+      });
+    this.store.select(forwardingHistory).pipe(takeUntil(this.unSubs[1])).
       subscribe((fhSelector: { forwardingHistory: SwitchRes, apiCallStatus: ApiCallStatusPayload }) => {
         this.errorMessage = '';
         this.apiCallStatus = fhSelector.apiCallStatus;
@@ -73,7 +84,7 @@ export class NonRoutingPeersComponent implements OnInit, AfterViewInit, OnDestro
         this.logger.info(fhSelector.apiCallStatus);
         this.logger.info(fhSelector.forwardingHistory);
       });
-    this.store.select(channels).pipe(takeUntil(this.unSubs[1])).
+    this.store.select(channels).pipe(takeUntil(this.unSubs[2])).
       subscribe((channelsSelector: { channels: Channel[], channelsSummary: ChannelsSummary, lightningBalance: LightningBalance, apiCallStatus: ApiCallStatusPayload }) => {
         this.errorMessage = '';
         this.apiCallStatus = channelsSelector.apiCallStatus;
@@ -126,6 +137,7 @@ export class NonRoutingPeersComponent implements OnInit, AfterViewInit, OnDestro
       const filteredNonRoutingChannels = this.activeChannels?.filter((actvChnl) => forwardingEvents.findIndex((evnt) => (evnt.chan_id_in === actvChnl.chan_id || evnt.chan_id_out === actvChnl.chan_id)) < 0);
       this.NonRoutingPeers = new MatTableDataSource<Channel>(filteredNonRoutingChannels);
       this.NonRoutingPeers.sort = this.sort;
+      this.NonRoutingPeers.sort?.sort({ id: this.tableSetting.sortBy, start: this.tableSetting.sortOrder, disableClear: true });
       this.NonRoutingPeers.filterPredicate = (nrchnl: Channel, fltr: string) => JSON.stringify(nrchnl).toLowerCase().includes(fltr);
       this.NonRoutingPeers.paginator = this.paginator;
       this.logger.info(this.NonRoutingPeers);

src/app/lnd/routing/routing-peers/routing-peers.component.html

@@ -29,7 +29,9 @@
             <td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer.total_amount | number}}</span></td>
           </ng-container>
           <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef class="pr-3"><span fxLayoutAlign="end center">Actions</span></th>
+            <th mat-header-cell *matHeaderCellDef class="pr-3">
+              <div class="bordered-box table-actions-select" fxLayoutAlign="center center">Actions</div>              
+            </th>
             <td mat-cell *matCellDef="let rPeer" class="pl-2" fxLayoutAlign="end center">
               <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onRoutingPeerClick(rPeer, $event, 'in')" class="table-actions-button">View Info</button>
             </td>
@@ -75,12 +77,6 @@
             <th mat-header-cell *matHeaderCellDef mat-sort-header arrowPosition="before">Total Amount (Sats)</th>
             <td mat-cell *matCellDef="let rPeer"><span fxLayoutAlign="end center">{{rPeer.total_amount | number}}</span></td>
           </ng-container>
-          <ng-container matColumnDef="actions">
-            <th mat-header-cell *matHeaderCellDef class="pr-3"><span fxLayoutAlign="end center">Actions</span></th>
-            <td mat-cell *matCellDef="let rPeer" class="pl-2">
-              <button mat-stroked-button color="primary" type="button" tabindex="5" (click)="onRoutingPeerClick(rPeer, $event, 'out')" class="table-actions-button">View Info</button>
-            </td>
-          </ng-container>
           <ng-container matColumnDef="no_outgoing_event">
             <td mat-footer-cell *matFooterCellDef colspan="4">
               <p *ngIf="(!RoutingPeersOutgoing?.data || RoutingPeersOutgoing?.data?.length<1) && apiCallStatus.status === apiCallStatusEnum.COMPLETED">No outgoing routing peer available.</p>

src/app/lnd/routing/routing-peers/routing-peers.component.ts

@@ -7,13 +7,14 @@ import { MatTableDataSource } from '@angular/material/table';
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 
 import { ForwardingEvent, RoutingPeers, SwitchRes } from '../../../shared/models/lndModels';
-import { AlertTypeEnum, APICallStatusEnum, DataTypeEnum, getPaginatorLabel, PAGE_SIZE, PAGE_SIZE_OPTIONS, ScreenSizeEnum } from '../../../shared/services/consts-enums-functions';
+import { AlertTypeEnum, APICallStatusEnum, DataTypeEnum, getPaginatorLabel, LND_DEFAULT_PAGE_SETTINGS, PAGE_SIZE, PAGE_SIZE_OPTIONS, ScreenSizeEnum, SortOrderEnum } from '../../../shared/services/consts-enums-functions';
 import { ApiCallStatusPayload } from '../../../shared/models/apiCallsPayload';
 import { LoggerService } from '../../../shared/services/logger.service';
 import { CommonService } from '../../../shared/services/common.service';
 import { openAlert } from '../../../store/rtl.actions';
 import { RTLState } from '../../../store/rtl.state';
-import { forwardingHistory } from '../../store/lnd.selector';
+import { forwardingHistory, lndPageSettings } from '../../store/lnd.selector';
+import { PageSettings, TableSetting } from '../../../shared/models/pageSettings';
 
 @Component({
   selector: 'rtl-routing-peers',
@@ -29,6 +30,8 @@ export class RoutingPeersComponent implements OnInit, AfterViewInit, OnDestroy {
   @ViewChild('tableOut', { read: MatSort, static: false }) sortOut: MatSort;
   @ViewChild('paginatorIn', { static: false }) paginatorIn: MatPaginator | undefined;
   @ViewChild('paginatorOut', { static: false }) paginatorOut: MatPaginator | undefined;
+  public PAGE_ID = 'routing';
+  public tableSetting: TableSetting = { tableId: 'routing_peers', recordsPerPage: PAGE_SIZE, sortBy: 'total_amount', sortOrder: SortOrderEnum.DESCENDING };
   public routingPeersData: any[] = [];
   public displayedColumns: any[] = [];
   public RoutingPeersIncoming = new MatTableDataSource<RoutingPeers>([]);
@@ -46,19 +49,26 @@ export class RoutingPeersComponent implements OnInit, AfterViewInit, OnDestroy {
 
   constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>) {
     this.screenSize = this.commonService.getScreenSize();
-    if (this.screenSize === ScreenSizeEnum.XS) {
-      this.displayedColumns = ['chan_id', 'events', 'actions'];
-    } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.displayedColumns = ['chan_id', 'alias', 'events', 'total_amount'];
-    } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.displayedColumns = ['chan_id', 'alias', 'events', 'total_amount'];
-    } else {
-      this.displayedColumns = ['chan_id', 'alias', 'events', 'total_amount'];
-    }
   }
 
   ngOnInit() {
-    this.store.select(forwardingHistory).pipe(takeUntil(this.unSubs[0])).
+    this.store.select(lndPageSettings).pipe(takeUntil(this.unSubs[0])).
+      subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
+        this.errorMessage = '';
+        this.apiCallStatus = settings.apiCallStatus;
+        if (this.apiCallStatus.status === APICallStatusEnum.ERROR) {
+          this.errorMessage = this.apiCallStatus.message || '';
+        }
+        this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!;
+        if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
+        } else {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
+        }
+        this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
+        this.logger.info(this.displayedColumns);
+      });
+    this.store.select(forwardingHistory).pipe(takeUntil(this.unSubs[1])).
       subscribe((fhSelector: { forwardingHistory: SwitchRes, apiCallStatus: ApiCallStatusPayload }) => {
         this.errorMessage = '';
         this.apiCallStatus = fhSelector.apiCallStatus;
@@ -113,11 +123,13 @@ export class RoutingPeersComponent implements OnInit, AfterViewInit, OnDestroy {
       const results = this.groupRoutingPeers(forwardingEvents);
       this.RoutingPeersIncoming = new MatTableDataSource<RoutingPeers>(results[0]);
       this.RoutingPeersIncoming.sort = this.sortIn;
+      this.RoutingPeersIncoming.sort.sort({ id: this.tableSetting.sortBy || 'total_amount', start: this.tableSetting.sortOrder || SortOrderEnum.DESCENDING, disableClear: true });
       this.RoutingPeersIncoming.filterPredicate = (rpIn: RoutingPeers, fltr: string) => JSON.stringify(rpIn).toLowerCase().includes(fltr);
       this.RoutingPeersIncoming.paginator = this.paginatorIn!;
       this.logger.info(this.RoutingPeersIncoming);
       this.RoutingPeersOutgoing = new MatTableDataSource<RoutingPeers>(results[1]);
       this.RoutingPeersOutgoing.sort = this.sortOut;
+      this.RoutingPeersOutgoing.sort.sort({ id: this.tableSetting.sortBy || 'total_amount', start: this.tableSetting.sortOrder || SortOrderEnum.DESCENDING, disableClear: true });
       this.RoutingPeersOutgoing.filterPredicate = (rpOut: RoutingPeers, fltr: string) => JSON.stringify(rpOut).toLowerCase().includes(fltr);
       this.RoutingPeersOutgoing.paginator = this.paginatorOut!;
       this.logger.info(this.RoutingPeersOutgoing);

src/app/lnd/transactions/invoices/lightning-invoices.component.html

@@ -29,13 +29,17 @@
     <div [perfectScrollbar] fxLayout="column" fxLayoutAlign="start end" fxFlex="100" class="table-container">
       <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
       <table mat-table #table fxFlex="100" [dataSource]="invoices" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
-        <ng-container matColumnDef="creation_date">
-          <th mat-header-cell *matHeaderCellDef mat-sort-header> Date Created </th>
+        <ng-container matColumnDef="state">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
           <td mat-cell *matCellDef="let invoice">
             <span *ngIf="invoice?.state === 'OPEN'" class="dot grey" matTooltip="Open" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
             <span *ngIf="invoice?.state === 'SETTLED'" class="dot green" matTooltip="Settled" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
             <span *ngIf="invoice?.state === 'ACCEPTED'" class="dot yellow" matTooltip="Accepted" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
             <span *ngIf="invoice?.state === 'CANCELED'" class="dot red" matTooltip="Cancelled" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
+        </ng-container>
+        <ng-container matColumnDef="creation_date">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Date Created </th>
+          <td mat-cell *matCellDef="let invoice">
             {{(invoice?.creation_date * 1000) | date:'dd/MMM/y HH:mm'}}</td>
         </ng-container>
         <ng-container matColumnDef="settle_date">

src/app/lnd/transactions/invoices/lightning-invoices.component.ts

@@ -9,7 +9,7 @@ import { MatPaginator, MatPaginatorIntl, PageEvent } from '@angular/material/pag
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 
-import { CurrencyUnitEnum, CURRENCY_UNIT_FORMATS, PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, ScreenSizeEnum, APICallStatusEnum, UI_MESSAGES, LNDActions } from '../../../shared/services/consts-enums-functions';
+import { CurrencyUnitEnum, CURRENCY_UNIT_FORMATS, PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, ScreenSizeEnum, APICallStatusEnum, UI_MESSAGES, LNDActions, SortOrderEnum, LND_DEFAULT_PAGE_SETTINGS } from '../../../shared/services/consts-enums-functions';
 import { ApiCallStatusPayload } from '../../../shared/models/apiCallsPayload';
 import { SelNodeChild } from '../../../shared/models/RTLconfig';
 import { GetInfo, Invoice, ListInvoices } from '../../../shared/models/lndModels';
@@ -22,7 +22,8 @@ import { InvoiceInformationComponent } from '../invoice-information-modal/invoic
 import { RTLState } from '../../../store/rtl.state';
 import { openAlert } from '../../../store/rtl.actions';
 import { fetchInvoices, invoiceLookup, saveNewInvoice } from '../../store/lnd.actions';
-import { invoices, lndNodeInformation, lndNodeSettings } from '../../store/lnd.selector';
+import { invoices, lndNodeInformation, lndNodeSettings, lndPageSettings } from '../../store/lnd.selector';
+import { PageSettings, TableSetting } from '../../../shared/models/pageSettings';
 
 @Component({
   selector: 'rtl-lightning-invoices',
@@ -37,7 +38,9 @@ export class LightningInvoicesComponent implements OnInit, AfterViewInit, OnDest
   @Input() calledFrom = 'transactions'; // Transactions/home
   @ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
   @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
-  faHistory = faHistory;
+  public faHistory = faHistory;
+  public PAGE_ID = 'transactions';
+  public tableSetting: TableSetting = { tableId: 'invoices', recordsPerPage: PAGE_SIZE, sortBy: 'creation_date', sortOrder: SortOrderEnum.DESCENDING };
   public selNode: SelNodeChild | null = {};
   public newlyAddedInvoiceMemo: string | null = null;
   public newlyAddedInvoiceValue: number | null = null;
@@ -63,25 +66,34 @@ export class LightningInvoicesComponent implements OnInit, AfterViewInit, OnDest
   public errorMessage = '';
   public apiCallStatus: ApiCallStatusPayload | null = null;
   public apiCallStatusEnum = APICallStatusEnum;
-  private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject()];
+  private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject(), new Subject()];
 
   constructor(private logger: LoggerService, private store: Store<RTLState>, private decimalPipe: DecimalPipe, private commonService: CommonService, private datePipe: DatePipe, private actions: Actions) {
     this.screenSize = this.commonService.getScreenSize();
-    if (this.screenSize === ScreenSizeEnum.XS) {
-      this.displayedColumns = ['creation_date', 'value', 'actions'];
-    } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.displayedColumns = ['creation_date', 'settle_date', 'value', 'amt_paid_sat', 'actions'];
-    } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.displayedColumns = ['creation_date', 'settle_date', 'memo', 'value', 'actions'];
-    } else {
-      this.displayedColumns = ['creation_date', 'settle_date', 'memo', 'value', 'amt_paid_sat', 'actions'];
-    }
   }
 
   ngOnInit() {
     this.store.select(lndNodeSettings).pipe(takeUntil(this.unSubs[0])).subscribe((nodeSettings: SelNodeChild | null) => { this.selNode = nodeSettings; });
     this.store.select(lndNodeInformation).pipe(takeUntil(this.unSubs[1])).subscribe((nodeInfo: GetInfo) => { this.information = nodeInfo; });
-    this.store.select(invoices).pipe(takeUntil(this.unSubs[2])).
+    this.store.select(lndPageSettings).pipe(takeUntil(this.unSubs[2])).
+      subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
+        this.errorMessage = '';
+        this.apiCallStatus = settings.apiCallStatus;
+        if (this.apiCallStatus.status === APICallStatusEnum.ERROR) {
+          this.errorMessage = this.apiCallStatus.message || '';
+        }
+        this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!;
+        if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
+        } else {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
+        }
+        this.displayedColumns.unshift('state');
+        this.displayedColumns.push('actions');
+        this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
+        this.logger.info(this.displayedColumns);
+      });
+    this.store.select(invoices).pipe(takeUntil(this.unSubs[3])).
       subscribe((invoicesSelector: { listInvoices: ListInvoices, apiCallStatus: ApiCallStatusPayload }) => {
         this.errorMessage = '';
         this.apiCallStatus = invoicesSelector.apiCallStatus;
@@ -97,7 +109,7 @@ export class LightningInvoicesComponent implements OnInit, AfterViewInit, OnDest
         }
         this.logger.info(invoicesSelector);
       });
-    this.actions.pipe(takeUntil(this.unSubs[3]), filter((action) => (action.type === LNDActions.SET_LOOKUP_LND || action.type === LNDActions.UPDATE_API_CALL_STATUS_LND))).
+    this.actions.pipe(takeUntil(this.unSubs[4]), filter((action) => (action.type === LNDActions.SET_LOOKUP_LND || action.type === LNDActions.UPDATE_API_CALL_STATUS_LND))).
       subscribe((resLookup: any) => {
         if (resLookup.type === LNDActions.SET_LOOKUP_LND) {
           if (this.invoicesData.length > 0 && this.sort && this.paginator && resLookup.payload) {
@@ -153,6 +165,7 @@ export class LightningInvoicesComponent implements OnInit, AfterViewInit, OnDest
     this.invoices = invoices ? new MatTableDataSource<Invoice>([...invoices]) : new MatTableDataSource<Invoice>([]);
     this.invoices.sort = this.sort;
     this.invoices.sortingDataAccessor = (data: any, sortHeaderId: string) => ((data[sortHeaderId] && isNaN(data[sortHeaderId])) ? data[sortHeaderId].toLocaleLowerCase() : data[sortHeaderId] ? +data[sortHeaderId] : null);
+    this.invoices.sort?.sort({ id: this.tableSetting.sortBy, start: this.tableSetting.sortOrder, disableClear: true });
     this.invoices.filterPredicate = (invoice: Invoice, fltr: string) => {
       const newInvoice = (invoice.creation_date ? this.datePipe.transform(new Date(invoice.creation_date * 1000), 'dd/MMM/YYYY HH:mm')?.toLowerCase() : '')! + (invoice.settle_date ? this.datePipe.transform(new Date(invoice.settle_date * 1000), 'dd/MMM/YYYY HH:mm')?.toLowerCase() : '') + JSON.stringify(invoice).toLowerCase();
       return newInvoice.includes(fltr);
@@ -197,7 +210,7 @@ export class LightningInvoicesComponent implements OnInit, AfterViewInit, OnDest
     if (this.selNode && this.selNode.fiatConversion && this.invoiceValue && this.invoiceValue > 99) {
       this.invoiceValueHint = '';
       this.commonService.convertCurrency(this.invoiceValue, CurrencyUnitEnum.SATS, CurrencyUnitEnum.OTHER, (this.selNode.currencyUnits && this.selNode.currencyUnits.length > 2 ? this.selNode.currencyUnits[2] : ''), this.selNode.fiatConversion).
-        pipe(takeUntil(this.unSubs[4])).
+        pipe(takeUntil(this.unSubs[5])).
         subscribe({
           next: (data) => {
             this.invoiceValueHint = '= ' + data.symbol + this.decimalPipe.transform(data.OTHER, CURRENCY_UNIT_FORMATS.OTHER) + ' ' + data.unit;

src/app/lnd/transactions/payments/lightning-payments.component.html

@@ -27,11 +27,16 @@
       <div [perfectScrollbar] fxLayout="column" fxLayoutAlign="start end" fxFlex="100" class="table-container">
         <mat-progress-bar *ngIf="apiCallStatus.status === apiCallStatusEnum.INITIATED" mode="indeterminate"></mat-progress-bar>
         <table mat-table #table fxFlex="100" [dataSource]="payments" matSort [ngClass]="{'overflow-auto error-border': errorMessage !== '','overflow-auto': true}">
-          <ng-container matColumnDef="creation_date">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header>Creation Date</th>
+          <ng-container matColumnDef="status">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
             <td mat-cell *matCellDef="let payment">
               <span *ngIf="payment?.status === 'SUCCEEDED'" class="dot green" matTooltip="Succeeded" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
               <span *ngIf="payment?.status !== 'SUCCEEDED'" class="dot red" matTooltip="Failed" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
+            </td>
+          </ng-container>
+          <ng-container matColumnDef="creation_date">
+            <th mat-header-cell *matHeaderCellDef mat-sort-header>Creation Date</th>
+            <td mat-cell *matCellDef="let payment">
               {{(payment?.creation_date * 1000) | date:'dd/MMM/y HH:mm'}}
             </td>
           </ng-container>

src/app/lnd/transactions/payments/lightning-payments.component.ts

@@ -9,7 +9,7 @@ import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { GetInfo, Payment, PayRequest, PaymentHTLC, Peer, Hop, ListPayments, ListInvoices } from '../../../shared/models/lndModels';
-import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, CurrencyUnitEnum, CURRENCY_UNIT_FORMATS, APICallStatusEnum, UI_MESSAGES } from '../../../shared/services/consts-enums-functions';
+import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, CurrencyUnitEnum, CURRENCY_UNIT_FORMATS, APICallStatusEnum, UI_MESSAGES, LND_DEFAULT_PAGE_SETTINGS, SortOrderEnum } from '../../../shared/services/consts-enums-functions';
 import { LoggerService } from '../../../shared/services/logger.service';
 import { CommonService } from '../../../shared/services/common.service';
 import { DataService } from '../../../shared/services/data.service';
@@ -23,7 +23,8 @@ import { RTLEffects } from '../../../store/rtl.effects';
 import { RTLState } from '../../../store/rtl.state';
 import { openAlert, openConfirmation } from '../../../store/rtl.actions';
 import { sendPayment } from '../../store/lnd.actions';
-import { lndNodeInformation, lndNodeSettings, payments, peers } from '../../store/lnd.selector';
+import { lndNodeInformation, lndNodeSettings, lndPageSettings, payments, peers } from '../../store/lnd.selector';
+import { PageSettings, TableSetting } from '../../../shared/models/pageSettings';
 
 @Component({
   selector: 'rtl-lightning-payments',
@@ -40,6 +41,8 @@ export class LightningPaymentsComponent implements OnInit, AfterViewInit, OnDest
   @ViewChild(MatSort, { static: false }) sort: MatSort | undefined;
   @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator | undefined;
   public faHistory = faHistory;
+  public PAGE_ID = 'transactions';
+  public tableSetting: TableSetting = { tableId: 'payments', recordsPerPage: PAGE_SIZE, sortBy: 'creation_date', sortOrder: SortOrderEnum.DESCENDING };
   public newlyAddedPayment = '';
   public selNode: SelNodeChild | null = {};
   public information: GetInfo = {};
@@ -66,19 +69,15 @@ export class LightningPaymentsComponent implements OnInit, AfterViewInit, OnDest
 
   constructor(private logger: LoggerService, private commonService: CommonService, private dataService: DataService, private store: Store<RTLState>, private rtlEffects: RTLEffects, private lndEffects: LNDEffects, private decimalPipe: DecimalPipe, private datePipe: DatePipe) {
     this.screenSize = this.commonService.getScreenSize();
-    if (this.screenSize === ScreenSizeEnum.XS) {
-      this.displayedColumns = ['creation_date', 'fee', 'actions'];
-      this.htlcColumns = ['groupTotal', 'groupFee', 'groupActions'];
-    } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.displayedColumns = ['creation_date', 'fee', 'value', 'hops', 'actions'];
-      this.htlcColumns = ['groupTotal', 'groupFee', 'groupValue', 'groupHops', 'groupActions'];
-    } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.displayedColumns = ['creation_date', 'fee', 'value', 'hops', 'actions'];
-      this.htlcColumns = ['groupTotal', 'groupFee', 'groupValue', 'groupHops', 'groupActions'];
-    } else {
-      this.displayedColumns = ['creation_date', 'payment_hash', 'fee', 'value', 'hops', 'actions'];
-      this.htlcColumns = ['groupTotal', 'groupHash', 'groupFee', 'groupValue', 'groupHops', 'groupActions'];
-    }
+    // if (this.screenSize === ScreenSizeEnum.XS) {
+    //   this.htlcColumns = ['groupTotal', 'groupFee', 'groupActions'];
+    // } else if (this.screenSize === ScreenSizeEnum.SM) {
+    //   this.htlcColumns = ['groupTotal', 'groupFee', 'groupValue', 'groupHops', 'groupActions'];
+    // } else if (this.screenSize === ScreenSizeEnum.MD) {
+    //   this.htlcColumns = ['groupTotal', 'groupFee', 'groupValue', 'groupHops', 'groupActions'];
+    // } else {
+    //   this.htlcColumns = ['groupTotal', 'groupHash', 'groupFee', 'groupValue', 'groupHops', 'groupActions'];
+    // }
   }
 
   ngOnInit() {
@@ -88,7 +87,25 @@ export class LightningPaymentsComponent implements OnInit, AfterViewInit, OnDest
       subscribe((peersSelector: { peers: Peer[], apiCallStatus: ApiCallStatusPayload }) => {
         this.peers = peersSelector.peers;
       });
-    this.store.select(payments).pipe(takeUntil(this.unSubs[3])).
+    this.store.select(lndPageSettings).pipe(takeUntil(this.unSubs[3])).
+      subscribe((settings: { pageSettings: PageSettings[], apiCallStatus: ApiCallStatusPayload }) => {
+        this.errorMessage = '';
+        this.apiCallStatus = settings.apiCallStatus;
+        if (this.apiCallStatus.status === APICallStatusEnum.ERROR) {
+          this.errorMessage = this.apiCallStatus.message || '';
+        }
+        this.tableSetting = settings.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId) || LND_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.tableSetting.tableId)!;
+        if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelectionSM));
+        } else {
+          this.displayedColumns = JSON.parse(JSON.stringify(this.tableSetting.columnSelection));
+        }
+        this.displayedColumns.unshift('status');
+        this.displayedColumns.push('actions');
+        this.pageSize = this.tableSetting.recordsPerPage ? +this.tableSetting.recordsPerPage : PAGE_SIZE;
+        this.logger.info(this.displayedColumns);
+      });
+    this.store.select(payments).pipe(takeUntil(this.unSubs[5])).
       subscribe((paymentsSelector: { listPayments: ListPayments, apiCallStatus: ApiCallStatusPayload }) => {
         this.errorMessage = '';
         this.apiCallStatus = paymentsSelector.apiCallStatus;
@@ -233,7 +250,7 @@ export class LightningPaymentsComponent implements OnInit, AfterViewInit, OnDest
           if (this.paymentDecoded.num_satoshis) {
             if (this.selNode && this.selNode.fiatConversion) {
               this.commonService.convertCurrency(+this.paymentDecoded.num_satoshis, CurrencyUnitEnum.SATS, CurrencyUnitEnum.OTHER, (this.selNode.currencyUnits && this.selNode.currencyUnits.length > 2 ? this.selNode.currencyUnits[2] : ''), this.selNode.fiatConversion).
-                pipe(takeUntil(this.unSubs[5])).
+                pipe(takeUntil(this.unSubs[6])).
                 subscribe({
                   next: (data) => {
                     this.paymentDecodedHint = 'Sending: ' + this.decimalPipe.transform(this.paymentDecoded.num_satoshis ? this.paymentDecoded.num_satoshis : 0) + ' Sats (' + data.symbol + this.decimalPipe.transform((data.OTHER ? data.OTHER : 0), CURRENCY_UNIT_FORMATS.OTHER) + ') | Memo: ' + this.paymentDecoded.description;
@@ -291,7 +308,7 @@ export class LightningPaymentsComponent implements OnInit, AfterViewInit, OnDest
         accumulator.push('<pre>Channel: ' + peerFound.alias.padEnd(20) + '&Tab;&Tab;&Tab;Amount (Sats): ' + self.decimalPipe.transform(currentHop.amt_to_forward) + '</pre>');
       } else {
         self.dataService.getAliasesFromPubkeys((currentHop.pub_key || ''), false).
-          pipe(takeUntil(self.unSubs[6])).
+          pipe(takeUntil(self.unSubs[7])).
           subscribe((res: any) => {
             accumulator.push('<pre>Channel: ' + (res.node && res.node.alias ? res.node.alias.padEnd(20) : (currentHop.pub_key?.substring(0, 17) + '...')) + '&Tab;&Tab;&Tab;Amount (Sats): ' + self.decimalPipe.transform(currentHop.amt_to_forward) + '</pre>');
           });
@@ -348,7 +365,7 @@ export class LightningPaymentsComponent implements OnInit, AfterViewInit, OnDest
   onPaymentClick(selPayment: Payment) {
     if (selPayment.htlcs && selPayment.htlcs[0] && selPayment.htlcs[0].route && selPayment.htlcs[0].route.hops && selPayment.htlcs[0].route.hops.length > 0) {
       const nodePubkeys = selPayment.htlcs[0].route.hops?.reduce((pubkeys, hop) => (hop.pub_key && pubkeys === '' ? hop.pub_key : pubkeys + ',' + hop.pub_key), '');
-      this.dataService.getAliasesFromPubkeys(nodePubkeys, true).pipe(takeUntil(this.unSubs[7])).
+      this.dataService.getAliasesFromPubkeys(nodePubkeys, true).pipe(takeUntil(this.unSubs[8])).
         subscribe((nodes: any) => {
           this.showPaymentView(selPayment, nodes?.reduce((pathAliases, node) => (pathAliases === '' ? node : pathAliases + '\n' + node), ''));
         });
@@ -412,6 +429,7 @@ export class LightningPaymentsComponent implements OnInit, AfterViewInit, OnDest
       }
     };
     this.payments.sort = this.sort;
+    this.payments.sort?.sort({ id: this.tableSetting.sortBy, start: this.tableSetting.sortOrder, disableClear: true });
     this.payments.filterPredicate = (payment: Payment, fltr: string) => {
       const newPayment = ((payment.creation_date) ? this.datePipe.transform(new Date(payment.creation_date * 1000), 'dd/MMM/YYYY HH:mm')?.toLowerCase() : '') + JSON.stringify(payment).toLowerCase();
       return newPayment.includes(fltr);
@@ -429,7 +447,7 @@ export class LightningPaymentsComponent implements OnInit, AfterViewInit, OnDest
         return paymentReqs;
       }, '');
       this.dataService.decodePayments(paymentRequests).
-        pipe(takeUntil(this.unSubs[8])).
+        pipe(takeUntil(this.unSubs[9])).
         subscribe((decodedPayments: PayRequest[]) => {
           let increament = 0;
           decodedPayments.forEach((decodedPayment, idx) => {

src/app/shared/services/consts-enums-functions.ts

@@ -845,6 +845,75 @@ export const CLN_TABLES_DEF = {
 };
 
 export const LND_DEFAULT_PAGE_SETTINGS: PageSettings[] = [
+  { pageId: 'on_chain', tables: [
+    { tableId: 'utxos', recordsPerPage: PAGE_SIZE, sortBy: 'tx_id', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['output', 'amount_sat', 'confirmations'],
+      columnSelection: ['tx_id', 'output', 'label', 'amount_sat', 'confirmations'] },
+    { tableId: 'transactions', recordsPerPage: PAGE_SIZE, sortBy: 'time_stamp', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['time_stamp', 'amount', 'num_confirmations'],
+      columnSelection: ['time_stamp', 'label', 'amount', 'total_fees', 'block_height', 'num_confirmations'] },
+    { tableId: 'dust_utxos', recordsPerPage: PAGE_SIZE, sortBy: 'tx_id', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['output', 'amount_sat', 'confirmations'],
+      columnSelection: ['tx_id', 'output', 'label', 'amount_sat', 'confirmations'] }
+  ] },
+  { pageId: 'peers_channels', tables: [
+    { tableId: 'open', recordsPerPage: PAGE_SIZE, sortBy: 'balancedness', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['remote_alias', 'local_balance', 'remote_balance'],
+      columnSelection: ['remote_alias', 'uptime', 'total_satoshis_sent', 'total_satoshis_received', 'local_balance', 'remote_balance', 'balancedness'] },
+    { tableId: 'pending_open', recordsPerPage: PAGE_SIZE, sortBy: 'capacity', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['remote_alias', 'capacity'],
+      columnSelection: ['remote_alias', 'commit_fee', 'commit_weight', 'capacity'] },
+    { tableId: 'pending_force_closing', recordsPerPage: PAGE_SIZE, sortBy: 'limbo_balance', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['remote_alias', 'limbo_balance'],
+      columnSelection: ['remote_alias', 'recovered_balance', 'limbo_balance', 'capacity'] },
+    { tableId: 'pending_closing', recordsPerPage: PAGE_SIZE, sortBy: 'capacity', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['remote_alias', 'capacity'],
+      columnSelection: ['remote_alias', 'local_balance', 'remote_balance', 'capacity'] },
+    { tableId: 'pending_waiting_close', recordsPerPage: PAGE_SIZE, sortBy: 'limbo_balance', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['remote_alias', 'limbo_balance'],
+      columnSelection: ['remote_alias', 'limbo_balance', 'local_balance', 'remote_balance'] },
+    { tableId: 'closed', recordsPerPage: PAGE_SIZE, sortBy: 'close_type', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['remote_alias', 'settled_balance'],
+      columnSelection: ['close_type', 'remote_alias', 'capacity', 'close_height', 'settled_balance'] },
+    { tableId: 'active_HTLCs', recordsPerPage: PAGE_SIZE, sortBy: 'expiration_height', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['amount', 'incoming', 'expiration_height'],
+      columnSelection: ['amount', 'incoming', 'expiration_height', 'hash_lock'] },
+    { tableId: 'peers', recordsPerPage: PAGE_SIZE, sortBy: 'alias', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['alias', 'sat_sent', 'sat_recv'],
+      columnSelection: ['alias', 'pub_key', 'sat_sent', 'sat_recv', 'ping_time'] }
+  ] },
+  { pageId: 'transactions', tables: [
+    { tableId: 'payments', recordsPerPage: PAGE_SIZE, sortBy: 'creation_date', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['creation_date', 'fee', 'value'],
+      columnSelection: ['creation_date', 'payment_hash', 'fee', 'value', 'hops'] },
+    { tableId: 'invoices', recordsPerPage: PAGE_SIZE, sortBy: 'creation_date', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['creation_date', 'settle_date', 'value'],
+      columnSelection: ['creation_date', 'settle_date', 'memo', 'value', 'amt_paid_sat'] }
+  ] },
+  { pageId: 'routing', tables: [
+    { tableId: 'forwarding_history', recordsPerPage: PAGE_SIZE, sortBy: 'timestamp', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['timestamp', 'amt_in', 'amt_out'],
+      columnSelection: ['timestamp', 'alias_in', 'alias_out', 'amt_in', 'amt_out', 'fee_msat'] },
+    { tableId: 'routing_peers', recordsPerPage: PAGE_SIZE, sortBy: 'total_amount', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['alias', 'events', 'total_amount'],
+      columnSelection: ['chan_id', 'alias', 'events', 'total_amount'] },
+    { tableId: 'non_routing_peers', recordsPerPage: PAGE_SIZE, sortBy: 'remote_alias', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['remote_alias', 'local_balance', 'remote_balance'],
+      columnSelection: ['chan_id', 'remote_alias', 'total_satoshis_received', 'total_satoshis_sent', 'local_balance', 'remote_balance'] }
+  ] },
+  { pageId: 'reports', tables: [
+    { tableId: 'routing', recordsPerPage: PAGE_SIZE, sortBy: 'timestamp', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['timestamp', 'amt_in', 'amt_out'],
+      columnSelection: ['timestamp', 'alias_in', 'alias_out', 'amt_in', 'amt_out', 'fee_msat'] },
+    { tableId: 'transactions', recordsPerPage: PAGE_SIZE, sortBy: 'date', sortOrder: SortOrderEnum.DESCENDING,
+      columnSelectionSM: ['date', 'amount_paid', 'amount_received'],
+      columnSelection: ['date', 'amount_paid', 'num_payments', 'amount_received', 'num_invoices'] }
+  ] },
+  { pageId: 'graph_lookup', tables: [
+    { tableId: 'query_routes', recordsPerPage: PAGE_SIZE, sortBy: 'hop_sequence', sortOrder: SortOrderEnum.ASCENDING,
+      columnSelectionSM: ['hop_sequence', 'pubkey_alias', 'fee_msat'],
+      columnSelection: ['hop_sequence', 'pubkey_alias', 'chan_capacity', 'amt_to_forward_msat', 'fee_msat'] }
+  ] },
   { pageId: 'loop', tables: [
     { tableId: 'loop', recordsPerPage: PAGE_SIZE, sortBy: 'initiation_time', sortOrder: SortOrderEnum.DESCENDING,
       columnSelectionSM: ['state', 'amt'],
@@ -861,6 +930,94 @@ export const LND_DEFAULT_PAGE_SETTINGS: PageSettings[] = [
 ];
 
 export const LND_TABLES_DEF = {
+  on_chain: {
+    utxos: {
+      maxColumns: 5,
+      allowedColumns: ['tx_id', 'output', 'label', 'amount_sat', 'confirmations']
+    },
+    transactions: {
+      maxColumns: 7,
+      allowedColumns: ['time_stamp', 'label', 'amount', 'total_fees', 'block_height', 'num_confirmations']
+    },
+    dust_utxos: {
+      maxColumns: 5,
+      allowedColumns: ['tx_id', 'output', 'label', 'amount_sat', 'confirmations']
+    }
+  },
+  peers_channels: {
+    open: {
+      maxColumns: 7,
+      allowedColumns: ['remote_alias', 'uptime', 'total_satoshis_sent', 'total_satoshis_received', 'local_balance', 'remote_balance', 'balancedness']
+    },
+    pending_open: {
+      maxColumns: 4,
+      allowedColumns: ['remote_alias', 'commit_fee', 'commit_weight', 'capacity']
+    },
+    pending_force_closing: {
+      maxColumns: 4,
+      allowedColumns: ['remote_alias', 'recovered_balance', 'limbo_balance', 'capacity']
+    },
+    pending_closing: {
+      maxColumns: 4,
+      allowedColumns: ['remote_alias', 'local_balance', 'remote_balance', 'capacity']
+    },
+    pending_waiting_close: {
+      maxColumns: 4,
+      allowedColumns: ['remote_alias', 'limbo_balance', 'local_balance', 'remote_balance']
+    },
+    closed: {
+      maxColumns: 5,
+      allowedColumns: ['close_type', 'remote_alias', 'capacity', 'close_height', 'settled_balance']
+    },
+    active_HTLCs: {
+      maxColumns: 4,
+      allowedColumns: ['amount', 'incoming', 'expiration_height', 'hash_lock']
+    },
+    peers: {
+      maxColumns: 3,
+      allowedColumns: ['alias', 'pub_key', 'sat_sent', 'sat_recv', 'ping_time']
+    }
+  },
+  transactions: {
+    payments: {
+      maxColumns: 5,
+      allowedColumns: ['creation_date', 'payment_hash', 'fee', 'value', 'hops']
+    },
+    invoices: {
+      maxColumns: 5,
+      allowedColumns: ['creation_date', 'settle_date', 'memo', 'value', 'amt_paid_sat']
+    }
+  },
+  routing: {
+    forwarding_history: {
+      maxColumns: 6,
+      allowedColumns: ['timestamp', 'alias_in', 'alias_out', 'amt_in', 'amt_out', 'fee_msat']
+    },
+    routing_peers: {
+      maxColumns: 4,
+      allowedColumns: ['chan_id', 'alias', 'events', 'total_amount']
+    },
+    non_routing_peers: {
+      maxColumns: 6,
+      allowedColumns: ['chan_id', 'remote_alias', 'total_satoshis_received', 'total_satoshis_sent', 'local_balance', 'remote_balance']
+    }
+  },
+  reports: {
+    routing: {
+      maxColumns: 6,
+      allowedColumns: ['timestamp', 'alias_in', 'alias_out', 'amt_in', 'amt_out', 'fee_msat']
+    },
+    transactions: {
+      maxColumns: 5,
+      allowedColumns: ['date', 'amount_paid', 'num_payments', 'amount_received', 'num_invoices']
+    }
+  },
+  graph_lookup: {
+    query_routes: {
+      maxColumns: 5,
+      allowedColumns: ['hop_sequence', 'pubkey_alias', 'chan_capacity', 'amt_to_forward_msat', 'fee_msat']
+    }
+  },
   loop: {
     loop: {
       maxColumns: 8,