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?

score 48 · Accepted Answer · edited May 27 '19 at 19:42

48

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:

edited May 27 '19 at 19:42

Stefan Falk

23,898
50
191
378

answered Sep 13 '18 at 15:57

serge

13,940
35
121
205

1

@JCAguilera The `span` tag with the custom class `example-spacer` between the `mat-icon` and `mat-paginator` is doing the trick. You can put `fxFlex: 1 1 auto` in that class to make it work, or simply use ` before the thing you want to shift to the right. – Akash Srivastav Dec 06 '18 at 05:47
7

.mat-toolbar-row{ justify-content: space-between; } This will also do the trick. No need for example-spacer – Jason Politis Jun 25 '19 at 18:22

score 0 · Answer 2 · edited Nov 23 '20 at 13:25

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>

score 0 · Answer 3 · answered Dec 09 '21 at 19:13

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>

score -2 · Answer 4 · answered Nov 29 '18 at 22:19

-2

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

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

answered Nov 29 '18 at 22:19

Jesper

2,644
4
30
65

Rabin · Answer 5 · 2018-12-21T10:00:19.053

-6

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

edited Dec 21 '18 at 10:00

answered Nov 29 '18 at 05:29

Rabin

1
1

please edit your answer, is not really clear what do you try to say, about what style are you talking? the OP asking how to put paginator in the footer row, you explain how to fit the paginator to full container width. – serge Nov 29 '18 at 16:24

Include Buttons and Paginator in the Material Table Footer

5 Answers5