Odtnhj

Im probably being stupid but as far as i can tell, below code should follow examples from angular material website exactly. however, the sorting result is incorrect.

I can see sorting happened because order changed. row xxx50 became the first row. row xxx01 moved to original position of xxx50. the rest of the data in original order. asc and des result in same order.

Please show me what im doing wrong.

html:

<div class="mat-elevation-z8">
 <table mat-table [dataSource]="dataSource" matSort>
 <ng-container matColumnDef="agent">
 <th mat-header-cell *matHeaderCellDef mat-sort-header>Agent</th>
 <td mat-cell *matCellDef="let relationshipInterface"> relationshipInterface.agentDisplayName </td>
 </ng-container>
 <ng-container matColumnDef="player">
 <th mat-header-cell *matHeaderCellDef mat-sort-header>Player</th>
 <td mat-cell *matCellDef="let relationshipInterface"> relationshipInterface.playerDisplayName </td>
 </ng-container>
 <ng-container matColumnDef="avatar">
 <th mat-header-cell *matHeaderCellDef mat-sort-header>Nickname</th>
 <td mat-cell *matCellDef="let relationshipInterface"> relationshipInterface.avatarDisplayName </td>
 </ng-container>

 <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
 <tr mat-row *matRowDef="let row; columns: displayedColumns;">
 </tr>
 </table>

 <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

ts:

import Component, OnInit, ViewChild from '@angular/core';
import MatPaginator, MatSort, MatTableDataSource from '@angular/material';

export interface RelationshipInterface 
 agentName: string;
 agentDisplayName: string;
 playerName: string;
 playerDisplayName: string;
 avatarName: string;
 avatarDisplayName: string;


@Component(
 selector: 'app-relationships-table',
 templateUrl: './relationships-table.component.html',
 styleUrls: ['./relationships-table.component.css']
)
export class RelationshipsTableComponent implements OnInit 
 displayedColumns: string = ['agent', 'player', 'avatar'];
 dataSource: MatTableDataSource<RelationshipInterface>;

 @ViewChild(MatPaginator) paginator: MatPaginator;
 @ViewChild(MatSort) sort: MatSort;

 constructor() 

 

 ngOnInit() 
 this.dataSource = new MatTableDataSource(
 this.getTempData()
 );
 this.dataSource.paginator = this.paginator;
 this.dataSource.sort = this.sort;
 

 applyFilter(filterColumn: string, filterValue: any) 
 

 getTempData() 
 const newData = ;
 for (let i = 0; i < 100; i++) 
 let str: string;
 if (i < 10) 
 str = '0' + i;
 else 
 str = '' + i;
 
 const relationshipInterface = 
 agentName: 'agent name ' + str,
 agentDisplayName: 'agent dName ' + str,
 playerName: 'player name ' + str,
 playerDisplayName: 'player dName ' + str,
 avatarName: 'avatar name ' + str,
 avatarDisplayName: 'avatar dName ' + str,
 ;
 newData.push(relationshipInterface);
 
 return newData;
 

after testing, apparently, column names must match data source property names.

i.e.

html:

<ng-container matColumnDef="agent">

ts:

export interface RelationshipInterface 
 agent: string; // was agentDisplayName