How to display data in Html

Question

Hi

  I am trying to create Dynamic table using Angular Material. What should be the Html Code. Using ANgular 17

<section class="content">
    <div class="content-block">
      <app-dynamic-mat-table [tableData]="userArray" [columnArray]="['empName','empEmail']" ></app-dynamic-mat-table>
    </div>
</section>

Markup

Copy

export class DynamicMatTableComponent implements OnInit,AfterViewInit,OnChanges {
  @Input() title?: string;
  @Input() tabelData: any = [];
  @Input() columnArray: string [] = [];

  @Input() columns: any = [];
  @Input() actionColumn: any = [];
  @Input() permission: any;
  dataSource: MatTableDataSource<any>;

  constructor(private cdr: ChangeDetectorRef) {
    this.dataSource = new MatTableDataSource<any>([]);
    this.paginator = {} as MatPaginator;
  }
  defaultImage:string='assets/images/icons/no-photo.png';
  ngOnInit(): void {

    // this.pageSizeOptions = this._common.getPageSizeOptions();
    // this.displayedColumns = this.getDisplayedColumns();
  }
  ngOnChanges(changes:SimpleChanges){
    this.isLoading = true;
    if (changes?.['tabelData'] && changes?.['tabelData'].currentValue) {
      this.dataSource = new MatTableDataSource<any>(this.tabelData);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;
      this.isLoading = false;

    }
}

TypeScript

Copy

Thanks

Answer 1

Check the below example.

dynamic-mat-table.component.html:

<section class="content">
    <div class="content-block">
      <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

        <!-- Dynamic Columns -->
        <ng-container *ngFor="let column of columnArray" [matColumnDef]="column">
          <th mat-header-cell *matHeaderCellDef> {{ column }} </th>
          <td mat-cell *matCellDef="let element"> {{ element[column] }} </td>
        </ng-container>

        <!-- Header Row -->
        <tr mat-header-row *matHeaderRowDef="columnArray"></tr>
        <!-- Data Rows -->
        <tr mat-row *matRowDef="let row; columns: columnArray;"></tr>

      </table>
      <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]" showFirstLastButtons></mat-paginator>
    </div>
</section>

dynamic-mat-table.component.ts:

import { Component, Input, OnChanges, SimpleChanges, ViewChild, ChangeDetectorRef, AfterViewInit, OnInit } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';

@Component({
  selector: 'app-dynamic-mat-table',
  templateUrl: './dynamic-mat-table.component.html',
  styleUrls: ['./dynamic-mat-table.component.css']
})
export class DynamicMatTableComponent implements OnInit, AfterViewInit, OnChanges {
  @Input() title?: string;
  @Input() tabelData: any = [];
  @Input() columnArray: string[] = [];
  @Input() columns: any = [];
  @Input() actionColumn: any = [];
  @Input() permission: any;

  dataSource: MatTableDataSource<any>;

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  isLoading: boolean = true;
  defaultImage: string = 'assets/images/icons/no-photo.png';

  constructor(private cdr: ChangeDetectorRef) {
    this.dataSource = new MatTableDataSource<any>([]);
  }

  ngOnInit(): void {
    // Initial setup if needed
  }

  ngOnChanges(changes: SimpleChanges): void {
    if (changes?.['tabelData'] && changes?.['tabelData'].currentValue) {
      this.updateTableData(changes['tabelData'].currentValue);
    }
  }

  ngAfterViewInit(): void {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

  private updateTableData(data: any): void {
    this.dataSource.data = data;
    this.isLoading = false;
    this.cdr.detectChanges(); // Ensure Angular checks for changes
  }
}