Sorting Angular table without using Materials, just sort method?

Question

table.component.html

When I click on the Header, the function have to sort ASC/DESC all the column.

<table>
<tr>
  <th *ngFor="let col of columns" (click)="sortTable(col)">{{col}}</th>
</tr>
<tr *ngFor="let user of users">
  <td *ngFor="let col of columns">{{user[col]}}</td>
</tr>
</table>

table.component.ts

The method sortTable(param) work just ASC and I can't click on the same Header again for the DESC so it remain the same until I click on another Header.

export class DynamicTableComponent implements OnInit {
@Input()
users = [];
@Input()
columns: string[];

constructor() { }

    sortTable(param) {
    this.users.sort((a, b) =>
      (a[param] > b[param]) ? 1 :
        ((b[param] > a[param]) ? -1 :
          0));
  }

@TheHeadRush I saw your link, it was very Helpful... I searched everything. Now I fixed the problem for the numbers columns as you can see in my Edit Document. The problem for the DESC Sort remain, just ASC, any suggestions? — S.A.R.A.
– S.A.R.A., Commented Feb 28, 2019 at 20:54
Append reverse when you call array.sort. Using variables from the provided answer, it would be e.g objs.sort(compare).reverse(). — The Head Rush
– The Head Rush, Commented Feb 28, 2019 at 21:41
@TheHeadRush I need somethig auto, +1/-1 when is ASC or DESC. I saw something on that link but nothing that work... — S.A.R.A.
– S.A.R.A., Commented Mar 1, 2019 at 8:56
@TheHeadRush ok, done, I will answer my own question now. Thanks! — S.A.R.A.
– S.A.R.A., Commented Mar 1, 2019 at 9:49

Jay Derus · Accepted Answer · 2019-03-01 02:19:54Z

1

Have you considered using existing pipes for sorting instead of writing your own? EG: https://github.com/danrevah/ngx-pipes

And more directly, this: https://github.com/danrevah/ngx-pipes#orderby

Using that package you only then need to manage click to set a variable to determine the orderby and whether it is ASC or DESC, as denoted by the prefix.

EG from Docs:

<!-- Returns array ordered by value of property -->
<p>{{ deepObj | orderBy: 'amount' }}</p>  
<!-- Output: [{id: 3, ...}, {id: 4, ...}, {id: 2, ...}, {id: 1, ...}] -->
<p>{{ deepObj | orderBy: '-amount' }}</p>  
<!-- Output: [{id: 1, ...}, {id: 2, ...}, {id: 4, ...}, {id: 3, ...}] -->

answered Mar 1, 2019 at 2:19

Jay Derus

257 bronze badges

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

Comments

S.A.R.A. · Accepted Answer · 2019-03-01 09:51:47Z

I had problems with the reverse Sort so I did like this and it works!

export class DynamicTableComponent implements OnInit {
  @Input()
  users = [];
  @Input()
  columns: string[];

  direction = false;

  sortTable(param) {
    this.direction = !this.direction;
    const compare = (a, b) => {
        if (!a[param] && !b[param]) {
          return 0;
        } else if (a[param] && !b[param]) {
          return -1;
        } else if (!a[param] && b[param]) {
          return 1;
        } else {
          const value1 = a[param].toString().toUpperCase(); // ignore upper and lowercase
          const value2 = b[param].toString().toUpperCase(); // ignore upper and lowercase
          if (value1 < value2) {
            return !this.direction ? -1 : 1;
          } else if (value1 > value2) {
            return !this.direction ? 1 : -1;
          } else {
            return 0;
          }
        }
      };
    return this.users.sort(compare);
    //this.users = MYITEMS
    }

Collectives™ on Stack Overflow

Sorting Angular table without using Materials, just sort method?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related