How to create a mat table in Angular

Question

Can someone explain to me with the code and example how to create a mat table in Angular?

Answer 1

1. Install Angular Material

ng add @angular/material

2. Import MatTableModule

import { NgModule } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { MatTableModule } from '@angular/material/table';

import { AppComponent } from './app.component';

@NgModule({

  declarations: [AppComponent],

  imports: [

    BrowserModule,

    BrowserAnimationsModule,

    MatTableModule,

  ],

  providers: [],

  bootstrap: [AppComponent],

})

export class AppModule {}

3. Define Table Data

import { Component } from '@angular/core';

export interface UserData {

  id: number;

  name: string;

  age: number;

}

const ELEMENT_DATA: UserData[] = [

  { id: 1, name: 'John', age: 30 },

  { id: 2, name: 'Jane', age: 25 },

  { id: 3, name: 'Doe', age: 40 },

];

@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css'],

})

export class AppComponent {

  displayedColumns: string[] = ['id', 'name', 'age'];

  dataSource = ELEMENT_DATA;

}

4. Create the Table Template

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

  <!-- ID Column -->

  <ng-container matColumnDef="id">

    <th mat-header-cell *matHeaderCellDef>ID</th>

    <td mat-cell *matCellDef="let element">{{ element.id }}</td>

  </ng-container>

  <!-- Name Column -->

  <ng-container matColumnDef="name">

    <th mat-header-cell *matHeaderCellDef>Name</th>

    <td mat-cell *matCellDef="let element">{{ element.name }}</td>

  </ng-container>

  <!-- Age Column -->

  <ng-container matColumnDef="age">

    <th mat-header-cell *matHeaderCellDef>Age</th>

    <td mat-cell *matCellDef="let element">{{ element.age }}</td>

  </ng-container>

  <!-- Header and Row Definitions -->

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

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

</table>

Run the Application

ng serve