working with material tables

package.json

@@ -73,6 +73,7 @@
     "@angular/forms": "16.1.4",
     "@angular/localize": "16.1.4",
     "@angular/material": "^16.1.4",
+    "@angular/material-moment-adapter": "16.1.4",
     "@angular/platform-browser": "16.1.4",
     "@angular/platform-browser-dynamic": "16.1.4",
     "@angular/router": "16.1.4",

src/main/webapp/app/table-screen/table-screen.component.html

@@ -0,0 +1,40 @@
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" matSort>
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
+    <td mat-cell *matCellDef="let item">{{ item.name }}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="id">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>Id</th>
+    <td mat-cell *matCellDef="let item">{{ item.id }}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="status">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
+    <td mat-cell *matCellDef="let item">{{ item.status }}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="lastmod">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>Last Modified</th>
+    <td mat-cell *matCellDef="let item">{{ item.lastmod }}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="memavailable">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>Available Memory</th>
+    <td mat-cell *matCellDef="let item">{{ item.memavailable }}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="hdspace">
+    <th mat-header-cell *matHeaderCellDef mat-sort-header>HD Space</th>
+    <td mat-cell *matCellDef="let item">{{ item.hdspace }}</td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+
+  <!-- Row shown when there is no matching data. 
+    <tr class="mat-row" *matNoDataRow>
+      <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
+    </tr>
+   -->
+</table>

src/main/webapp/app/table-screen/table-screen.component.ts

@@ -0,0 +1,43 @@
+import { Component, Output, EventEmitter, OnInit, ViewChild, AfterViewInit } from '@angular/core';
+import { IHostingnode } from 'app/services/i-hostinngnode';
+import { MockCtxloaderService } from 'app/services/mock-ctxloader.service';
+import { ResourcesLoaderService } from 'app/services/resources-loader.service';
+import { MatTableModule, MatTableDataSource } from '@angular/material/table';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+
+@Component({
+  standalone: true,
+  selector: 'jhi-table-screen',
+  templateUrl: './table-screen.component.html',
+  styleUrls: ['./table-screen.component.scss'],
+  providers: [MockCtxloaderService, ResourcesLoaderService],
+  imports: [MatTableModule, MatSortModule],
+})
+export class TableScreenComponent implements OnInit, AfterViewInit {
+  //TODO: questo a regime mettere sotto CONST
+  displayedColumns: string[] = ['name', 'id', 'status', 'lastmod', 'memavailable', 'hdspace'];
+  dataFromService: IHostingnode[];
+  dataSource = new MatTableDataSource();
+  //	tableDetail: IHostingnode;
+
+  // @Input() myCtx: IContextNode; //fetching event from parent
+  @Output() jsonEmitter = new EventEmitter<IHostingnode>();
+  @ViewChild(MatSort) sort: MatSort;
+
+  constructor(private myDataService: ResourcesLoaderService) {
+    //this.tableDetail = {} as IHostingnode;
+    this.dataFromService = [];
+    this.sort = new MatSort();
+  }
+
+  ngAfterViewInit(): void {
+    this.dataSource.sort = this.sort;
+  }
+
+  ngOnInit(): void {
+    this.myDataService.getHostingNodes().subscribe(res => {
+      this.dataFromService = res;
+      this.dataSource.data = res;
+    });
+  }
+}