Mat-table, mat-sort is not working properly

Question

I tried to implement mat-sort in mat-table, in my project. After starting my project, I see "sort" icon, can click on it, but nothing sorting in my result, always that same view.

component-file:

@Component({
  selector: 'app-test-component',
  templateUrl: './testComponent.component.html',
  styleUrls: ['./testComponent.component.css'],
  providers: [TestService],
})

export class TestComponent implements OnInit, OnDestroy, AfterViewInit {

  displayedColumns = ['Column1'];

  dataSource = new MatTableDataSource<UserModel>();
  private exDisplayNames: Subscription;


  @ViewChild(MatSort) sort: MatSort;

  constructor(private testService: TestService) {   }

  ngOnInit() {
    this.exDisplayNames = this.testService.userNamesChanged.subscribe((userNameData: UserModel[]) => {
      this.dataSource.data = userNameData;
    });
    this.testService.fetchUserName();
  }

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
  }

  ngOnDestroy() {

    if (this.exDisplayNames) {
        this.exDisplayNames.unsubscribe();
    }
  }

 }

service file:

@Injectable()
export class TestService {


    userNamesChanged = new Subject<UserModel[]>();
    private availableUserName: UserModel[] = [];


    private fbSubs: Subscription[] = [];

    constructor(private db: AngularFirestore) { }


    fetchUserName() {
        this.fbSubs.push(this.db.collection('names/')
            .snapshotChanges()
            .map(docArray => {
                return docArray.map(doc => {
                    return {
                        displayUserName: doc.payload.doc.data().nick,
                    };
                });
            })
            .subscribe((userData: UserModel[]) => {
                this.availableUserName = userData;
                this.userNamesChanged.next([...this.availableUserName]);
            }, error => {
                console.log(error);
            }));
    }

}

html file:

<section fxLayoutAlign="center">
  <mat-card>
    <mat-card-content>
      <mat-table [dataSource]="dataSource" matSort>

        <ng-container matColumnDef="Column1">
          <mat-header-cell *matHeaderCellDef mat-sort-header>Nick</mat-header-cell>
          <mat-cell fxLayout="row" fxLayoutAlign="center center" *matCellDef="let element">{{ element.displayUserName}}</mat-cell>
        </ng-container>

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

Also was imported all necessary material modules: MatSortModule, MatTabsModule.

My steps are: 1. Added in component: @ViewChild(MatSort) sort: MatSort. 2. Implements AfterViewInit. 3. Added:

ngAfterViewInit() {
   this.dataSource.sort = this.sort;
 }

4. In html file added: matSort in <mat-table>.
5. Added mat-sort-header to <mat-cell-header>.

Like I wrote: I see sort icon on the column, but after clicking - nothing changing, nothing sorting.

Answer 1

I'm not sure how your UserModel looks, but I don't think it contains a property Column1:

matColumnDef="Column1"

Change that part to something like matColumnDef="displayUserName" or whatever property you have in the model.

Also change displayedColumns = ['displayUserName'];

From the docs:

By default, the MatTableDataSource sorts with the assumption that the sorted column's name matches the data property name that the column displays. For example, the following column definition is named position, which matches the name of the property displayed in the row cell.

Answer 2

ngOnInit() {
  this.exDisplayNames = this.testService.userNamesChanged.subscribe((userNameData: UserModel[]) => {
    this.dataSource = new MatTableDataSource(userNameData);
    setTimeout(() => this.dataSource.sort = this.sort);
  });
  this.testService.fetchUserName();
}

1. Your sorter is bound to your datasource at view init, but it doesn't wait for your request to be made.
2. You should create a new instance of a data source and stop fiddling in the properties. Material provides an high level of abstraction, take advantage of that.

N.B. : In my solution you can see a timeout, it's for change detection. It is possible that you don't need it, I just put it there just to be sure.