[Sort] Adjust sort interface to handle swapping out MatSort

[jscharett]

Bug, feature request, or proposal:

It would be nice to be able to sort on multiple columns.

What is the expected behavior?

The user can sort the grid with multiple columns at a time

What is the current behavior?

The user can sort the grid with a single column

What is the use-case or motivation for changing an existing behavior?

The app I'm working on has a requirement for multi-column sort. I've used other, non-angular, grids in the past and they have supported this.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4.3.6 Material 2.0.0-beta.10 Typescript 2.5.2

[jelbourn]

There's should actually be nothing stopping one from doing multi-column sorting; you would just need to swap out the current mdSort directive (which holds the sort state) with a variant that has the state for multiple columns.

[jscharett]

Ah, good to know. Still getting familiar with Angular. Thanks

[timwright35]

@jscharett I was just thinking this would be nice myself, I will have to look into how mdSort runs etc it seems.

[prabhat112]

anyone has an example or a plunker implementation of the above suggestion?

[willshowell]

@jelbourn I gave it a shot by providing a MultiSort directive that extends MatSort and uses a collection of active MatSortables instead of a single one.

However, this method in MatSortHeader, which controls whether a sort header is visible, requires a reimplementation of the header.

https://github.com/angular/material2/blob/9b0771286aa867ca111987e5d8232137d6a45d33/src/lib/sort/sort-header.ts#L143-L147

AFAIK it is not currently possible to extend a component while inheriting the decorator, so a reimplementation of MatSortHeader has to also reimplement the template, styles, animations, etc.

If I'm not missing something, this is quite a bit more involved than creating a MatSort variant.

[jelbourn]

@willshowell thanks for giving that a try

@andrewseguin we need to change the matSort/sort-header to each conform to an interface that would allow for different sorting semantics

[Kulikovpavel]

When this feature will be ready and available? approximately

[dnemoga]

Any updates?

[fxck]

Is this planned anytime soon? Looks like there is nothing table related in the plan anymore..

[relair]

I am thinking about changing this myself, since I need multi column sorting and this doesn't seem to be addressed any time soon. So the problem right now is interface which is essentially a value of sort.active and _sort.direction which are just strings. I am thinking of either them being potentially an array (and add a check for it) - otherwise use current logic for backwards compatibility or alternatively have some new property with collection of tuples with id and direction and then have it work next to old properties which may become obsolete by this point.

[elboukhari]

Hi guys, any update on this thread ?

[relair]

I have created a pull request with changes that add option to enable multi column sorting. I made it so it is as much backwards compatible as I could make it without adding additional properties. We will see if it is fine as is or material team will want me to do some changes.

[Bhuvn12]

I have created a pull request with changes that add option to enable multi column sorting. I made it so it is as much backwards compatible as I could make it without adding additional properties. We will see if it is fine as is or material team will want me to do some changes.

@relair please show the working of this feature on stackblitz.com please. i am new in angular

[farantesrodrigues]

Hi guys, I'm waiting for this feature and expecting it to be included in the next release (after @relair PR and all the discussion), angular 8 / ivy (?). For the meantime I created this working project to ng-mat-multi-sort just to understand better this problem and have something workable for dev demos.

[matiasah]

Is there any update on this?

[thesayyn]

Hi guys, I'm waiting for this feature and expecting it to be included in the next release (after @relair PR and all the discussion), angular 8 / ivy (?). For the meantime I created this working project to ng-mat-multi-sort just to understand better this problem and have something workable for dev demos.

How about sending a PR against this repo instead of maintaining another package/repository?

[nivle]

You can also just do something like this:

<tr>
    <th matSort (matSortChange)="someMethod($event)" mat-sort-header="firstName">firstname</th>
    <th matSort (matSortChange)="someMethod($event)" mat-sort-header="lastName">lastname</th>
    <th matSort (matSortChange)="someMethod($event)" mat-sort-header="language">language</th>
</tr>

private sortingValues = { firstName: '', lastName: '', language: '' };

public someMethod(event: any): void { 
    this.sortingValues[event.active] = event.direction;
    console.log(this.sortingValues);
    // the rest you want to do... 
}

[totibi]

You can also just do something like this:

<tr>
    <th matSort (matSortChange)="someMethod($event)" mat-sort-header="firstName">firstname</th>
    <th matSort (matSortChange)="someMethod($event)" mat-sort-header="lastName">lastname</th>
    <th matSort (matSortChange)="someMethod($event)" mat-sort-header="language">language</th>
</tr>

private sortingValues = { firstName: '', lastName: '', language: '' };

public someMethod(event: any): void { 
    this.sortingValues[event.active] = event.direction;
    console.log(this.sortingValues);
    // the rest you want to do... 
}

Ok, what about arrows? I'm gues they calculated by angular inners? Any ways to have them alive?

[nivle]

You can also just do something like this:

<tr>
    <th matSort (matSortChange)="someMethod($event)" mat-sort-header="firstName">firstname</th>
    <th matSort (matSortChange)="someMethod($event)" mat-sort-header="lastName">lastname</th>
    <th matSort (matSortChange)="someMethod($event)" mat-sort-header="language">language</th>
</tr>

private sortingValues = { firstName: '', lastName: '', language: '' };

public someMethod(event: any): void { 
    this.sortingValues[event.active] = event.direction;
    console.log(this.sortingValues);
    // the rest you want to do... 
}

Ok, what about arrows? I'm gues they calculated by angular inners? Any ways to have them alive?

Not sure what you mean? notice I added the "matSort" and call the method on each 'th', instead of adding them to the table, this way each column has their own arrow animations... For normal shared use, you could do like in this example Or do you mean something else by "alive"?

[Maxl94]

I had the same problem and since there is no progress here yet I decided to write my own package. It provides as little bit more than just mulitsorting, but maybe some of you adapt it to your needs.

Have fun.

Is is based on Francisco Arantes Rodrigues approach, great thanks to him!

[ajlif]

I have created a pull request with changes that add option to enable multi column sorting. I made it so it is as much backwards compatible as I could make it without adding additional properties. We will see if it is fine as is or material team will want me to do some changes.

i found the same issue , it is risolved or not , i'am currently using version 8

[himanshugarg574]

Hey guys, Great work with IVY. Now that it is released, can we get an ETA on this ? Thanks.

[willkara]

Hey everyone, it's been years AND Ivy is out now. Is there an ETA?

@chris2011 any idea?

[willkara]

Looks like the second I placed this I came across the multi-column sorting in the docs.

https://material.angular.io/components/table/overview#sorting

[woxingren]

Where is the "multi-column sorting in the docs"? I cannot find anything about it.

Looks like the second I placed this I came across the multi-column sorting in the docs.

https://material.angular.io/components/table/overview#sorting

[HemavaanKK]

Could you please share the "multi-column" sorting in the docs?

Looks like the second I placed this I came across the multi-column sorting in the docs.

https://material.angular.io/components/table/overview#sorting

[brandonsmith86]

Hey everyone, it's been years AND Ivy is out now. Is there an ETA?

@Chris2011 any idea?

Am interested in get an update as well. This seems like a pretty commonly requested feature.

[ngothanhluan]

Hi found this package on npm https://github.com/Maxl94/ngx-multi-sort-table. hope this is useful.

[patelatit53]

Hey everyone, it's been years AND Ivy is out now. Is there an ETA?

@Chris2011 any idea?

Waiting for the update too..

[l0wskilled]

Any update?

[Chris2011]

Hey @willkara I didn't see you mentioning me. Is there a reason why or was it a mistake?

[loxy]

Any progress, half a year later?

[fxck]

yea, give it couple more years

https://github.com/angular/components/pull/15171

[WellspringCS]

Being a beneficiary of this OSS functionality I don't build or support, I'm in no way wanting to come across as whining or unappreciative. I'm very thankful for Angular and these components.

That said, I do dearly wish there movement on this request. I have to imagine that thousands upon thousands of Angular developers would love to see this working.

[nrdev88]

Can only wish the team agrees. I believe that the architecture of the table component with the matSort directive doesn't allow us to implement this other than to enhance core code.

[imerljak]

I would be happy to tackle this feature if possible.

I recently needed to implement this feature and being able to change the source code would be so much easier than having to extend the MatSort and MatSortHeader and duplicating the templates and styles.

In my opinion the best way to resolve this issue is to refactor MatSortHeader and remove the direct checks on _sort.active and _sort.direction, encapsulating the direction querying and "isActive" verification on MatSort.

Having both this features on MatSort, would enable to change behavior (single or multi sort) without impacting much more.

Only "big" problem I see is the sortChanged event that emits a single Sort, this should be changed to emit Sort[], or exposing a multiSortChanged (a bit convoluted.).

If there's any interest in this, I'd be happy to prepare a draft.

[OBorce]

People designing components seem to forget that they don't need a perfect design, this is angular, it can break API every 6 months, that is why we have migration guides. It has been more than 4 years, design something functional and later you can always improve on it.

Perfect is the enemy of good.

[mvarano-prism]

I'm working on a project where this feature is sorely needed. We love Material UI, but have a table-heavy application and would like multi-sort out of the box when working on a table. Would be happy to contribute to a solution