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?
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>