Mat Table Vertical Scroll Fixed Header Tutorial Angular

We will learn how to create and implement 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 the @angular/material/table package provides to add a material table with vertical scroll to your angular app.

 

Scrollable Fixed Header with Mat Table in Angular

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

Step 1 – Create the New Angular App

Step 2 – Install the 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- 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/the 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 the app.module.ts file. Thereafter, we also add the following lines to the 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 - jollytools.live</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 app.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 to 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 the Scrollable Mat Table Fixed Header in the Angular tutorial. In this tutorial, we have tried to learn the step-by-step creation and implementation of the same.