While following a tutorial by Muhi Masri on how to implement an Editable Dynamic Table using Angular Material Paginator (the tutorial can be found here, highly recommended), I encountered an issue where the paginator was not working as expected. Despite following the documentation, the paginator did not display the correct data length.
Each time I filter a date, I use a dataSource to render the information. However, when trying to integrate the Angular Material Paginator into the table, it seemed to malfunction. The `this.dataSource._filterData.length` property always returned 1, which is not the expected behavior.
// Here are some relevant code snippets:
// Columns configuration
displayedColumns: string[] = ActivityColumns.map((col) => col.key);
columnsSchema: any = ActivityColumns;
// Date handling and data retrieval
dataSource = new MatTableDataSource<ApidatumDisplay>();
request: ApidatumDisplay[] = [];
getDataIsSelected() {
let dailydata = {
startDate: this.selected.startDate.format("YYYY-MM-DD"),
endDate: this.selected.endDate.format("YYYY-MM-DD")
}
const validStartSelected = dailydata.startDate;
// Some conditional logic here
this.request = res.apidata;
this.dataSource.data = this.request;
console.log('length',this.dataSource._filterData.length); // This always returns 1
this.averageTotal = res.adding_total_activity;
this.hourTimeTotal = this.convert(res.adding_total_hours);
this.expectedBudget = 192 * 22;
this.isReload = false;
}
Now let's take a look at the HTML structure:
<!--Table content-->
<section class="rounded mt-2 border overflow-hidden">
<table mat-table [dataSource]="dataSource">
<ng-container class="text-uppercase border" [matColumnDef]="col.key" *ngFor="let col of columnsSchema">
<th class="vertical-align-middle" mat-header-cell *matHeaderCellDef>
<div class="d-flex align-items-center">
<div class=" text-size-4 text-overflow mr-1">
{{ col.label }}
</div>
</div>
</th>
<td class=" text-size-3 font-weight-regular " mat-cell *matCellDef="let element">
<div class="text-overflow text-size-4 mr-1" [ngSwitch]="col.type" *ngIf="!element.isEdit">
<!-- Various switch cases for different column types -->
</div>
<div class="text-overflow text-size-4" [ngSwitch]="col.type" *ngIf="element.isEdit">
<!-- Cases for editable fields -->
</div>
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
</table>
<mat-paginator #paginator [length]="dataSource.filteredData.length" [pageIndex]="0" [pageSize]="5" [pageSizeOptions]="[5, 10, 20]">
</mat-paginator>
</section>
</section>
</div>