Include Buttons and Paginator in the Material Table Footer

Question

I use Angular Material Table and I need a command button and the table's paginator in the table's footer row, something like this

My code is like this actually

<div class="example-table-container mat-elevation-z8">

  <table mat-table [dataSource]="dataSource" multiTemplateDataRows>
    <!-- DataSource's displayedColumns -->
    <ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
      <th mat-header-cell *matHeaderCellDef> {{column}} </th>
      <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
    </ng-container>


    <!-- Exporter column -->
    <ng-container matColumnDef="exporter">
      <td mat-footer-cell *matFooterCellDef colspan="2">
        <button class="btn btn-primary" (click)="exportCsv(dataSource)">
          <i class="material-icons" title="Exporter en CSV">save_alt </i>
        </button>
      </td>
    </ng-container>

    <!-- Paginator column -->
    <ng-container matColumnDef="paginator">
      <td mat-footer-cell *matFooterCellDef colspan="3">
        <mat-paginator [pageSizeOptions]="[5,10,20]" showFirstLastButtons></mat-paginator>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let element; columns: displayedColumns;"></tr>

    <tr mat-footer-row *matFooterRowDef="['exporter', 'paginator']"></tr>

  </table>
</div>

As you can see, I moved the <mat-paginator> element inside a td... But this broke the paginator as it doesn't paginate the table anymore... (you see "0 of 0" and disable pagination buttons)... when I put it back outside the table element, the paginator returns to normal...

How to correctly put the paginator inside the footer row?

Answer 1

Finally, I used a toolbar, if someone has the same problem:

  </table>

  <mat-toolbar>
    <mat-toolbar-row>
      <mat-icon (click)="exportCsv(dataSource)" title="Export as CSV">save_alt</mat-icon>
      <span class="example-spacer"></span>
      <mat-paginator class="paginator" [pageSizeOptions]="[5, 10, 20]"></mat-paginator>
    </mat-toolbar-row>
  </mat-toolbar>

</div>

that gave:

Answer 2

There you go, with paginator as sticky footer:

Note: the idea is to put a footer-cell for only one column (here we take the first) and then define a colspan taking full width.

<div class="example-table-container mat-elevation-z8">

  <table mat-table [dataSource]="dataSource" multiTemplateDataRows>
    <!-- DataSource's displayedColumns -->
    <ng-container matColumnDef="{{column}}" *ngFor="let column of displayedColumns">
      <th mat-header-cell *matHeaderCellDef> {{column}} </th>
      <td mat-cell *matCellDef="let element"> {{element[column]}} </td>
      <td mat-footer-cell *matFooterCellDef colspan="20" when="column == displayedColumns[0]">
        <mat-paginator [pageSizeOptions]="[5,10,20]" showFirstLastButtons></mat-paginator>
      </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let element; columns: displayedColumns;"></tr>

    <tr mat-footer-row *matFooterRowDef="[displayedColumns[0]]; sticky: true"></tr>

  </table>
</div>

Answer 3

Another alternative is to use FlexBox. To make the example easier, it is shown with Bootstrap

<div
      class="d-flex flex-column flex-md-row"
      [hidden]="dataSource && dataSource?.data?.length == 0"
    >
      <button
        (click)="onClickAdd()"
        mat-raised-button
        color="primary"
        class="align-self-center"
        type="button"
        *ngIf="selection?.selected?.length !== 0"
      >
        Add all selected
      </button>
      <mat-paginator
        class="ml-auto"
        [length]="totalRows"
        [pageSize]="tableInitPageSize"
        [pageSizeOptions]="tablePageSizeOptions"
      >
      </mat-paginator>
    </div>

Answer 4

I solved this problem by assigning the paginator of my data source in ngAfterViewInit():

ngAfterViewInit(): void {
  this.tableDataSource.paginator = this.paginator;
}

Answer 5

By adding width:100% in mat-paginator you will get this design. example: .