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 15, 16 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 11, angular 12, angular 13, angular 14, angular 15 and angular 16 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 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 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">

    <!--- 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

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: '[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

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

Recommended Angular Posts