Skip to content

Mat Table Vertical Scroll Fixed Header Tutorial Angular

February 17, 2021

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.