How do we get the sorted datasource data when sorting is done on mat-table?
See original GitHub issueBug, feature request, or proposal:
feature request
What is the expected behavior?
When we sort the mat-table we should get the sorted values as displayed on table.
Example 1: i feed age array [3, 2, 1, 4 ,5] to this.dataSource.data
and i ll display those data in age column, after that i ll go and sort the age column on table that will get changed to [1, 2, 3, 4, 5]. Now i should get the sorted array on some event. How do i do that?
Example 2: I fed
this.dataSource = [ {name: 'Frozen yogurt', calories: '159', fat: '6', carbs: '24', protein: '4'}, {name: 'Ice cream sandwich', calories: '237', fat: '9', carbs: '37', protein: '4'}, {name: 'Eclair', calories: '262', fat: '16', carbs: '24', protein: '6'}, {name: 'Cupcake', calories: '305', fat: '4', carbs: '67', protein: '4'}, {name: 'Gingerbread', calories: '356', fat: '16', carbs: '49', protein: '4'}, ];
and got table like as shown in pic unsorted.png
when i sort on calories table data changes to
[ {name: 'Gingerbread', calories: '356', fat: '16', carbs: '49', protein: '4'}, {name: 'Cupcake', calories: '305', fat: '4', carbs: '67', protein: '4'}, {name: 'Eclair', calories: '262', fat: '16', carbs: '24', protein: '6'}, {name: 'Ice cream sandwich', calories: '237', fat: '9', carbs: '37', protein: '4'}, {name: 'Frozen yogurt', calories: '159', fat: '6', carbs: '24', protein: '4'}, ]
and got table like as shown in pic sorted.png
How do i get the sorted array?
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Angular CLI: 6.0.7 Node: 10.2.1 OS: linux x64 Angular: 6.0.3 @angular-devkit/architect 0.6.7 @angular-devkit/build-angular 0.6.7 @angular-devkit/build-optimizer 0.6.7 @angular-devkit/core 0.6.7 @angular-devkit/schematics 0.6.7 @angular/cdk 6.2.1 @angular/cli 6.0.7 @angular/material 6.2.1 @ngtools/webpack 6.0.7 @schematics/angular 0.6.7 @schematics/update 0.6.7 rxjs 6.2.0 typescript 2.7.2 webpack 4.8.3
Issue Analytics
- State:
- Created 5 years ago
- Comments:5 (1 by maintainers)
Top GitHub Comments
If you want to know what data the data source passes to the table, you can hook into the
connect
stream like the table doeshttps://stackblitz.com/edit/angular-mllz9q?file=app/table-sorting-example.ts
You can use the sort method instead
dataSource.sortData(dataSource.filteredData,dataSource.sort);