Sorting with dynamic column - Angular material

Question

I am using this URL and I am doing sorting. Sorting is working fine but, I have 2 numeric column

Weight - Its value is coming from DB via API Call and it is present in dataSource. (here, sorting is working)
Double Weight : Its formula is: Weight * 2. Here, "Double weight" is calculated dynamically in HTML and hence it isn't available in datasource.

I need to apply sorting in "Double weight" column. Can someone please guides me on this.

HTML

< ng-container matColumnDef="weight">

< th mat-header-cell *matHeaderCellDef mat-sort-header> Weight

< td mat-cell *matCellDef="let element"> {{element.weight}}

< /ng-container>

< ng-container matColumnDef="weight2">

< th mat-header-cell *matHeaderCellDef mat-sort-header> Weight

< td mat-cell *matCellDef="let element"> {{element.weight * 2}}

< /ng-container>

TS

@ViewChild(MatSort) sort: MatSort;
ngOnInit() {
this.dataSource.sort = this.sort;
}

Ok, regardless fact that this is without UX purpose because it's just doubled weight... You can sort by weight and it still will be sorted properly. I mean clicking on double weight can sort by weight under the hood because result will be fine and weight is value which you do have. — Eluzive
– Eluzive, Commented Oct 11, 2018 at 13:09

Cobus Kruger · Accepted Answer · 2018-10-11 14:13:11Z

2

I'm pretty sure that sorting on (weight * 2) will give exactly the same result as sorting by weight.

So while you display different values in the two columns, just sort on weight in both cases.

answered Oct 11, 2018 at 14:13

Cobus Kruger

8,6655 gold badges66 silver badges109 bronze badges

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

Comments

Jenish MS · Accepted Answer · 2022-08-06 04:06:47Z

0

Try following code

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

This might work.

answered Aug 6, 2022 at 4:06

Jenish MS

4944 silver badges17 bronze badges

Comments

Fedor · Accepted Answer · 2024-08-23 17:51:44Z

0

You can use the custom sorting function by which you can have numeric sorting.

sort(valueA: any, valueB: any, order: string) {
let comparison = 0;
if (valueB === null) {
  comparison = 1;
} else if (valueA === null) {
  comparison = -1;
} else if (valueA > valueB) {
  comparison = 1;
} else if (valueA < valueB) {
  comparison = -1;
}
return order === 'desc' ? comparison * -1 : comparison;
}

edited Aug 23, 2024 at 17:51

Fedor

24.7k45 gold badges59 silver badges187 bronze badges

answered Aug 21, 2024 at 17:39

Dinesh

134 bronze badges

Collectives™ on Stack Overflow

Sorting with dynamic column - Angular material

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related