How Can I sort a table (click) on the header?

Question

What's the kind of logic that I have to use for sort my elements?

Here I generate all of the columns and rows.

dynamic-table.component.html

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

dynamic-table.component.ts

import {Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-dynamic-table',
  templateUrl: './dynamic-table.component.html',
  styleUrls: ['./dynamic-table.component.css']
})
export class DynamicTableComponent implements OnInit {
  @Input()
  users = [];
  @Input()
  columns: string[];
  constructor() {
  }
  onClickSort() {
    //ADD LOGIC SORT
  }
  ngOnInit() {
  }
}

My datas are in a mock.ts, I can find them in my service.

app.component.ts

import {Component, OnInit } from '@angular/core';
import {TableService} from './table.service';
@Component({
  selector: 'app-root',
  styleUrls: ['./app.component.css'],
  templateUrl: './app.component.html',
})
export class AppComponent implements OnInit {
  users;
  columns;
  constructor(private atService: TableService) {
  }
  ngOnInit(): void {
    this.columns = this.atService.getColumns();
    this.atService.getUsers().subscribe((res) => this.users = res);
  }
}

Hi Nathan, as you can read, I can't use mat-sort-header, just an event Click and the method in the component with some sort logic. I saw the documentation about mat-sort-header, but I'm a beginner so i have to use basic things. — S.A.R.A., Feb 28 '19 at 17:50
Start with trying [Array.prototype.sort()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) and sorting `columns` based on whatever conditions you would need. — Alexander Staroselsky, Feb 28 '19 at 17:57
Here I answer the question, it works for me: https://stackoverflow.com/a/54942025/10592616 — S.A.R.A., Mar 01 '19 at 11:13

score 2 · Answer 1 · answered Feb 28 '19 at 18:14

2

You could write a pipe that takes in the data and returns the data sorted in the way you'd prefer.

<li *ngFor="let item of items | sortingPipe: filterarg">

And the myfilter pipe will do something like this:

@Pipe({
  name: 'sortingPipe'
})
export class SortingPipe implements PipeTransform {

  transform(myArr, filterArg) {

    const sorted = myArr.sort((x, y) => {
      return x.duration - y.duration; // whatever you want to compare
    });
    return sorted.slice(0);

  }
}

answered Feb 28 '19 at 18:14

Boris Yakubchik

3,861
3
34
41

Isn't it possibile doing something easier directly in my component without creating anything new? – S.A.R.A. Feb 28 '19 at 18:55
You can do it in a component too as described here: https://stackoverflow.com/a/43524428/5017391 – Boris Yakubchik Feb 28 '19 at 19:30
Yakubchick, I did this: sortTable(parm) { this.users.sort((a, b) => a[parm].localeCompare(b[parm])); } But I can't reverse the Sort and I cant sort the numbers columns... why? – S.A.R.A. Feb 28 '19 at 19:36
You might need a separate function that sorts in the other direction (swap `a` and `b` near the `localeCompare` word). If you need to reset to the original ordering, you might need to keep a copy of the original array (see the `.slice(0)` trick I used above). – Boris Yakubchik Feb 28 '19 at 22:40

user206904 · Answer 2 · 2019-03-01T10:59:51.873

0

There's a good library for this

https://www.kryogenix.org/code/browser/sorttable/

It's very easy to use.

Just load the script in your html file and modify your header to add sortable (with one t) as a class, like this:

<script src="sorttable.js"></script>
 <table>
    <tr>
      <th *ngFor="let col of columns">{{col}}</th>
    </tr>
    <tr *ngFor="let user of users">
      <td *ngFor="let col of columns">{{user[col]}}</td>
    </tr>
  </table>

edited Mar 01 '19 at 10:59

answered Feb 28 '19 at 17:55

user206904

504
4
16

Do you know if it's possible doing something easier in my component without adding js? – S.A.R.A. Feb 28 '19 at 18:58
This solution is already easy, just add 1 line to include the .js file, add a class to your existing html table and voila :) what do you mean by easier? I personally believe reusing an existing library is probably better/faster than writing your own sorting functions. If you wish, you can also try using the sort api. – user206904 Mar 01 '19 at 10:59

score 0 · Answer 3 · answered Feb 28 '19 at 18:05

0

I'm a fan of the ngx-datatable - a library for beautiful tables with sorting and searching.

An example of sorting is just adding a single property to the <ngx-datatable></<ngx-datatable> component.

answered Feb 28 '19 at 18:05

Boris Yakubchik

3,861
3
34
41

How Can I sort a table (click) on the header?

3 Answers3