CODEWITHSUNDEEP
angular-material
AskYous
AskYous

Reputation: 4740

matSort headers not sorting table at all

I'm having a difficult time getting sortable headers to work. I attached a live demo of my app having header sorting not working, as well as the code I used to implement this. When I click on a header, I get not response. No errors, no sorting, no feedback. I did the following:

  1. Added matSort directive to the table.
  2. Added mat-sort-header to each header.
  3. Imported MatSortModule into app.module.ts.
  4. Provided the MatSort directive to the table data source.

The headers are clickable, and they have toggling arrows, but the rows are not being sorted on click.

Upvotes: 1

Views: 1342

Answers (1)

Akhi Akl
Akhi Akl

Reputation: 3941

It is because you are initializing your datasource's sort as matSort before table is rendered in DOM (because of the *ngIf)

this.notes.sort = this.sort;

change this line

<table mat-table [dataSource]="notes" *ngIf="notes.data" matSort>

to 

<table mat-table [dataSource]="notes" [hidden]="!notes.data" matSort>

Upvotes: 1

Related Questions