Everything seems to be working smoothly with my mat table, except for the last column that is supposed to calculate the sum values from the other columns using the reduce method.
I'm facing a bit of a roadblock with this issue. Initially, I thought that the problem might be due to the fact that the reduce method is executed after the OnInit lifecycle event. However, even when I tried declaring this.dataSource.data = this.data in ngAfterViewInit, it didn't work.
This is how I have structured my HTML template:
<div [ngClass]="{'hidden': !hasData()}">
<div class="subcollection-name">{{subCollection.name}}</div>
<div class="table-container">
<table
matSort
mat-table
class="items-table"
[dataSource]="dataSource"
>
<!-- Code for different table columns -->
</table>
</div>
<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
And this is how my TypeScript file looks like:
import { Observable, BehaviorSubject } from 'rxjs';
import { SubCollection } from 'model/item-tree/collection';
import { MatSort, MatPaginator, MatTableDataSource } from '@angular/material';
import { Component, ViewChild, Input, OnInit, ChangeDetectionStrategy, AfterViewInit, OnChanges } from '@angular/core';
@Component({
selector: 'app-collection-steps-report-subcollection-table',
templateUrl: './collection-steps-report-subcollection-table.component.html',
styleUrls: ['./collection-steps-report-subcollection-table.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CollectionStepsReportSubcollectionTableComponent implements OnInit {
// TypeScript component properties and methods defined here
}
If anyone has any helpful insights or tips to resolve this issue, I would greatly appreciate it! Thanks in advance!