Components: How do we get the sorted datasource data when sorting is done on mat-table?

[PrashanthGowda]

Bug, 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

[andrewseguin]

If you want to know what data the data source passes to the table, you can hook into the connect stream like the table does

https://stackblitz.com/edit/angular-mllz9q?file=app/table-sorting-example.ts

[i-would]

@andrewseguin In your solution, if the mat-table also uses a mat-paginator then

this.dataSource.connect().subscribe(d => this.renderedData = d);

will only return the data currently on screen, not the whole dataset.

[danielmoncada]

You can use the sort method instead

dataSource.sortData(dataSource.filteredData,dataSource.sort);

[jcjobin]

You can use the sort method instead

dataSource.sortData(dataSource.filteredData,dataSource.sort);

This is definitely the approach to take if you use pagination. Thanks!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}