CLN Payment record/page & showcolumns except sort

backend/controllers/cln/payments.js

@@ -73,9 +73,9 @@ export const listPayments = (req, res, next) => {
     options.url = req.session.selectedNode.ln_server_url + '/v1/pay/listPayments';
     request(options).then((body) => {
         logger.log({ selectedNode: req.session.selectedNode, level: 'DEBUG', fileName: 'Payments', msg: 'Payment List Received', data: body.payments });
-        if (body && body.payments && body.payments.length > 0) {
-            body.payments = common.sortDescByKey(body.payments, 'created_at');
-        }
+        // if (body && body.payments && body.payments.length > 0) {
+        //   body.payments = common.sortDescByKey(body.payments, 'created_at');
+        // }
         logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Payments', msg: 'Sorted Payments List Received', data: body.payments });
         res.status(200).json(groupBy(body.payments));
     }).catch((errRes) => {

backend/models/database.model.js

@@ -58,6 +58,7 @@ export var TableSettingsFieldsEnum;
     TableSettingsFieldsEnum["SORT_BY"] = "sortBy";
     TableSettingsFieldsEnum["SORT_ORDER"] = "sortOrder";
     TableSettingsFieldsEnum["SHOW_COLUMNS"] = "showColumns";
+    TableSettingsFieldsEnum["SHOW_COLUMNS_SM"] = "showColumnsSM";
 })(TableSettingsFieldsEnum || (TableSettingsFieldsEnum = {}));
 export class TableSetting {
     constructor(tableId, recordsPerPage, sortBy, sortOrder, showColumns) {
@@ -96,6 +97,15 @@ export const validatePageSettings = (documentToValidate) => {
         if (!table.hasOwnProperty(CollectionFieldsEnum.RECORDS_PER_PAGE)) {
             errMsg = errMsg + 'Records/Page is mandatory.';
         }
+        if (!table.hasOwnProperty(CollectionFieldsEnum.SHOW_COLUMNS_SM)) {
+            errMsg = errMsg + 'Show Columns Small Screen is mandatory.';
+        }
+        if (table[CollectionFieldsEnum.SHOW_COLUMNS_SM].length < 1) {
+            errMsg = errMsg + 'Show Columns Small Screen should have at least 1 field.';
+        }
+        if (table[CollectionFieldsEnum.SHOW_COLUMNS_SM].length > 2) {
+            errMsg = errMsg + 'Show Columns Small Screen should have maximum 2 fields.';
+        }
         if (!table.hasOwnProperty(CollectionFieldsEnum.SHOW_COLUMNS)) {
             errMsg = errMsg + 'Show Columns is mandatory.';
         }

server/controllers/cln/payments.ts

@@ -63,9 +63,9 @@ export const listPayments = (req, res, next) => {
   options.url = req.session.selectedNode.ln_server_url + '/v1/pay/listPayments';
   request(options).then((body) => {
     logger.log({ selectedNode: req.session.selectedNode, level: 'DEBUG', fileName: 'Payments', msg: 'Payment List Received', data: body.payments });
-    if (body && body.payments && body.payments.length > 0) {
-      body.payments = common.sortDescByKey(body.payments, 'created_at');
-    }
+    // if (body && body.payments && body.payments.length > 0) {
+    //   body.payments = common.sortDescByKey(body.payments, 'created_at');
+    // }
     logger.log({ selectedNode: req.session.selectedNode, level: 'INFO', fileName: 'Payments', msg: 'Sorted Payments List Received', data: body.payments });
     res.status(200).json(groupBy(body.payments));
   }).catch((errRes) => {

server/models/database.model.ts

@@ -61,7 +61,8 @@ export enum TableSettingsFieldsEnum {
   RECORDS_PER_PAGE = 'recordsPerPage',
   SORT_BY = 'sortBy',
   SORT_ORDER = 'sortOrder',
-  SHOW_COLUMNS = 'showColumns'
+  SHOW_COLUMNS = 'showColumns',
+  SHOW_COLUMNS_SM = 'showColumnsSM'
 }
 
 export class TableSetting {
@@ -107,6 +108,15 @@ export const validatePageSettings = (documentToValidate): any => {
     if (!table.hasOwnProperty(CollectionFieldsEnum.RECORDS_PER_PAGE)) {
       errMsg = errMsg + 'Records/Page is mandatory.';
     }
+    if (!table.hasOwnProperty(CollectionFieldsEnum.SHOW_COLUMNS_SM)) {
+      errMsg = errMsg + 'Show Columns Small Screen is mandatory.';
+    }
+    if (table[CollectionFieldsEnum.SHOW_COLUMNS_SM].length < 1) {
+      errMsg = errMsg + 'Show Columns Small Screen should have at least 1 field.';
+    }
+    if (table[CollectionFieldsEnum.SHOW_COLUMNS_SM].length > 2) {
+      errMsg = errMsg + 'Show Columns Small Screen should have maximum 2 fields.';
+    }
     if (!table.hasOwnProperty(CollectionFieldsEnum.SHOW_COLUMNS)) {
       errMsg = errMsg + 'Show Columns is mandatory.';
     }

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

@@ -62,7 +62,7 @@
           <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onHopClick(hop, $event)">View Info</button>          
         </td>
       </ng-container>
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </div>

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

@@ -27,7 +27,6 @@ export class CLNQueryRoutesComponent implements OnInit, OnDestroy {
   public destinationPubkey = '';
   public amount: number | null = null;
   public qrHops: any;
-  public flgSticky = false;
   public displayedColumns: any[] = [];
   public flgLoading: Array<Boolean | 'error'> = [false]; // 0: peers
   public faRoute = faRoute;
@@ -39,16 +38,12 @@ export class CLNQueryRoutesComponent implements OnInit, OnDestroy {
   constructor(private store: Store<RTLState>, private clnEffects: CLNEffects, private commonService: CommonService) {
     this.screenSize = this.commonService.getScreenSize();
     if (this.screenSize === ScreenSizeEnum.XS) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'msatoshi', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'direction', 'msatoshi', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'direction', 'delay', 'msatoshi', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['alias', 'channel', 'direction', 'delay', 'msatoshi', 'actions'];
     }
   }

src/app/cln/liquidity-ads/liquidity-ads-list/liquidity-ads-list.component.html

@@ -126,7 +126,7 @@
               </td>
             </ng-container>
             <tr mat-footer-row *matFooterRowDef="['no_lqNode']" [ngClass]="{'display-none': liquidityNodes?.data && liquidityNodes?.data?.length>0}"></tr>
-            <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
             <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
           </table>
         </div>

src/app/cln/liquidity-ads/liquidity-ads-list/liquidity-ads-list.component.ts

@@ -47,7 +47,6 @@ export class CLNLiquidityAdsListComponent implements OnInit, OnDestroy {
   public channelCount = 5;
   public liquidityNodesData: LookupNode[] = [];
   public liquidityNodes: any;
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -64,16 +63,12 @@ export class CLNLiquidityAdsListComponent implements OnInit, OnDestroy {
     this.nodesTooltipMsg = this.nodesTooltipMsg + '- The number of channels open on the node, the more the better\n- The channel open fee which the node will charge from you\n- The routing fee which the node will charge on the payments, the lesser the better\n- The reliability of the node, ideally uptime. Refer to the information being provided by the node explorers';
     this.screenSize = this.commonService.getScreenSize();
     if (this.screenSize === ScreenSizeEnum.XS) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'channelOpeningFee', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'leaseFee', 'routingFee', 'channelOpeningFee', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'leaseFee', 'routingFee', 'channelOpeningFee', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['alias', 'leaseFee', 'routingFee', 'channelOpeningFee', 'actions'];
     }
   }

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

@@ -62,7 +62,7 @@
           </td>
         </ng-container>
         <tr mat-footer-row *matFooterRowDef="['no_utxo']" [ngClass]="{'display-none': listUTXOs?.data && listUTXOs?.data?.length>0}"></tr>
-        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
       </table>
       <mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>

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

@@ -33,7 +33,6 @@ export class CLNOnChainUtxosComponent implements OnInit, OnChanges, AfterViewIni
   @Input() utxos: UTXO[];
   public displayedColumns: any[] = [];
   public listUTXOs: any;
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -47,16 +46,12 @@ export class CLNOnChainUtxosComponent implements OnInit, OnChanges, AfterViewIni
   constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>) {
     this.screenSize = this.commonService.getScreenSize();
     if (this.screenSize === ScreenSizeEnum.XS) {
-      this.flgSticky = false;
       this.displayedColumns = ['txid', 'value', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['txid', 'output', 'value', 'blockheight', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['txid', 'output', 'value', 'blockheight', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['txid', 'output', 'value', 'blockheight', 'actions'];
     }
   }

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

@@ -98,7 +98,7 @@
         </td>
       </ng-container>
       <tr mat-footer-row *matFooterRowDef="['no_peer']" [ngClass]="{'display-none': numPeers>0 && channels?.data && channels?.data?.length>0}"></tr>
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </div>

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

@@ -46,7 +46,6 @@ export class CLNChannelOpenTableComponent implements OnInit, AfterViewInit, OnDe
   public numPeers = -1;
   public feeRateTypes = FEE_RATE_TYPES;
   public selFilter = '';
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -59,16 +58,12 @@ export class CLNChannelOpenTableComponent implements OnInit, AfterViewInit, OnDe
   constructor(private logger: LoggerService, private store: Store<RTLState>, private rtlEffects: RTLEffects, private clnEffects: CLNEffects, private commonService: CommonService, private router: Router) {
     this.screenSize = this.commonService.getScreenSize();
     if (this.screenSize === ScreenSizeEnum.XS) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'msatoshi_to_us', 'msatoshi_to_them', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['short_channel_id', 'alias', 'msatoshi_to_us', 'msatoshi_to_them', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['short_channel_id', 'alias', 'msatoshi_to_us', 'msatoshi_to_them', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['short_channel_id', 'alias', 'msatoshi_to_us', 'msatoshi_to_them', 'balancedness', 'actions'];
     }
     this.selFilter = this.router?.getCurrentNavigation()?.extras?.state?.filter ? this.router?.getCurrentNavigation()?.extras?.state?.filter : '';

src/app/cln/peers-channels/channels/channels-tables/channel-pending-table/channel-pending-table.component.html

@@ -72,7 +72,7 @@
         </td>
       </ng-container>
       <tr mat-footer-row *matFooterRowDef="['no_peer']" [ngClass]="{'display-none': numPeers>0 && channels?.data && channels?.data?.length>0}"></tr>
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </div>

src/app/cln/peers-channels/channels/channels-tables/channel-pending-table/channel-pending-table.component.ts

@@ -42,7 +42,6 @@ export class CLNChannelPendingTableComponent implements OnInit, AfterViewInit, O
   public numPeers = -1;
   public feeRateTypes = FEE_RATE_TYPES;
   public selFilter = '';
-  public flgSticky = false;
   public CLNChannelPendingState = CLNChannelPendingState;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
@@ -56,16 +55,12 @@ export class CLNChannelPendingTableComponent implements OnInit, AfterViewInit, O
   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.flgSticky = false;
       this.displayedColumns = ['alias', 'state', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'connected', 'state', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'connected', 'state', 'msatoshi_total', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['alias', 'connected', 'state', 'msatoshi_total', 'actions'];
     }
   }

src/app/cln/peers-channels/peers/peers.component.html

@@ -66,7 +66,7 @@
           </td>
         </ng-container>
         <tr mat-footer-row *matFooterRowDef="['no_peer']" [ngClass]="{'display-none': peers?.data && peers?.data?.length>0}"></tr>
-        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
       </table>
     </div>

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

@@ -43,7 +43,6 @@ export class CLNPeersComponent implements OnInit, AfterViewInit, OnDestroy {
   public peers: any;
   public information: GetInfo = {};
   public availableBalance = 0;
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -57,16 +56,12 @@ export class CLNPeersComponent implements OnInit, AfterViewInit, OnDestroy {
   constructor(private logger: LoggerService, private store: Store<RTLState>, private rtlEffects: RTLEffects, private actions: Actions, private commonService: CommonService) {
     this.screenSize = this.commonService.getScreenSize();
     if (this.screenSize === ScreenSizeEnum.XS) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'id', 'netaddr', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'id', 'netaddr', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['alias', 'id', 'netaddr', 'actions'];
     }
   }

src/app/cln/routing/failed-transactions/failed-transactions.component.html

@@ -64,7 +64,7 @@
         </td>
       </ng-container>
       <tr mat-footer-row *matFooterRowDef="['no_event']" [ngClass]="{'display-none': failedForwardingEvents?.data && failedForwardingEvents?.data?.length>0}"></tr>
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </div>

src/app/cln/routing/failed-transactions/failed-transactions.component.ts

@@ -37,7 +37,6 @@ export class CLNFailedTransactionsComponent implements OnInit, AfterViewInit, On
   public errorMessage = '';
   public displayedColumns: any[] = [];
   public failedForwardingEvents: any;
-  public flgSticky = false;
   public selFilter = '';
   public totalFailedTransactions = 0;
   public pageSize = PAGE_SIZE;
@@ -51,13 +50,10 @@ export class CLNFailedTransactionsComponent implements OnInit, AfterViewInit, On
   constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>, private datePipe: DatePipe, private router: Router) {
     this.screenSize = this.commonService.getScreenSize();
     if (this.screenSize === ScreenSizeEnum.XS) {
-      this.flgSticky = false;
       this.displayedColumns = ['received_time', 'in_channel', 'in_msatoshi', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM || this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['received_time', 'in_channel', 'out_channel', 'in_msatoshi', 'out_msatoshi', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['received_time', 'resolved_time', 'in_channel', 'out_channel', 'in_msatoshi', 'out_msatoshi', 'fee', 'actions'];
     }
   }

src/app/cln/routing/forwarding-history/forwarding-history.component.html

@@ -62,7 +62,7 @@
         </td>
       </ng-container>
       <tr mat-footer-row *matFooterRowDef="['no_event']" [ngClass]="{'display-none': forwardingHistoryEvents?.data && forwardingHistoryEvents?.data?.length>0}"></tr>
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </div>

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

@@ -36,7 +36,6 @@ export class CLNForwardingHistoryComponent implements OnInit, OnChanges, AfterVi
   public successfulEvents: ForwardingEvent[] = [];
   public displayedColumns: any[] = [];
   public forwardingHistoryEvents: any;
-  public flgSticky = false;
   public totalForwardedTransactions = 0;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
@@ -50,13 +49,10 @@ export class CLNForwardingHistoryComponent implements OnInit, OnChanges, AfterVi
   constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>, private datePipe: DatePipe, private router: Router) {
     this.screenSize = this.commonService.getScreenSize();
     if (this.screenSize === ScreenSizeEnum.XS) {
-      this.flgSticky = false;
       this.displayedColumns = ['in_msatoshi', 'out_msatoshi', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM || this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['received_time', 'in_msatoshi', 'out_msatoshi', 'fee', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['received_time', 'resolved_time', 'in_channel', 'out_channel', 'in_msatoshi', 'out_msatoshi', 'fee', 'actions'];
     }
   }

src/app/cln/routing/local-failed-transactions/local-failed-transactions.component.html

@@ -52,7 +52,7 @@
         </td>
       </ng-container>
       <tr mat-footer-row *matFooterRowDef="['no_event']" [ngClass]="{'display-none': failedLocalForwardingEvents?.data && failedLocalForwardingEvents?.data?.length>0}"></tr>
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </div>

src/app/cln/routing/local-failed-transactions/local-failed-transactions.component.ts

@@ -38,7 +38,6 @@ export class CLNLocalFailedTransactionsComponent implements OnInit, AfterViewIni
   public errorMessage = '';
   public displayedColumns: any[] = [];
   public failedLocalForwardingEvents: any;
-  public flgSticky = false;
   public selFilter = '';
   public totalLocalFailedTransactions = 0;
   public pageSize = PAGE_SIZE;
@@ -52,13 +51,10 @@ export class CLNLocalFailedTransactionsComponent implements OnInit, AfterViewIni
   constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>, private datePipe: DatePipe, private router: Router) {
     this.screenSize = this.commonService.getScreenSize();
     if (this.screenSize === ScreenSizeEnum.XS) {
-      this.flgSticky = false;
       this.displayedColumns = ['received_time', 'in_channel', 'in_msatoshi', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM || this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['received_time', 'in_channel', 'in_msatoshi', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['received_time', 'in_channel', 'in_msatoshi', 'failreason', 'actions'];
     }
   }

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

@@ -40,7 +40,7 @@
             </td>
           </ng-container>
           <tr mat-footer-row *matFooterRowDef="['no_incoming_event']" [ngClass]="{'display-none': RoutingPeersIncoming?.data && RoutingPeersIncoming?.data?.length>0}"></tr>
-          <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
           <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
       </div>
@@ -85,7 +85,7 @@
             </td>
           </ng-container>
           <tr mat-footer-row *matFooterRowDef="['no_outgoing_event']" [ngClass]="{'display-none': RoutingPeersOutgoing?.data && RoutingPeersOutgoing?.data?.length>0}"></tr>
-          <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
           <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
         <mat-paginator #paginatorOut [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>

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

@@ -35,7 +35,6 @@ export class CLNRoutingPeersComponent implements OnInit, OnChanges, AfterViewIni
   public displayedColumns: any[] = [];
   public RoutingPeersIncoming: any = [];
   public RoutingPeersOutgoing: any = [];
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -50,16 +49,12 @@ export class CLNRoutingPeersComponent implements OnInit, OnChanges, AfterViewIni
   constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>) {
     this.screenSize = this.commonService.getScreenSize();
     if (this.screenSize === ScreenSizeEnum.XS) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'total_fee'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'events', 'total_fee'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'events', 'total_amount', 'total_fee'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['channel_id', 'alias', 'events', 'total_amount', 'total_fee'];
     }
   }

src/app/cln/transactions/invoices/invoices-table/lightning-invoices-table.component.html

@@ -90,7 +90,7 @@
           </td>
         </ng-container>
         <tr mat-footer-row *matFooterRowDef="['no_invoice']" [ngClass]="{'display-none': invoices?.data && invoices?.data?.length>0}"></tr>
-        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
       </table>
     </div>

src/app/cln/transactions/invoices/invoices-table/lightning-invoices-table.component.ts

@@ -51,7 +51,6 @@ export class CLNLightningInvoicesTableComponent implements OnInit, AfterViewInit
   public invoices: any;
   public invoiceJSONArr: Invoice[] = [];
   public information: GetInfo = {};
-  public flgSticky = false;
   public private = false;
   public expiryStep = 100;
   public pageSize = PAGE_SIZE;
@@ -67,16 +66,12 @@ export class CLNLightningInvoicesTableComponent implements OnInit, AfterViewInit
   constructor(private logger: LoggerService, private store: Store<RTLState>, private decimalPipe: DecimalPipe, private commonService: CommonService, private rtlEffects: RTLEffects, private datePipe: DatePipe, private actions: Actions) {
     this.screenSize = this.commonService.getScreenSize();
     if (this.screenSize === ScreenSizeEnum.XS) {
-      this.flgSticky = false;
       this.displayedColumns = ['expires_at', 'msatoshi', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['expires_at', 'description', 'msatoshi', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['expires_at', 'type', 'description', 'msatoshi', 'msatoshi_received', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['expires_at', 'paid_at', 'type', 'description', 'msatoshi', 'msatoshi_received', 'actions'];
     }
   }

src/app/cln/transactions/offers/offer-bookmarks-table/offer-bookmarks-table.component.html

@@ -65,7 +65,7 @@
           </td>
         </ng-container>
         <tr mat-footer-row *matFooterRowDef="['no_offer']" [ngClass]="{'display-none': offersBookmarks?.data && offersBookmarks?.data?.length>0}"></tr>
-        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
       </table>
     </div>

src/app/cln/transactions/offers/offer-bookmarks-table/offer-bookmarks-table.component.ts

@@ -37,7 +37,6 @@ export class CLNOfferBookmarksTableComponent implements OnInit, AfterViewInit, O
   public displayedColumns: any[] = [];
   public offersBookmarks: any;
   public offersBookmarksJSONArr: OfferBookmark[] = [];
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -51,16 +50,12 @@ export class CLNOfferBookmarksTableComponent implements OnInit, AfterViewInit, O
   constructor(private logger: LoggerService, private store: Store<RTLState>, private commonService: CommonService, private rtlEffects: RTLEffects) {
     this.screenSize = this.commonService.getScreenSize();
     if (this.screenSize === ScreenSizeEnum.XS) {
-      this.flgSticky = false;
       this.displayedColumns = ['lastUpdatedAt', 'title', 'amountMSat', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['lastUpdatedAt', 'title', 'amountMSat', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['lastUpdatedAt', 'title', 'amountMSat', 'description', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['lastUpdatedAt', 'title', 'amountMSat', 'description', 'actions'];
     }
   }

src/app/cln/transactions/offers/offers-table/offers-table.component.html

@@ -65,7 +65,7 @@
           </td>
         </ng-container>
         <tr mat-footer-row *matFooterRowDef="['no_offer']" [ngClass]="{'display-none': offers?.data && offers?.data?.length>0}"></tr>
-        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
       </table>
     </div>

src/app/cln/transactions/offers/offers-table/offers-table.component.ts

@@ -53,7 +53,6 @@ export class CLNOffersTableComponent implements OnInit, AfterViewInit, OnDestroy
   public offers: any;
   public offerJSONArr: Offer[] = [];
   public information: GetInfo = {};
-  public flgSticky = false;
   public private = false;
   public expiryStep = 100;
   public pageSize = PAGE_SIZE;
@@ -69,16 +68,12 @@ export class CLNOffersTableComponent implements OnInit, AfterViewInit, OnDestroy
   constructor(private logger: LoggerService, private store: Store<RTLState>, private commonService: CommonService, private rtlEffects: RTLEffects, private dataService: DataService, private decimalPipe: DecimalPipe, private datePipe: DatePipe) {
     this.screenSize = this.commonService.getScreenSize();
     if (this.screenSize === ScreenSizeEnum.XS) {
-      this.flgSticky = false;
       this.displayedColumns = ['offer_id', 'single_use', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['offer_id', 'single_use', 'used', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['offer_id', 'single_use', 'used', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['offer_id', 'single_use', 'used', 'actions'];
     }
   }

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

@@ -30,14 +30,8 @@
           <ng-container matColumnDef="status">
             <th mat-header-cell *matHeaderCellDef mat-sort-header></th>
             <td mat-cell *matCellDef="let payment">
-              <span *ngIf="payment.status === 'complete'" class="dot green" matTooltip="Completed" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
-              <span *ngIf="payment.status !== 'complete'" class="dot yellow" matTooltip="Failed" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
-            </td>
-          </ng-container>
-          <ng-container matColumnDef="id">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
-            <td mat-cell *matCellDef="let payment">
-              {{payment?.id}}
+              <span *ngIf="payment.status === 'complete'" class="dot green" matTooltip="Completed" matTooltipPosition="right"></span>
+              <span *ngIf="payment.status !== 'complete'" class="dot yellow" matTooltip="Failed" matTooltipPosition="right"></span>
             </td>
           </ng-container>
           <ng-container matColumnDef="created_at">
@@ -120,29 +114,39 @@
           </ng-container>
 
           <!-- Payment Group Row Start -->
-          <ng-container matColumnDef="groupTotal">
+          <ng-container matColumnDef="group_status">
+            <td mat-cell *matCellDef="let payment">
+              <span fxLayoutAlign="start center" class="mpp-row-span">
+                <span *ngIf="payment.status === 'complete'" class="dot green" matTooltip="Completed" matTooltipPosition="right"></span>
+                <span *ngIf="payment.status !== 'complete'" class="dot yellow" matTooltip="Incomplete/Failed" matTooltipPosition="right"></span>
+              </span>
+              <ng-container *ngIf="payment.is_expanded">
+                <span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="mpp-row-span pl-3">
+                  <span *ngIf="mpp.status === 'complete'" class="dot green" matTooltip="Completed" matTooltipPosition="right"></span>
+                  <span *ngIf="mpp.status !== 'complete'" class="dot yellow" matTooltip="Incomplete/Failed" matTooltipPosition="right"></span>
+                </span>
+              </ng-container>
+            </td>
+          </ng-container>
+          <ng-container matColumnDef="group_created_at">
             <td mat-cell *matCellDef="let payment">
               <span fxLayoutAlign="start center" class="mpp-row-span">
-                <span *ngIf="payment.status === 'complete'" class="dot green mt-0" matTooltip="Completed" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
-                <span *ngIf="payment.status !== 'complete'" class="dot yellow mt-0" matTooltip="Incomplete/Failed" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
                 Total Attempts: {{payment?.total_parts}}
               </span>
               <ng-container *ngIf="payment.is_expanded">
                 <span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="mpp-row-span pl-3">
-                  <span *ngIf="mpp.status === 'complete'" class="dot green mt-0" matTooltip="Completed" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
-                  <span *ngIf="mpp.status !== 'complete'" class="dot yellow mt-0" matTooltip="Incomplete/Failed" matTooltipPosition="right" [ngClass]="{'mr-0': screenSize === screenSizeEnum.XS}"></span>
                   {{(mpp.created_at * 1000) | date:'dd/MMM/y HH:mm'}}
                 </span>
               </ng-container>
             </td>
           </ng-container>
-          <ng-container matColumnDef="groupType">
+          <ng-container matColumnDef="group_type">
             <td mat-cell *matCellDef="let payment">
               <span fxLayoutAlign="start center" class="mpp-row-span">{{ payment?.bolt12 ? 'Bolt12' : payment?.bolt11 ? 'Bolt11' : 'Keysend' }}</span>
               <span *ngIf="payment.is_expanded"><span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="mpp-row-span">{{ payment?.bolt12 ? 'Bolt12' : payment?.bolt11 ? 'Bolt11' : 'Keysend' }}</span></span>
             </td>
           </ng-container>
-          <ng-container matColumnDef="groupHash">
+          <ng-container matColumnDef="group_payment_hash">
             <td mat-cell *matCellDef="let payment">
               <span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
                 <span class="ellipsis-child">{{payment?.payment_hash}}</span>
@@ -154,8 +158,56 @@
               </span>
             </td>
           </ng-container>
-          <ng-container matColumnDef="groupAmtSent">
+          <ng-container matColumnDef="group_bolt11">
+            <td mat-cell *matCellDef="let payment">
+              <span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
+                <span class="ellipsis-child">{{payment?.bolt11}}</span>
+              </span>
+              <span *ngIf="payment.is_expanded">
+                <span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
+                  <span class="ellipsis-child">{{mpp?.bolt11}}</span>
+                </span>
+              </span>
+            </td>
+          </ng-container>
+          <ng-container matColumnDef="group_label">
+            <td mat-cell *matCellDef="let payment">
+              <span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
+                <span class="ellipsis-child">{{payment?.label}}</span>
+              </span>
+              <span *ngIf="payment.is_expanded">
+                <span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
+                  <span class="ellipsis-child">{{mpp?.label}}</span>
+                </span>
+              </span>
+            </td>
+          </ng-container>
+          <ng-container matColumnDef="group_destination">
+            <td mat-cell *matCellDef="let payment">
+              <span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
+                <span class="ellipsis-child">{{payment?.destination}}</span>
+              </span>
+              <span *ngIf="payment.is_expanded">
+                <span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
+                  <span class="ellipsis-child">{{mpp?.destination}}</span>
+                </span>
+              </span>
+            </td>
+          </ng-container>
+          <ng-container matColumnDef="group_memo">
             <td mat-cell *matCellDef="let payment">
+              <span fxLayout="row" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
+                <span class="ellipsis-child">{{payment?.memo}}</span>
+              </span>
+              <span *ngIf="payment.is_expanded">
+                <span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="start center" class="ellipsis-parent mpp-row-span" [ngStyle]="{'max-width': (screenSize === screenSizeEnum.XS) ? '10rem' : '30rem'}">
+                  <span class="ellipsis-child">{{mpp?.memo}}</span>
+                </span>
+              </span>
+            </td>
+          </ng-container>
+          <ng-container matColumnDef="group_msatoshi_sent">
+            <td mat-cell *matCellDef="let payment" class="px-1">
               <span fxLayoutAlign="end center" class="mpp-row-span">{{payment?.msatoshi_sent/1000 | number:payment?.msatoshi_sent < 1000 ? '1.0-4' : '1.0-0'}}</span>
               <span *ngIf="payment.is_expanded">
                 <span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="end center" class="mpp-row-span">
@@ -164,8 +216,8 @@
               </span>
             </td>
           </ng-container>
-          <ng-container matColumnDef="groupAmtRecv">
-            <td mat-cell *matCellDef="let payment">
+          <ng-container matColumnDef="group_msatoshi">
+            <td mat-cell *matCellDef="let payment" class="px-1">
               <span fxLayoutAlign="end center" class="mpp-row-span">{{payment?.msatoshi/1000 | number:payment?.msatoshi < 1000 ? '1.0-4' : '1.0-0'}}</span>
               <span *ngIf="payment.is_expanded">
                 <span *ngFor="let mpp of payment?.mpps" fxLayoutAlign="end center" class="mpp-row-span">
@@ -174,8 +226,8 @@
               </span>
             </td>
           </ng-container>
-          <ng-container matColumnDef="groupAction">
-            <td mat-cell *matCellDef="let payment" class="px-3">
+          <ng-container matColumnDef="group_actions">
+            <td mat-cell *matCellDef="let payment" class="pr-3">
               <span fxLayoutAlign="end center">
                 <button mat-flat-button class="btn-mpp-expand" color="primary" type="button" tabindex="5" (click)="payment.is_expanded = !payment.is_expanded">{{payment.is_expanded ? 'Hide' : 'Show'}}</button>
               </span>
@@ -189,7 +241,7 @@
           <tr mat-row *matRowDef="let row; columns: mppColumns; when: is_group;"></tr>
           <!-- Payment Group Row End -->
           <tr mat-footer-row *matFooterRowDef="['no_payment']" [ngClass]="{'display-none': payments?.data && payments?.data?.length && payments?.data?.length>0}"></tr>
-          <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
           <tr mat-row *matRowDef="let row; columns: displayedColumns; when: !is_group;"></tr>
         </table>
       </div>

src/app/cln/transactions/payments/lightning-payments.component.scss

@@ -1,5 +1,29 @@
-.mat-column-status {
-  max-width: 0.1rem;
+@import '../../../shared/theme/styles/mixins.scss';
+
+.mat-column-status, .mat-column-group_status {
+  max-width: 0.2rem;
+  @include for_screensize(tab-port) {
+    min-width: 1rem;
+  }
+  @include for_screensize(phone) {
+    min-width: 1rem;
+  }  
+  & .dot {
+    @include for_screensize(tab-port) {
+      width:0.6rem;
+      height: 0.6rem;
+      left: 0;
+      margin-top: 0;
+      position: absolute;
+    }
+    @include for_screensize(phone) {
+      width:0.6rem;
+      height: 0.6rem;
+      left: 0;
+      margin-top: 0;
+      position: absolute;
+    }  
+  }
 }
 
 .mat-column-payment_hash, .mat-column-bolt11, .mat-column-destination, .mat-column-label, .mat-column-memo {
@@ -14,7 +38,7 @@
   min-height: 4.8rem;
 }
 
-.mat-column-groupAction {
+.mat-column-group_actions {
   min-height: 4.8rem;
 
   & .btn-mpp-expand {
@@ -31,8 +55,15 @@
   min-height: 4.2rem;
   place-content: center flex-start;
   align-items: center;
+  &.ellipsis-parent {
+    display: flex;
+  }
+  & .dot {
+    margin-top: -0.4rem;
+    position: absolute;
+  }
 }
 
-.mat-column-groupTotal {
+.mat-column-group_created_at {
   min-width: 17rem;
 }

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

@@ -6,10 +6,10 @@ import { Store } from '@ngrx/store';
 import { faHistory } from '@fortawesome/free-solid-svg-icons';
 
 import { MatPaginator, MatPaginatorIntl } from '@angular/material/paginator';
-import { MatSort } from '@angular/material/sort';
+import { MatSort, Sort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { GetInfo, Payment, PayRequest } from '../../../shared/models/clnModels';
-import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, CurrencyUnitEnum, CURRENCY_UNIT_FORMATS, APICallStatusEnum, UI_MESSAGES, PaymentTypes, CLN_TABLES_DEF, CLN_DEFAULT_PAGE_SETTINGS } from '../../../shared/services/consts-enums-functions';
+import { PAGE_SIZE, PAGE_SIZE_OPTIONS, getPaginatorLabel, AlertTypeEnum, DataTypeEnum, ScreenSizeEnum, CurrencyUnitEnum, CURRENCY_UNIT_FORMATS, APICallStatusEnum, UI_MESSAGES, PaymentTypes, CLN_TABLES_DEF, CLN_DEFAULT_PAGE_SETTINGS, SORT_ORDERS, SortOrderEnum } from '../../../shared/services/consts-enums-functions';
 import { ApiCallStatusPayload } from '../../../shared/models/apiCallsPayload';
 import { DataService } from '../../../shared/services/data.service';
 import { LoggerService } from '../../../shared/services/logger.service';
@@ -53,9 +53,10 @@ export class CLNLightningPaymentsComponent implements OnInit, AfterViewInit, OnD
   public paymentDecoded: PayRequest = {};
   public paymentRequest = '';
   public paymentDecodedHint = '';
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
+  public sortBy = 'created_at';
+  public sortOrder = SortOrderEnum.DESCENDING;
   public screenSize = '';
   public screenSizeEnum = ScreenSizeEnum;
   public errorMessage = '';
@@ -67,23 +68,6 @@ export class CLNLightningPaymentsComponent implements OnInit, AfterViewInit, OnD
 
   constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>, private rtlEffects: RTLEffects, private clnEffects: CLNEffects, private decimalPipe: DecimalPipe, private titleCasePipe: TitleCasePipe, private datePipe: DatePipe, private dataService: DataService) {
     this.screenSize = this.commonService.getScreenSize();
-    if (this.screenSize === ScreenSizeEnum.XS) {
-      this.flgSticky = false;
-      // this.displayedColumns = ['created_at', 'actions'];
-      this.mppColumns = ['groupTotal', 'groupAction'];
-    } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
-      // this.displayedColumns = ['created_at', 'msatoshi', 'actions'];
-      this.mppColumns = ['groupTotal', 'groupAmtRecv', 'groupAction'];
-    } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
-      // this.displayedColumns = ['created_at', 'type', 'msatoshi_sent', 'msatoshi', 'actions'];
-      this.mppColumns = ['groupTotal', 'groupType', 'groupAmtSent', 'groupAmtRecv', 'groupAction'];
-    } else {
-      this.flgSticky = true;
-      // this.displayedColumns = ['created_at', 'type', 'payment_hash', 'msatoshi_sent', 'msatoshi', 'actions'];
-      this.mppColumns = ['groupTotal', 'groupType', 'groupHash', 'groupAmtSent', 'groupAmtRecv', 'groupAction'];
-    }
   }
 
   ngOnInit() {
@@ -101,10 +85,22 @@ export class CLNLightningPaymentsComponent implements OnInit, AfterViewInit, OnD
           this.errorMessage = this.apiCallStatus.message || '';
         }
         this.pageSettings = settings.pageSettings;
-        this.displayedColumns = JSON.parse(JSON.stringify(this.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.TABLE_ID)?.showColumns || CLN_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.TABLE_ID)?.showColumns));
+        let tableSettings: any = {};
+        tableSettings = this.pageSettings.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.TABLE_ID) || CLN_DEFAULT_PAGE_SETTINGS.find((page) => page.pageId === this.PAGE_ID)?.tables.find((table) => table.tableId === this.TABLE_ID);
+        if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
+          this.displayedColumns = JSON.parse(JSON.stringify(tableSettings.showColumnsSM));
+        } else {
+          this.displayedColumns = JSON.parse(JSON.stringify(tableSettings.showColumns));
+        }
         this.displayedColumns.unshift('status');
         this.displayedColumns.push('actions');
+        this.mppColumns = [];
+        this.displayedColumns.map((col) => this.mppColumns.push('group_' + col));
+        this.pageSize = tableSettings.recordsPerPage;
+        this.sortBy = tableSettings.sortBy;
+        this.sortOrder = tableSettings.sortOrder;
         this.logger.info(this.displayedColumns);
+        this.logger.info(this.mppColumns);
       });
     this.store.select(payments).pipe(takeUntil(this.unSubs[3])).
       subscribe((paymentsSeletor: { payments: Payment[], apiCallStatus: ApiCallStatusPayload }) => {

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

@@ -51,7 +51,7 @@
                     <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onHopClick(hop)">View Info</button>
                   </td>
                 </ng-container>
-                <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+                <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                 <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
               </table>
             </div>          

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

@@ -26,7 +26,6 @@ export class ECLQueryRoutesComponent implements OnInit, OnDestroy {
   public nodeId = '';
   public amount = 0;
   public qrHops: Array<any> = [];
-  public flgSticky = false;
   public displayedColumns: any;
   public flgLoading: Array<Boolean | 'error'> = [false]; // 0: peers
   public faRoute = faRoute;
@@ -38,16 +37,12 @@ export class ECLQueryRoutesComponent implements OnInit, OnDestroy {
   constructor(private store: Store<RTLState>, private eclEffects: ECLEffects, private commonService: CommonService) {
     this.screenSize = this.commonService.getScreenSize();
     if (this.screenSize === ScreenSizeEnum.XS) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'nodeId', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'nodeId', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['alias', 'nodeId', 'actions'];
     }
   }

src/app/eclair/on-chain/on-chain-transaction-history/on-chain-transaction-history.component.html

@@ -58,7 +58,7 @@
           </td>
         </ng-container>
         <tr mat-footer-row *matFooterRowDef="['no_transaction']" [ngClass]="{'display-none': listTransactions?.data && listTransactions?.data?.length>0}"></tr>
-        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
       </table>
       <mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>

src/app/eclair/on-chain/on-chain-transaction-history/on-chain-transaction-history.component.ts

@@ -34,7 +34,6 @@ export class ECLOnChainTransactionHistoryComponent implements OnInit, OnDestroy
   faHistory = faHistory;
   public displayedColumns: any[] = [];
   public listTransactions: any;
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -48,16 +47,12 @@ export class ECLOnChainTransactionHistoryComponent implements OnInit, OnDestroy
   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.flgSticky = false;
       this.displayedColumns = ['timestamp', 'amount', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['timestamp', 'amount', 'confirmations', 'fees', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['timestamp', 'amount', 'fees', 'confirmations', 'address', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['timestamp', 'amount', 'fees', 'confirmations', 'address', 'actions'];
     }
   }

src/app/eclair/peers-channels/channels/channels-tables/channel-inactive-table/channel-inactive-table.component.html

@@ -76,7 +76,7 @@
         </td>
       </ng-container>
       <tr mat-footer-row *matFooterRowDef="['no_channel']" [ngClass]="{'display-none': channels?.data && channels?.data?.length>0}"></tr>
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </div>

src/app/eclair/peers-channels/channels/channels-tables/channel-inactive-table/channel-inactive-table.component.ts

@@ -43,7 +43,6 @@ export class ECLChannelInactiveTableComponent implements OnInit, AfterViewInit,
   public numPeers = -1;
   public feeRateTypes = FEE_RATE_TYPES;
   public selFilter = '';
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -56,16 +55,12 @@ export class ECLChannelInactiveTableComponent implements OnInit, AfterViewInit,
   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.flgSticky = false;
       this.displayedColumns = ['state', 'alias', 'toLocal', 'toRemote', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['state', 'alias', 'toLocal', 'toRemote', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['state', 'shortChannelId', 'alias', 'toLocal', 'toRemote', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['state', 'shortChannelId', 'alias', 'toLocal', 'toRemote', 'balancedness', 'actions'];
     }
   }

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

@@ -86,7 +86,7 @@
         </td>
       </ng-container>
       <tr mat-footer-row *matFooterRowDef="['no_peer']" [ngClass]="{'display-none': numPeers>0 && channels?.data && channels?.data?.length>0}"></tr>
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </div>

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

@@ -44,7 +44,6 @@ export class ECLChannelOpenTableComponent implements OnInit, AfterViewInit, OnDe
   public numPeers = -1;
   public feeRateTypes = FEE_RATE_TYPES;
   public selFilter = '';
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -57,16 +56,12 @@ export class ECLChannelOpenTableComponent implements OnInit, AfterViewInit, OnDe
   constructor(private logger: LoggerService, private store: Store<RTLState>, private rtlEffects: RTLEffects, private commonService: CommonService, private router: Router) {
     this.screenSize = this.commonService.getScreenSize();
     if (this.screenSize === ScreenSizeEnum.XS) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'toLocal', 'toRemote', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['shortChannelId', 'alias', 'toLocal', 'toRemote', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['shortChannelId', 'alias', 'feeBaseMsat', 'feeProportionalMillionths', 'toLocal', 'toRemote', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['shortChannelId', 'alias', 'feeBaseMsat', 'feeProportionalMillionths', 'toLocal', 'toRemote', 'balancedness', 'actions'];
     }
     this.selFilter = this.router.getCurrentNavigation()?.extras?.state?.filter ? this.router.getCurrentNavigation()?.extras?.state?.filter : '';

src/app/eclair/peers-channels/channels/channels-tables/channel-pending-table/channel-pending-table.component.html

@@ -47,7 +47,7 @@
         </td>
       </ng-container>
       <tr mat-footer-row *matFooterRowDef="['no_channel']" [ngClass]="{'display-none': channels?.data && channels?.data?.length>0}"></tr>
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </div>

src/app/eclair/peers-channels/channels/channels-tables/channel-pending-table/channel-pending-table.component.ts

@@ -40,7 +40,6 @@ export class ECLChannelPendingTableComponent implements OnInit, AfterViewInit, O
   public numPeers = -1;
   public feeRateTypes = FEE_RATE_TYPES;
   public selFilter = '';
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -53,16 +52,12 @@ export class ECLChannelPendingTableComponent implements OnInit, AfterViewInit, O
   constructor(private logger: LoggerService, private store: Store<RTLState>, private commonService: CommonService) {
     this.screenSize = this.commonService.getScreenSize();
     if (this.screenSize === ScreenSizeEnum.XS) {
-      this.flgSticky = false;
       this.displayedColumns = ['state', 'alias', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['state', 'alias', 'toLocal', 'toRemote', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['state', 'alias', 'toLocal', 'toRemote', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['state', 'alias', 'toLocal', 'toRemote', 'actions'];
     }
   }

src/app/eclair/peers-channels/peers/peers.component.html

@@ -74,7 +74,7 @@
           </td>
         </ng-container>
         <tr mat-footer-row *matFooterRowDef="['no_peer']" [ngClass]="{'display-none': peers?.data && peers?.data?.length>0}"></tr>
-        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
       </table>
     </div>

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

@@ -43,7 +43,6 @@ export class ECLPeersComponent implements OnInit, AfterViewInit, OnDestroy {
   public peers: any;
   public information: GetInfo = {};
   public availableBalance = 0;
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -57,16 +56,12 @@ export class ECLPeersComponent implements OnInit, AfterViewInit, OnDestroy {
   constructor(private logger: LoggerService, private store: Store<RTLState>, private rtlEffects: RTLEffects, private actions: Actions, private commonService: CommonService) {
     this.screenSize = this.commonService.getScreenSize();
     if (this.screenSize === ScreenSizeEnum.XS) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'nodeId', 'address', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'nodeId', 'address', 'channels', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['alias', 'nodeId', 'address', 'channels', 'actions'];
     }
   }

src/app/eclair/routing/forwarding-history/forwarding-history.component.html

@@ -57,7 +57,7 @@
         </td>
       </ng-container>
       <tr mat-footer-row *matFooterRowDef="['no_event']" [ngClass]="{'display-none': forwardingHistoryEvents?.data && forwardingHistoryEvents?.data?.length>0}"></tr>
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </div>

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

@@ -33,7 +33,6 @@ export class ECLForwardingHistoryComponent implements OnInit, OnChanges, AfterVi
   @Input() filterValue = '';
   public displayedColumns: any[] = [];
   public forwardingHistoryEvents: any;
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -46,16 +45,12 @@ export class ECLForwardingHistoryComponent implements OnInit, OnChanges, AfterVi
   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.flgSticky = false;
       this.displayedColumns = ['timestamp', 'amountIn', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['timestamp', 'amountIn', 'fee', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['timestamp', 'amountIn', 'amountOut', 'fee', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['timestamp', 'fromChannelAlias', 'toChannelAlias', 'amountIn', 'amountOut', 'fee', 'actions'];
     }
   }

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

@@ -40,7 +40,7 @@
             </td>
           </ng-container>
           <tr mat-footer-row *matFooterRowDef="['no_incoming_event']" [ngClass]="{'display-none': RoutingPeersIncoming?.data && RoutingPeersIncoming?.data?.length>0}"></tr>
-          <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
           <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
       </div>
@@ -85,7 +85,7 @@
             </td>
           </ng-container>
           <tr mat-footer-row *matFooterRowDef="['no_outgoing_event']" [ngClass]="{'display-none': RoutingPeersOutgoing?.data && RoutingPeersOutgoing?.data?.length>0}"></tr>
-          <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
           <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
         <mat-paginator #paginatorOut [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>

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

@@ -33,7 +33,6 @@ export class ECLRoutingPeersComponent implements OnInit, AfterViewInit, OnDestro
   public displayedColumns: any[] = [];
   public RoutingPeersIncoming: any;
   public RoutingPeersOutgoing: any;
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -48,16 +47,12 @@ export class ECLRoutingPeersComponent implements OnInit, AfterViewInit, OnDestro
   constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>) {
     this.screenSize = this.commonService.getScreenSize();
     if (this.screenSize === ScreenSizeEnum.XS) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'totalFee'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'events', 'totalFee'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'events', 'totalAmount', 'totalFee'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['channelId', 'alias', 'events', 'totalAmount', 'totalFee'];
     }
   }

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

@@ -90,7 +90,7 @@
           </td>
         </ng-container>
         <tr mat-footer-row *matFooterRowDef="['no_invoice']" [ngClass]="{'display-none': invoices?.data && invoices?.data?.length>0}"></tr>
-        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
       </table>
     </div>

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

@@ -50,7 +50,6 @@ export class ECLLightningInvoicesComponent implements OnInit, AfterViewInit, OnD
   public invoices: any;
   public invoiceJSONArr: Invoice[] = [];
   public information: GetInfo = {};
-  public flgSticky = false;
   public selFilter = '';
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
@@ -64,16 +63,12 @@ export class ECLLightningInvoicesComponent implements OnInit, AfterViewInit, OnD
   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.flgSticky = false;
       this.displayedColumns = ['timestamp', 'amount', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['timestamp', 'amount', 'amountSettled', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['timestamp', 'amount', 'amountSettled', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['timestamp', 'receivedAt', 'description', 'amount', 'amountSettled', 'actions'];
     }
   }

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

@@ -123,7 +123,7 @@
             </span>
           </td>
         </ng-container>
-        <ng-container matColumnDef="groupAction">
+        <ng-container matColumnDef="groupActions">
           <td mat-cell *matCellDef="let payment" class="px-3">
             <span fxLayoutAlign="end start">
               <button mat-flat-button class="btn-part-expand" color="primary" type="button" tabindex="5" (click)="payment.is_expanded = !payment.is_expanded">{{payment.is_expanded ? 'Hide' : 'Show'}}</button>
@@ -139,7 +139,7 @@
         <!-- Payment Group Row End -->
 
           <tr mat-footer-row *matFooterRowDef="['no_payment']" [ngClass]="{'display-none': payments?.data && payments?.data?.length>0}"></tr>
-          <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
           <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
       </div>

src/app/eclair/transactions/payments/lightning-payments.component.scss

@@ -12,7 +12,7 @@
   min-height: 4.8rem;
 }
 
-.mat-column-groupAction {
+.mat-column-groupActions {
   min-height: 4.8rem;
 
   & .btn-part-expand {

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

@@ -50,7 +50,6 @@ export class ECLLightningPaymentsComponent implements OnInit, AfterViewInit, OnD
   public partColumns: string[] = [];
   public paymentRequest = '';
   public paymentDecodedHint = '';
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -64,21 +63,17 @@ export class ECLLightningPaymentsComponent implements OnInit, AfterViewInit, OnD
   constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>, private rtlEffects: RTLEffects, private decimalPipe: DecimalPipe, private dataService: DataService, private datePipe: DatePipe) {
     this.screenSize = this.commonService.getScreenSize();
     if (this.screenSize === ScreenSizeEnum.XS) {
-      this.flgSticky = false;
       this.displayedColumns = ['firstPartTimestamp', 'actions'];
-      this.partColumns = ['groupTotal', 'groupAction'];
+      this.partColumns = ['groupTotal', 'groupActions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['firstPartTimestamp', 'recipientAmount', 'actions'];
-      this.partColumns = ['groupTotal', 'groupAmount', 'groupAction'];
+      this.partColumns = ['groupTotal', 'groupAmount', 'groupActions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['firstPartTimestamp', 'id', 'recipientAmount', 'actions'];
-      this.partColumns = ['groupTotal', 'groupId', 'groupAmount', 'groupAction'];
+      this.partColumns = ['groupTotal', 'groupId', 'groupAmount', 'groupActions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['firstPartTimestamp', 'id', 'recipientNodeAlias', 'recipientAmount', 'actions'];
-      this.partColumns = ['groupTotal', 'groupId', 'groupChannelAlias', 'groupAmount', 'groupAction'];
+      this.partColumns = ['groupTotal', 'groupId', 'groupChannelAlias', 'groupAmount', 'groupActions'];
     }
   }
 

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

@@ -52,7 +52,7 @@
         </td>
       </ng-container>
       <tr mat-footer-row *matFooterRowDef="['no_channel']" [ngClass]="{'display-none': channels?.data && channels?.data?.length>0}"></tr>
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </div>

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

@@ -43,7 +43,6 @@ export class ChannelBackupTableComponent implements OnInit, AfterViewInit, OnDes
   public selectedChannel: Channel | null;
   public channelsData: Channel[] = [];
   public channels: any;
-  public flgSticky = false;
   public screenSize = '';
   public screenSizeEnum = ScreenSizeEnum;
   public errorMessage = '';

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

@@ -39,7 +39,7 @@
         </td>
       </ng-container>
       <tr mat-footer-row *matFooterRowDef="['no_channel']" [ngClass]="{'display-none': channels && channels.data && channels?.data?.length>0}"></tr>
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </div>

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

@@ -38,7 +38,6 @@ export class ChannelRestoreTableComponent implements OnInit, AfterViewInit, OnDe
   public channels: any;
   public allRestoreExists = false;
   public flgLoading: Array<Boolean | 'error'> = [true]; // 0: channels
-  public flgSticky = false;
   public selFilter = '';
   public screenSize = '';
   public screenSizeEnum = ScreenSizeEnum;

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

@@ -58,7 +58,7 @@
           <button mat-stroked-button color="primary" type="button" tabindex="4" (click)="onHopClick(hop, $event)">View Info</button>          
         </td>
       </ng-container>
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </div>

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

@@ -26,7 +26,6 @@ export class QueryRoutesComponent implements OnInit, OnDestroy {
   public destinationPubkey = '';
   public amount = null;
   public qrHops: any;
-  public flgSticky = false;
   public displayedColumns: any[] = [];
   public flgLoading: Array<Boolean | 'error'> = [false]; // 0: peers
   public faRoute = faRoute;
@@ -38,16 +37,12 @@ export class QueryRoutesComponent implements OnInit, OnDestroy {
   constructor(private store: Store<RTLState>, private lndEffects: LNDEffects, private commonService: CommonService) {
     this.screenSize = this.commonService.getScreenSize();
     if (this.screenSize === ScreenSizeEnum.XS) {
-      this.flgSticky = false;
       this.displayedColumns = ['pubkey_alias', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['hop_sequence', 'pubkey_alias', 'fee_msat', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['hop_sequence', 'pubkey_alias', 'chan_capacity', 'amt_to_forward_msat', 'fee_msat', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['hop_sequence', 'pubkey_alias', 'chan_capacity', 'amt_to_forward_msat', 'fee_msat', 'actions'];
     }
   }

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

@@ -57,7 +57,7 @@
           </td>
         </ng-container>
         <tr mat-footer-row *matFooterRowDef="['no_transaction']" [ngClass]="{'display-none': listTransactions?.data && listTransactions?.data?.length>0}"></tr>
-        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
       </table>
       <mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>

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

@@ -34,7 +34,6 @@ export class OnChainTransactionHistoryComponent implements OnInit, OnChanges, On
   faHistory = faHistory;
   public displayedColumns: any[] = [];
   public listTransactions: any;
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -48,16 +47,12 @@ 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.flgSticky = false;
       this.displayedColumns = ['time_stamp', 'amount', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['time_stamp', 'amount', 'num_confirmations', 'total_fees', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['time_stamp', 'label', 'amount', 'total_fees', 'num_confirmations', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['time_stamp', 'label', 'amount', 'total_fees', 'block_height', 'num_confirmations', 'actions'];
     }
   }

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

@@ -70,7 +70,7 @@
           </td>
         </ng-container>
         <tr mat-footer-row *matFooterRowDef="['no_utxo']" [ngClass]="{'display-none': listUTXOs?.data && listUTXOs?.data?.length>0}"></tr>
-        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
       </table>
       <mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>

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

@@ -40,7 +40,6 @@ export class OnChainUTXOsComponent implements OnInit, OnChanges, OnDestroy {
   faMoneyBillWave = faMoneyBillWave;
   public displayedColumns: any[] = [];
   public listUTXOs: any;
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -54,16 +53,12 @@ export class OnChainUTXOsComponent implements OnInit, OnChanges, OnDestroy {
   constructor(private logger: LoggerService, private commonService: CommonService, private dataService: DataService, private store: Store<RTLState>, private rtlEffects: RTLEffects, private decimalPipe: DecimalPipe) {
     this.screenSize = this.commonService.getScreenSize();
     if (this.screenSize === ScreenSizeEnum.XS) {
-      this.flgSticky = false;
       this.displayedColumns = ['amount_sat', 'confirmations', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['tx_id', 'output', 'amount_sat', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['tx_id', 'output', 'label', 'amount_sat', 'confirmations', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['tx_id', 'output', 'label', 'amount_sat', 'confirmations', 'actions'];
     }
   }

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

@@ -88,7 +88,7 @@
       </ng-container>
       <!-- channel Group Row End -->
       <tr mat-footer-row *matFooterRowDef="['no_channel']" [ngClass]="{'display-none': channels?.data && channels?.data?.length>0}"></tr>
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </div>

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

@@ -33,7 +33,6 @@ export class ChannelActiveHTLCsTableComponent implements OnInit, AfterViewInit,
   public channelsJSONArr: Channel[] = [];
   public displayedColumns: any[] = [];
   public htlcColumns = [];
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -47,16 +46,12 @@ 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.flgSticky = false;
       this.displayedColumns = ['amount', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['amount', 'incoming', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['amount', 'incoming', 'expiration_height', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['amount', 'incoming', 'expiration_height', 'hash_lock', 'actions'];
     }
   }

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

@@ -59,7 +59,7 @@
         </td>
       </ng-container>
       <tr mat-footer-row *matFooterRowDef="['no_closed_channel']" [ngClass]="{'display-none': closedChannels?.data && closedChannels?.data?.length>0}"></tr>
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </div>

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

@@ -34,7 +34,6 @@ export class ChannelClosedTableComponent implements OnInit, AfterViewInit, OnDes
   public displayedColumns: any[] = [];
   public closedChannelsData: ClosedChannel[] = [];
   public closedChannels: any;
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -48,13 +47,10 @@ 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.flgSticky = false;
       this.displayedColumns = ['remote_alias', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM || this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['close_type', 'remote_alias', 'settled_balance', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['close_type', 'remote_alias', 'capacity', 'close_height', 'settled_balance', 'actions'];
     }
   }

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

@@ -82,7 +82,7 @@
         </td>
       </ng-container>
       <tr mat-footer-row *matFooterRowDef="['no_channel']" [ngClass]="{'display-none': channels?.data && channels?.data?.length>0}"></tr>
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </div>

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

@@ -51,7 +51,6 @@ export class ChannelOpenTableComponent implements OnInit, AfterViewInit, OnDestr
   public information: GetInfo = {};
   public numPeers = -1;
   public selFilter = '';
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -68,16 +67,12 @@ 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.flgSticky = false;
       this.displayedColumns = ['remote_alias', 'local_balance', 'remote_balance', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['remote_alias', 'local_balance', 'remote_balance', 'balancedness', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['remote_alias', 'local_balance', 'remote_balance', 'balancedness', 'actions'];
     } else {
-      this.flgSticky = true;
       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 : '';

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

@@ -66,7 +66,7 @@
             </td>
           </ng-container>
           <tr mat-footer-row *matFooterRowDef="['no_peer']" [ngClass]="{'display-none': peers?.data && peers?.data?.length>0}"></tr>
-          <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
           <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
       </table>
     </div>

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

@@ -39,7 +39,6 @@ export class PeersComponent implements OnInit, AfterViewInit, OnDestroy {
   public peersData: Peer[] = [];
   public peers: any;
   public information: GetInfo = {};
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -53,16 +52,12 @@ export class PeersComponent implements OnInit, AfterViewInit, OnDestroy {
   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.flgSticky = false;
       this.displayedColumns = ['alias', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'sat_sent', 'sat_recv', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['alias', 'sat_sent', 'sat_recv', 'ping_time', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['alias', 'pub_key', 'sat_sent', 'sat_recv', 'ping_time', 'actions'];
     }
   }

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

@@ -54,7 +54,7 @@
         </td>
       </ng-container>
       <tr mat-footer-row *matFooterRowDef="['no_event']" [ngClass]="{'display-none': forwardingHistoryEvents?.data && forwardingHistoryEvents?.data?.length>0}"></tr>
-      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>
   </div>

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

@@ -34,7 +34,6 @@ export class ForwardingHistoryComponent implements OnInit, AfterViewInit, OnChan
   public forwardingHistoryData: ForwardingEvent[] = [];
   public displayedColumns: any[] = [];
   public forwardingHistoryEvents: any;
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -47,13 +46,10 @@ 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.flgSticky = false;
       this.displayedColumns = ['timestamp', 'fee_msat', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM || this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['timestamp', 'amt_in', 'amt_out', 'fee_msat', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['timestamp', 'alias_in', 'alias_out', 'amt_in', 'amt_out', 'fee_msat', 'actions'];
     }
   }

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

@@ -50,7 +50,7 @@
           </td>
         </ng-container>
         <tr mat-footer-row *matFooterRowDef="['no_non_routing_event']" [ngClass]="{'display-none': NonRoutingPeers?.data?.length>0}"></tr>
-        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
       </table>
     </div>

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

@@ -30,7 +30,6 @@ export class NonRoutingPeersComponent implements OnInit, AfterViewInit, OnDestro
   public routingPeersData: any[] = [];
   public displayedColumns: any[] = [];
   public NonRoutingPeers: any = new MatTableDataSource<any>([]);
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -45,16 +44,12 @@ export class NonRoutingPeersComponent implements OnInit, AfterViewInit, OnDestro
   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.flgSticky = false;
       this.displayedColumns = ['remote_alias', 'local_balance', 'remote_balance', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['remote_alias', 'local_balance', 'remote_balance', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['chan_id', 'remote_alias', 'local_balance', 'remote_balance', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['chan_id', 'remote_alias', 'total_satoshis_received', 'total_satoshis_sent', 'local_balance', 'remote_balance', 'actions'];
     }
   }

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

@@ -42,7 +42,7 @@
             </td>
           </ng-container>
           <tr mat-footer-row *matFooterRowDef="['no_incoming_event']" [ngClass]="{'display-none': RoutingPeersIncoming?.data?.length>0}"></tr>
-          <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
           <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
       </div>
@@ -89,7 +89,7 @@
             </td>
           </ng-container>
           <tr mat-footer-row *matFooterRowDef="['no_outgoing_event']" [ngClass]="{'display-none': RoutingPeersOutgoing?.data?.length>0}"></tr>
-          <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
           <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
       </div>

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

@@ -33,7 +33,6 @@ export class RoutingPeersComponent implements OnInit, AfterViewInit, OnDestroy {
   public displayedColumns: any[] = [];
   public RoutingPeersIncoming = new MatTableDataSource<RoutingPeers>([]);
   public RoutingPeersOutgoing = new MatTableDataSource<RoutingPeers>([]);
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -48,16 +47,12 @@ 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.flgSticky = false;
       this.displayedColumns = ['chan_id', 'events', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['chan_id', 'alias', 'events', 'total_amount'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['chan_id', 'alias', 'events', 'total_amount'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['chan_id', 'alias', 'events', 'total_amount'];
     }
   }

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

@@ -85,7 +85,7 @@
           </td>
         </ng-container>
         <tr mat-footer-row *matFooterRowDef="['no_invoice']" [ngClass]="{'display-none': invoices?.data && invoices?.data?.length>0}"></tr>
-        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
       </table>
       <mat-paginator [length]="totalInvoices" (page)="onPageChange($event)" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>

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

@@ -50,7 +50,6 @@ export class LightningInvoicesComponent implements OnInit, AfterViewInit, OnDest
   public invoicesData: Invoice[] = [];
   public invoices: any;
   public information: GetInfo = {};
-  public flgSticky = false;
   public selFilter = '';
   public private = false;
   public expiryStep = 100;
@@ -69,16 +68,12 @@ export class LightningInvoicesComponent implements OnInit, AfterViewInit, OnDest
   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.flgSticky = false;
       this.displayedColumns = ['creation_date', 'value', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['creation_date', 'settle_date', 'value', 'amt_paid_sat', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['creation_date', 'settle_date', 'memo', 'value', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['creation_date', 'settle_date', 'memo', 'value', 'amt_paid_sat', 'actions'];
     }
   }

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

@@ -134,7 +134,7 @@
               </span>
             </td>
           </ng-container>
-          <ng-container matColumnDef="groupAction">
+          <ng-container matColumnDef="groupActions">
             <td mat-cell *matCellDef="let payment" class="px-2">
               <span fxLayoutAlign="end center">
                 <button mat-flat-button class="btn-htlc-expand" color="primary" type="button" tabindex="5" (click)="payment.is_expanded = !payment?.is_expanded">{{payment?.is_expanded ? 'Hide' : 'Show'}}</button>
@@ -149,7 +149,7 @@
           <tr mat-row *matRowDef="let row; columns: htlcColumns; when: is_group;"></tr>
           <!-- Payment Group Row End -->
           <tr mat-footer-row *matFooterRowDef="['no_payment']" [ngClass]="{'display-none': payments?.data && payments?.data?.length>0}"></tr>
-          <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
           <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
         <mat-paginator [length]="totalPayments" (page)="onPageChange($event)" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>

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

@@ -10,7 +10,7 @@
   }
 }
 
-.mat-column-groupAction {
+.mat-column-groupActions {
   min-height: 4.8rem;
 
   & .btn-htlc-expand {

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

@@ -52,7 +52,6 @@ export class LightningPaymentsComponent implements OnInit, AfterViewInit, OnDest
   public paymentDecoded: PayRequest = {};
   public paymentRequest = '';
   public paymentDecodedHint = '';
-  public flgSticky = false;
   private firstOffset = -1;
   private lastOffset = -1;
   public selFilter = '';
@@ -68,21 +67,17 @@ 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.flgSticky = false;
       this.displayedColumns = ['creation_date', 'fee', 'actions'];
-      this.htlcColumns = ['groupTotal', 'groupFee', 'groupAction'];
+      this.htlcColumns = ['groupTotal', 'groupFee', 'groupActions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['creation_date', 'fee', 'value', 'hops', 'actions'];
-      this.htlcColumns = ['groupTotal', 'groupFee', 'groupValue', 'groupHops', 'groupAction'];
+      this.htlcColumns = ['groupTotal', 'groupFee', 'groupValue', 'groupHops', 'groupActions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['creation_date', 'fee', 'value', 'hops', 'actions'];
-      this.htlcColumns = ['groupTotal', 'groupFee', 'groupValue', 'groupHops', 'groupAction'];
+      this.htlcColumns = ['groupTotal', 'groupFee', 'groupValue', 'groupHops', 'groupActions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['creation_date', 'payment_hash', 'fee', 'value', 'hops', 'actions'];
-      this.htlcColumns = ['groupTotal', 'groupHash', 'groupFee', 'groupValue', 'groupHops', 'groupAction'];
+      this.htlcColumns = ['groupTotal', 'groupHash', 'groupFee', 'groupValue', 'groupHops', 'groupActions'];
     }
   }
 

src/app/shared/components/ln-services/boltz/swaps/swaps.component.html

@@ -72,7 +72,7 @@
           </td>
         </ng-container>
         <tr mat-footer-row *matFooterRowDef="['no_swap']" [ngClass]="{'display-none': listSwaps?.data && listSwaps?.data?.length>0}"></tr>
-        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
       </table>
       <mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>

src/app/shared/components/ln-services/boltz/swaps/swaps.component.ts

@@ -38,7 +38,6 @@ export class BoltzSwapsComponent implements AfterViewInit, OnChanges, OnDestroy
   public displayedColumns: any[] = [];
   public listSwaps: any;
   public selFilter = '';
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -66,20 +65,16 @@ export class BoltzSwapsComponent implements AfterViewInit, OnChanges, OnDestroy
 
   setTableColumns() {
     if (this.screenSize === ScreenSizeEnum.XS) {
-      this.flgSticky = false;
       this.displayedColumns = (this.selectedSwapType === SwapTypeEnum.SWAP_IN) ?
         ['status', 'id', 'expectedAmount', 'actions'] : ['status', 'id', 'onchainAmount', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = (this.selectedSwapType === SwapTypeEnum.SWAP_IN) ?
         ['status', 'id', 'expectedAmount', 'actions'] : ['status', 'id', 'onchainAmount', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = (this.selectedSwapType === SwapTypeEnum.SWAP_IN) ?
         ['status', 'id', 'expectedAmount', 'timeoutBlockHeight', 'actions'] :
         ['status', 'id', 'onchainAmount', 'timeoutBlockHeight', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = (this.selectedSwapType === SwapTypeEnum.SWAP_IN) ?
         ['status', 'id', 'lockupAddress', 'expectedAmount', 'timeoutBlockHeight', 'actions'] :
         ['status', 'id', 'claimAddress', 'onchainAmount', 'timeoutBlockHeight', 'actions'];

src/app/shared/components/ln-services/loop/swaps/swaps.component.html

@@ -75,7 +75,7 @@
           </td>
         </ng-container>
         <tr mat-footer-row *matFooterRowDef="['no_swap']" [ngClass]="{'display-none': listSwaps?.data && listSwaps?.data?.length>0}"></tr>
-        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
       </table>
       <mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>

src/app/shared/components/ln-services/loop/swaps/swaps.component.ts

@@ -39,7 +39,6 @@ export class SwapsComponent implements AfterViewInit, OnChanges, OnDestroy {
   public displayedColumns: any[] = [];
   public listSwaps: any;
   public selFilter = '';
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -49,16 +48,12 @@ export class SwapsComponent implements AfterViewInit, OnChanges, OnDestroy {
   constructor(private logger: LoggerService, private commonService: CommonService, private store: Store<RTLState>, private loopService: LoopService) {
     this.screenSize = this.commonService.getScreenSize();
     if (this.screenSize === ScreenSizeEnum.XS) {
-      this.flgSticky = false;
       this.displayedColumns = ['state', 'amt', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['state', 'amt', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['state', 'initiation_time', 'amt', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['state', 'initiation_time', 'amt', 'cost_server', 'cost_offchain', 'cost_onchain', 'actions'];
     }
   }

src/app/shared/components/node-config/page-settings/page-settings.component.html

@@ -32,8 +32,16 @@
               </mat-option>
             </mat-select>
           </mat-form-field>
-          <mat-form-field fxFlex="68">
-            <mat-select [(ngModel)]="table.showColumns" (selectionChange)="onShowColumnsChange(table)" placeholder="Show Columns" name="{{table.tableId}}-show-columns" tabindex="4" multiple required>
+          <mat-form-field fxFlex="13">
+            <mat-select [(ngModel)]="table.showColumnsSM" placeholder="Small Screen Columns" name="{{table.tableId}}-show-columns-sm" tabindex="4" multiple required>
+              <mat-option *ngFor="let field of table.showColumns" [value]="field" [disabled]="(table.showColumns.length <= 1 && table.showColumns.includes(field)) || (table.showColumns.length >= 2 && !table.showColumns.includes(field))">
+                {{field | camelcaseWithReplace:'_'}}
+              </mat-option>
+            </mat-select>
+            <mat-hint>Small screen selected columns should be between 1 and 2</mat-hint>
+          </mat-form-field>
+          <mat-form-field fxFlex="55">
+            <mat-select [(ngModel)]="table.showColumns" (selectionChange)="onShowColumnsChange(table)" placeholder="Show Columns" name="{{table.tableId}}-show-columns" tabindex="5" multiple required>
               <mat-option *ngFor="let field of tableFieldsDef[table.tableId].allowedColumns" [value]="field" [disabled]="(table.showColumns.length <= 2 && table.showColumns.includes(field)) || (table.showColumns.length >= tableFieldsDef[table.tableId].maxColumns && !table.showColumns.includes(field))">
                 {{field | camelcaseWithReplace:'_'}}
               </mat-option>
@@ -46,8 +54,8 @@
     </mat-expansion-panel>
   </form>
   <div fxLayout="row" class="mt-1">
-    <button class="mr-1" mat-stroked-button color="primary" (click)="onResetPageSettings()" tabindex="10">Reset</button>
-    <button mat-flat-button color="primary" (click)="onUpdatePageSettings()" tabindex="11">Save</button>
+    <button class="mr-1" mat-stroked-button color="primary" (click)="onResetPageSettings()" tabindex="6">Reset</button>
+    <button mat-flat-button color="primary" (click)="onUpdatePageSettings()" tabindex="7">Save</button>
   </div>
 </div>
 <ng-template #errorObjectBlock let-error="error">

src/app/shared/components/transactions-report-table/transactions-report-table.component.html

@@ -48,7 +48,7 @@
             </td>
           </ng-container>
           <tr mat-footer-row *matFooterRowDef="['no_transaction']" [ngClass]="{'display-none': transactions?.data && transactions?.data?.length>0}"></tr>
-          <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: flgSticky;"></tr>
+          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
           <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
         </table>
         <mat-paginator [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" [showFirstLastButtons]="screenSize === screenSizeEnum.XS ? false : true" class="mb-1"></mat-paginator>

src/app/shared/components/transactions-report-table/transactions-report-table.component.ts

@@ -30,7 +30,6 @@ export class TransactionsReportTableComponent implements OnInit, AfterViewInit,
   public scrollRanges = SCROLL_RANGES;
   public transactions: any;
   public displayedColumns: any[] = [];
-  public flgSticky = false;
   public pageSize = PAGE_SIZE;
   public pageSizeOptions = PAGE_SIZE_OPTIONS;
   public screenSize = '';
@@ -39,13 +38,10 @@ export class TransactionsReportTableComponent implements OnInit, AfterViewInit,
   constructor(private commonService: CommonService, private store: Store<RTLState>, private datePipe: DatePipe) {
     this.screenSize = this.commonService.getScreenSize();
     if (this.screenSize === ScreenSizeEnum.XS || this.screenSize === ScreenSizeEnum.SM) {
-      this.flgSticky = false;
       this.displayedColumns = ['date', 'amount_paid', 'amount_received', 'actions'];
     } else if (this.screenSize === ScreenSizeEnum.MD) {
-      this.flgSticky = false;
       this.displayedColumns = ['date', 'amount_paid', 'num_payments', 'amount_received', 'num_invoices', 'actions'];
     } else {
-      this.flgSticky = true;
       this.displayedColumns = ['date', 'amount_paid', 'num_payments', 'amount_received', 'num_invoices', 'actions'];
     }
   }

src/app/shared/models/pageSettings.ts

@@ -6,6 +6,7 @@ export class TableSetting {
   recordsPerPage?: number;
   sortBy?: string;
   sortOrder?: SortOrderEnum;
+  showColumnsSM?: any[];
   showColumns?: any[];
 
 }

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

@@ -676,18 +676,20 @@ export const SORT_ORDERS = ['Ascending', 'Descending'];
 
 export const CLN_DEFAULT_PAGE_SETTINGS: PageSettingsCLN[] = [
   { pageId: 'payments', tables: [{ tableId: 'payments', recordsPerPage: 10, sortBy: 'created_at', sortOrder: SortOrderEnum.DESCENDING,
+    showColumnsSM: ['created_at', 'msatoshi'],
     showColumns: ['created_at', 'type', 'payment_hash', 'msatoshi_sent', 'msatoshi'] }] },
   { pageId: 'invoices', tables: [{ tableId: 'invoices', recordsPerPage: 10, sortBy: 'expires_at', sortOrder: SortOrderEnum.DESCENDING,
+    showColumnsSM: ['expires_at', 'msatoshi'],
     showColumns: ['expires_at', 'paid_at', 'type', 'description', 'msatoshi', 'msatoshi_received'] }] }
 ];
 
 export const CLN_TABLES_DEF = {
   payments: {
-    maxColumns: 6,
-    allowedColumns: ['id', 'created_at', 'type', 'payment_hash', 'msatoshi_sent', 'msatoshi', 'bolt11', 'destination', 'memo', 'label']
+    maxColumns: 5,
+    allowedColumns: ['created_at', 'type', 'payment_hash', 'msatoshi_sent', 'msatoshi', 'bolt11', 'destination', 'memo', 'label']
   },
   invoices: {
-    maxColumns: 5,
+    maxColumns: 6,
     allowedColumns: ['expires_at', 'paid_at', 'type', 'description', 'msatoshi', 'msatoshi_received', 'label', 'payment_hash', 'status']
   }
 };

src/app/shared/theme/styles/root.scss

@@ -1538,6 +1538,12 @@ th.mat-header-cell:last-of-type, td.mat-cell:last-of-type, td.mat-footer-cell:la
   text-align: left;
 }
 
+.table-container {
+  // height: 400rem;
+  // overflow-y: auto;
+  // overflow-x: hidden;
+}
+
 .mat-expansion-panel.flat-expansion-panel {
   box-shadow: none;
   padding: 0;