title: Angular Material mat-paginator fixed bottom
body: <p>Good afternoon,</p>
  
  <p>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 <a href="https://material.angular.io/components/table/examples" rel="nofollow noreferrer">https://material.angular.io/components/table/examples</a> without sucess. Here is my code :</p>
  
  <p>component.html</p>
  
  <pre><code>    &lt;mat-form-field class="table-form-input"&gt;
      &lt;input type="text" matInput (keyup)="doFilter($event.target.value)" placeholder="Filter" &gt;
    &lt;/mat-form-field&gt;
  &lt;div class="table-container mat-elevation-z8"&gt;
    &lt;table mat-table [dataSource]="dataSource" matSort&gt;
  
      &lt;!-- Name Column --&gt;
      &lt;ng-container matColumnDef="name"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Name&lt;/th&gt;
        &lt;td mat-cell *matCellDef="let element"&gt;{{element.name}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;!-- Client id Column --&gt;
      &lt;ng-container matColumnDef="cli_id"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Client ID &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let element"&gt; {{element.cli_id}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
       &lt;!-- EXT id Column --&gt;
       &lt;ng-container matColumnDef="ext_id"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; EXT ID &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let element"&gt; {{element.ext_id}} &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;!-- Weight Column --&gt;
      &lt;ng-container matColumnDef="want_details"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt; Need details &lt;/th&gt;
        &lt;td mat-cell *matCellDef="let element" (click) = "rowClicked(element.ext_id)"&gt;
          &lt;mat-radio-group&gt;
            &lt;mat-radio-button class="table-radio-button" *ngFor="let detail of detail_types" [value]="detail.id" [checked]= "detail.id === element.want_details"&gt;
              {{detail.name}}
            &lt;/mat-radio-button&gt;
          &lt;/mat-radio-group&gt; &lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true;"&gt;&lt;/tr&gt;
      &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;&lt;/tr&gt;
    &lt;/table&gt;
    &lt;mat-paginator [pageSize]="25"[pageSizeOptions]="[5, 10, 25]" showFirstLastButtons&gt;&lt;/mat-paginator&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>component.ts</p>
  
  <pre><code>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) =&gt; {
          this.list_client = list_client;
          this.dataSource.data = this.list_client;
        },
        (error) =&gt; {
          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) =&gt; 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);
    }
  }
  </code></pre>
  
  <p>component.css</p>
  
  <pre><code>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;
    }
  </code></pre>
  
  <p>I tried to put overflow just on the table but it doesn't work. Tried relative, absolute, fixed and so... </p>
  
  <p>If someone have a solution or a documentation it would be perfect !</p>
  
  <p>Thanks a lot</p>