working with material tables
This commit is contained in:
parent
218b1fe9c1
commit
2a8d28acfa
|
@ -73,6 +73,7 @@
|
||||||
"@angular/forms": "16.1.4",
|
"@angular/forms": "16.1.4",
|
||||||
"@angular/localize": "16.1.4",
|
"@angular/localize": "16.1.4",
|
||||||
"@angular/material": "^16.1.4",
|
"@angular/material": "^16.1.4",
|
||||||
|
"@angular/material-moment-adapter": "16.1.4",
|
||||||
"@angular/platform-browser": "16.1.4",
|
"@angular/platform-browser": "16.1.4",
|
||||||
"@angular/platform-browser-dynamic": "16.1.4",
|
"@angular/platform-browser-dynamic": "16.1.4",
|
||||||
"@angular/router": "16.1.4",
|
"@angular/router": "16.1.4",
|
||||||
|
|
|
@ -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>
|
|
@ -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;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue