Angular Material Mat Table Vertical Scroll Fixed Header Example

Angular mat-table vertical scroll with fixed header. In this tutorial, you will learn step by step how to create vertical scroll with fixed header with mat table in angular 11/10 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.

This tutorial will guide you step by step on how to create mat-table vertical scroll with fixed header in angular app.

Mat-Table Scrollable Fixed Header in Angular

Just follow the following steps and create mat-table vertical scroll with fixed header in angular app:

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

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

ng new my-new-app

Step 2 – Install npm Package

Then install /material for implement mat table scroll fixed header in angular 11 app. So, You can install the packages by executing the following commands on the terminal:

ng add @angular/material

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

In this step, visit 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

In this step, create bootstrap carousel in angular 11 app. 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">




<ng-container matColumnDef="id">
<th mat-header-cell *matHeaderCellDef> ID </th>
<td mat-cell *matCellDef="let element"> {{element.id}} </td>
</ng-container>


<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let element"> {{element.name}} </td>
</ng-container>


<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

In this step, visit the 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: '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, visit the 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

In this step, execute the following command on terminal to start angular mat-table vertical scroll fixed header:

ng serve