Anguar material table ( static data )

// styles.scss
@import '~@angular/material/prebuilt-themes/indigo-pink.css'; 


// HTML
<mat-table class="lessons-table mat-elevation-z8" [dataSource]="dataSource">

  <ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef>#</mat-header-cell>
    <mat-cell *matCellDef="let customer">{{customer.id}}</mat-cell>
  </ng-container>

  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>Name</mat-header-cell>
    <mat-cell class="description-cell"
              *matCellDef="let customer">{{customer.name}}
    </mat-cell>
  </ng-container>

  <ng-container matColumnDef="age">
    <mat-header-cell *matHeaderCellDef>Age</mat-header-cell>
    <mat-cell class="duration-cell"
              *matCellDef="let customer">{{customer.age}}
    </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>

  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>

</mat-table>


// Component.ts
export class AppComponent implements OnInit {
  displayedColumns = ["id", "name", "age"];
  dataSource: MatTableDataSource<any> = new MatTableDataSource();
  public data = [{ id: 1, name: "Hi", age: 25 }, { id: 2, name: "Lol", age: 35 }];

  ngOnInit(): void {
    this.dataSource.data = this.data;
  }
}