Mat-Table Scrollable Fixed Header in Angular 12

Angular mat-table vertical scroll with fixed header example; i am going to show you how to create vertical scroll with fixed header with mat table in angular 12 app.

Note that, @angular/material/table package provide to adding material table with vertical scroll to your angular app. And you can easily use with angular 6, angular 7, angular 8, angular 9, angular 10 and angular 11 version.

Angular 12 Material Mat Table Vertical Scroll Fixed Header Example

  • Step 1 – Create New Angular App
  • Step 2 – Install npm Package
  • Step 3 – Add Code on App.Module.ts File
  • Step 4 – Add Code on View File
  • Step 5 – Add Code On app.Component ts File
  • Step 6 – Add CSS
  • Step 7 – Start the Angular App

Step 1 – Create New Angular App

Execute the following command on terminal to install angular app:

ng new my-new-app

Step 2 – Install npm Package

Execute the following command on terminal to install /material for implement mat table scroll fixed header in angular:

ng add @angular/material

Step 3 – Add Code on App.Module.ts File

Go to src/app directory and open app.module.ts file. And then add the following lines of into app.module.ts file:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
     
import { AppComponent } from './app.component';
  
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  
import { MatTableModule } from '@ngmodule/material-carousel';
  
@NgModule({
  declarations: [
    AppComponent
  ],
  imports:      [
    BrowserModule, 
    BrowserAnimationsModule,
    MatTableModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Step 4 – Add Code on View File

create html markup for Material Mat Table Vertical Scroll Fixed Header. So, visit src/app/ and app.component.html and update the following code into it:

<h1>Angular Material Table Vertical Scroll Example - Tutmake.com</h1>
<div class="example-container mat-elevation-z8">
  <table mat-table [dataSource]="data" class="mat-elevation-z8">
  
    <!--- Note that these columns can be defined in any order.
          The actual rendered columns are set as a property on the row definition" -->
  
    <!-- 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>
  
    <!-- Email Column -->
    <ng-container matColumnDef="email">
      <th mat-header-cell *matHeaderCellDef> Email </th>
      <td mat-cell *matCellDef="let element"> {{element.email}} </td>
    </ng-container>
  
    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
</div>

Step 5 – Add Code On app.Component ts File

Go to src/app directory and open app.component.ts. Then add the following code into component.ts file:

import { Component } from '@angular/core';
  
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
  
export class AppComponent {
  
  data = [
    {id: 1, name: 'Rajesh', email: '[email protected]'},
    {id:2, name: 'Paresh', email: '[email protected]'},
    {id:3, name: 'Naresh', email: '[email protected]'},
    {id:4, name: 'Suresh', email: '[email protected]'},
    {id:5, name: 'Karan', email: '[email protected]'},
    {id:6, name: 'dummy', email: '[email protected]'},
    {id:7, name: 'dummy1', email: '[email protected]'},
    {id:8, name: 'dummy2', email: '[email protected]'},
    {id:9, name: 'dummy3', email: '[email protected]'},
    {id:10, name: 'dummy4', email: '[email protected]'},
    {id:11, name: 'dummy5', email: '[email protected]'},
    {id:12, name: 'dummy6', email: '[email protected]'},
    {id:13, name: 'dummy7', email: '[email protected]'},
    {id:14, name: 'dummy8', email: '[email protected]'},
  ];
  displayedColumns = ['id', 'name', 'email'];
  
  constructor() {}
}

Step 6 – Add CSS

Add the following css; so go to src/app directory and open app.component.css. Then add the following code into app.component.css file:

table {
  width: 100%;
}
.example-container {
  height: 400px;
  max-width: 100%;
  overflow: auto;
}

Step 7 – Start the Angular App

Execute the following command on terminal to start angular mat-table vertical scroll fixed header:

ng serve

Recommended Angular Tutorial

Leave a Comment