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?
Pagination. To paginate the table's data, add a <mat-paginator> after the table. If you are using the MatTableDataSource for your table's data source, simply provide the MatPaginator to your data source.
The paginator displays a dropdown of page sizes for the user to choose from. The options for this dropdown can be set via pageSizeOptions. The current pageSize will always appear in the dropdown, even if it is not included in pageSizeOptions.
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:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With