Angular mat-table vertical scroll with fixed header example; i am going to show you how to create vertical scroll with fixed header with mat table in angular 12 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.
Angular 12 Material Mat Table Vertical Scroll Fixed Header Example
- 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
Execute the following command on terminal to install angular app:
ng new my-new-app
Step 2 – Install npm Package
Execute the following command on terminal to install /material for implement mat table scroll fixed header in angular:
ng add @angular/material
Step 3 – Add Code on App.Module.ts File
Go to 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
create html markup for Material Mat Table Vertical Scroll Fixed Header. 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
Go to 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
Add the following css; so go to 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
Execute the following command on terminal to start angular mat-table vertical scroll fixed header:
ng serve