Angular Material mat-paginator fixed bottom

Question

Good afternoon,

I have trouble to have a fixed paginator with angular-material using DataTable. I mean I just wanna scroll rows. I have already check on https://material.angular.io/components/table/examples without sucess. Here is my code :

component.html

    <mat-form-field class="table-form-input">
    <input type="text" matInput (keyup)="doFilter($event.target.value)" placeholder="Filter" >
  </mat-form-field>
<div class="table-container mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" matSort>

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

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

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

    <!-- Weight Column -->
    <ng-container matColumnDef="want_details">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Need details </th>
      <td mat-cell *matCellDef="let element" (click) = "rowClicked(element.ext_id)">
        <mat-radio-group>
          <mat-radio-button class="table-radio-button" *ngFor="let detail of detail_types" [value]="detail.id" [checked]= "detail.id === element.want_details">
            {{detail.name}}
          </mat-radio-button>
        </mat-radio-group> </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true;"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <mat-paginator [pageSize]="25"[pageSizeOptions]="[5, 10, 25]" showFirstLastButtons></mat-paginator>
</div>

component.ts

import { Component, OnInit, OnDestroy, ViewChild, AfterViewInit} from '@angular/core';
import { MatSort, MatTableDataSource, MatPaginator } from '@angular/material';
import { Subscription } from 'rxjs';
import { HomeSupportService } from './home-support.service';

@Component({
  selector: 'app-home-support',
  templateUrl: './home-support.component.html',
  styleUrls: ['./home-support.component.css']
})
export class HomeSupportComponent implements OnInit, AfterViewInit, OnDestroy {

  public displayedColumns: string[] = ['name', 'cli_id', 'ext_id', 'want_details'];
  public list_client;
  private list_clientSub: Subscription;
  public dataSource = new MatTableDataSource(this.list_client);
  public detail_types = [{id: 0, name: 'No'}, {id: 1, name: 'Short'}, {id: 2, name: 'Long'}];

  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor(private homesupportservice: HomeSupportService) { }

  ngOnInit() {
    this.homesupportservice.getClientList();
    this.list_clientSub = this.homesupportservice.getClientListUpdatedSubject().subscribe(
      (list_client) => {
        this.list_client = list_client;
        this.dataSource.data = this.list_client;
      },
      (error) => {
        console.log(error);
      }
    );
    this.dataSource.paginator = this.paginator;
  }

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
    this.dataSource.filterPredicate = (data:
      {name: string, cli_id: number, ext_id: number, want_details: string}, filter: string) => data.name.indexOf(filter) !== -1;
  }

  ngOnDestroy() {
    this.list_clientSub.unsubscribe();
  }

  doFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

  rowClicked(row: any): void {
    console.log(row);
  }
}

component.css

table {
    width: 100%;
  }

  th.mat-sort-header-sorted {
    color: black;
  }

  .table-container {
    margin: auto;
    width: 80%;
    max-height: 80%;
    overflow: auto;
  }

  .table-form-input{
    width: 80%;
    margin-left: 10%;
    margin-top: 20px;
  }

  .table-radio-button{
    padding-right: 5px;
    padding-left: 5px;
  }

I tried to put overflow just on the table but it doesn't work. Tried relative, absolute, fixed and so...

If someone have a solution or a documentation it would be perfect !

Thanks a lot

Solution 1

As per Material 8.1

We can wrap the table inside a div with max-height or height CSS Property and put the paninator outside that div.

Html Code sample.

  <div class="mat-elevation-z2">
    <div class="table-container">

      <!--- List of column definitions here --->

      <table mat-table [dataSource]="dataSource" matSort>
        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
    </div>
    <mat-paginator [pageSize]="25" [pageSizeOptions]="[10, 15, 25, 100]"></mat-paginator>
  </div>

CSS

.table-container {
    max-height: calc(100vh - 155px); // or height:calc(100vh - 155px); depending on your need  change
    overflow: auto;
}

Solution 2

If you want to fix the mat-paginator to the bottom of the page(not bottom of window, as you scroll down, you can use this method

.html

 <div class="footer">
 <mat-paginator fixed [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator> 
</div>

.css

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: red;
  color: white;
  text-align: center;
}

Solution 3

The reason lies here:

 .table-container {
    max-height: calc(100vh - 155px); // or height:calc(100vh - 155px); depending on your need  change
    overflow: auto; 
 }

Scroll is set to the container of your table, that is why it is applied to your paginator as well. Try putting outside of your container like this:

<div class="table-container">
   *your table...*
</div>

<mat-paginator></mat-paginator>

Comments

[NaN]

Have you found a resolution for your question?

[Loïc Gaudard]

Hello, yes ! Solved by using a static height and not relative

[Newbie]

You can use flexbox instead of static height