question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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 unsorted 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 sorted

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:closed
  • Created 5 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

3reactions
andrewseguincommented, Jun 6, 2018

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

1reaction
danielmoncadacommented, Mar 26, 2019

You can use the sort method instead

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

MatTableDataSource how to get sorted order of data set?
Gets a sorted copy of the data array based on the state of the MatSort. Called after changes are made to the filtered...
Read more >
Sorting an Angular Material table - how to use MatSort and ...
With the MatSort directive, the user can sort the data on different columns by clicking on the column header. We use the MatSort...
Read more >
Angular mat-table sort example: Adding sorting to the material ...
Step 5: Assign MatSort to the mat-table data source. How Mat-table sort works? Working with sortingDataAccessor in mat-table data source. mat-table sort states....
Read more >
Sort header - Angular Material
To add sorting behavior and styling to a set of table headers, add the <mat-sort-header> component to each header and provide an id...
Read more >
Angular material table with initial sort header - Medium
Sort header : The matSort and mat-sort-header are used, respectively, to add sorting state and display to tabular data. Table: The mat-table provides...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found