working with material tables
This commit is contained in:
parent
218b1fe9c1
commit
2a8d28acfa
|
@ -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",
|
||||
|
|
|
@ -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