Mat Table Vertical Scroll Fixed Header Tutorial Angular

We will learn how to create and implpement Vertical Scroll Fixed Header with Mat Table in Angular. We will get step by step knowledge about the mentioned topic in this tutorial.

Note that @angular/material/table package provide to adding material table with vertiacl scroll to your angular app. You can also simply use it with Angular 6, Angular 7, Angular 8, Angular 9, Angular 10, Angular 11 versions.

Scrollable Fixed Header with Mat Table in Angular

Simply follow the below given steps for creating Mat Table Vertical Scroll Fixed Header

Step 1 is to Create the New Angular App

Step 2 is to Install the npm Package

Step 3 is to Add Code on App.Module.ts File

Step 4 is to Add Code on View File

Step 5 is to Add Code On app.Component ts File

Step 6 is to Add CSS

Step 7 is to Start the Angular App

Now, let’s learn in detail

Step 1- Creating the New Angular App

First of all, open your terminal and execute the given command on it to install an angular app:

ng new fixed-header-app

Step 2 : Installing the npm package

Next, just install/material for implementing Mat TAble Scroll Fixed Header in Angular 11. Further, you can install the packages by executing the following commands on the terminal:

ng add @angular/material

Step 3: Adding Code on App.Module.ts File

Afterwards, we visit src/app directory and open app.module.ts file. Thereafter, we also add the following lines 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: Adding the Code on View File

In next step, we create the Bootstrap Carousel in the Angular app. Then, we visit src/app/ and app.component.html and update the following code into it:

<h1>Angular Material Table Vertical Scroll Example - Thecodemon.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: Adding Code On app.Component ts File

Now, follow this step in which we visit the src/app directory and open app.component.ts. After this, we 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: 'rajesh@gmail.com'},
    {id:2, name: 'Paresh', email: 'paresh@gmail.com'},
    {id:3, name: 'Naresh', email: 'naresh@gmail.com'},
    {id:4, name: 'Suresh', email: 'suresh@gmail.com'},
    {id:5, name: 'Karan', email: 'karan@gmail.com'},
    {id:6, name: 'dummy', email: 'dummy@gmail.com'},
    {id:7, name: 'dummy1', email: 'dummy@gmail.com'},
    {id:8, name: 'dummy2', email: 'dummy@gmail.com'},
    {id:9, name: 'dummy3', email: 'dummy@gmail.com'},
    {id:10, name: 'dummy4', email: 'dummy@gmail.com'},
    {id:11, name: 'dummy5', email: 'dummy@gmail.com'},
    {id:12, name: 'dummy6', email: 'dummy@gmail.com'},
    {id:13, name: 'dummy7', email: 'dummy@gmail.com'},
    {id:14, name: 'dummy8', email: 'dummy@gmail.com'},
  ];
  displayedColumns = ['id', 'name', 'email'];
   
  constructor() {}
}

Step 6: Add CSS

In this step, we visit the src/app directory and open app.component.css. After this, we add the following code into app.component.css file:

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

Step 7: Starting the Angular App

Lastly, we reach the final step of implementation where we execute the following command on the terminal to start Mat Table Vertical Scroll Fixed Header: 

ng serve

Conclusion

Finally, we reach the end of Scrollable Mat Table Fixed Header in Angular 12 tutorial. In this tutorial, we have tried to learn the step by step creation and implementation of the same.

Thanks