Angular Material Table with no data when adding sort and pagination

Question

I'm learning to use this great angular material component that is the data table. I managed to make it work with in my kind of customized app, but when I tried to add sort and pagination, the data went off despite being monitored in the logs.

I'm doing something wrong, can someone point me out in the right direction? The relevant code:

The base component that handles and receives all data:

export class BaseComponent implements OnInit {
  public tableData: any;
  readonly displayedColumns = ['id', 'sol', 'earth_date', 'img_source'];
  readonly cameras: string[] = [
    'FHAZ',
    'RHAZ',
    'MAST',
    'NAVCAM',
    'CHEMCAM',
    'MAHLI',
    'MARDI',
    'PANCAM',
    'MINITES',
  ];
  readonly camera = 'FHAZ';
  roverData: Rover[];
  dataSource = new MatTableDataSource<any>(this.tableData);
  constructor(private dataService: DataService) {}

  ngOnInit(): void {}

  eventCaptured($event) {
    this.dataService.searchByCamera($event).subscribe((data) => {
      this.roverData = this.tableData = data;
      console.log(this.tableData);
    });
  }

Passing data via Input (base component html):

 <div class="col-md-6">
      <app-content
      [roverData]="roverData"
      [dataSource]="dataSource"
      [displayedColumns]="displayedColumns"
      ></app-content>
    </div>

the content component which displays the table (TS)

export class ContentComponent implements OnInit, OnChanges {
 @Input() roverData: Rover[];
 @Input() dataSource: any;
 @Input() displayedColumns: string[];
 @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 @ViewChild(MatSort, { static: true }) sort: MatSort;
  constructor() { }

  ngOnInit(): void {
  }

  ngOnChanges(changes: SimpleChanges){
    console.log(changes);
  }
}

Content HTML (the table)

<mat-table matSort [dataSource]="dataSource" class="mat-elevation-z8">
  <ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef> Id </mat-header-cell>
    <mat-cell *matCellDef="let r"> {{r.id}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="sol">
    <mat-header-cell *matHeaderCellDef> Sol </mat-header-cell>
    <mat-cell *matCellDef="let r"> {{r.sol}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="earth_date">
    <mat-header-cell *matHeaderCellDef> Earth Date </mat-header-cell>
    <mat-cell *matCellDef="let r"> {{r.earth_date}} </mat-cell>
  </ng-container>
  <ng-container matColumnDef="img_source">
    <mat-header-cell *matHeaderCellDef> Rover Image </mat-header-cell>
    <mat-cell *matCellDef="let r">
      
          <img  class="img-fluid" src="{{r.img_src}}" alt="rover camera">

    </div>
    </mat-cell>
  </ng-container>
  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

The onChnges Hook displays the correct data, but its not being rendered. Why?

worked like a cham :) @yurzui, if you want to post an answer, points are yours — Mellville
– Mellville, Commented Aug 5, 2020 at 13:35

yurzui · Accepted Answer · 2020-08-05 13:39:56Z

1

I suspect that you incorrectly updated dataSource for mat-table.

Since you're using MatTableDataSource then you need to go with:

this.dataSource.data = data;

but you updated original array this.tableData = data;

answered Aug 5, 2020 at 13:39

yurzui

215k32 gold badges450 silver badges413 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Material Table with no data when adding sort and pagination

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related