CODEWITHSUNDEEP
htmlangulartypescriptsorting
kameholic1582
kameholic1582

Reputation: 155

How can I sort HTML table using Angular/Typescript without 3rd party?

So I have a html table where the rows and columns are interpolated from my User like his name, last login date, etc.

Earlier we used Prime NG's customSort function but now we are eliminating those so I need to make my own sorting function.

Can I make it withOUT using AngularJS, JavaScript, Bootstrap, Angular Material or any 3rd party thing? If yes, how?

I spent 2 days just googling but I didn't find any solution that doesn't include one of the mentioned ways above.

My HTML table at the moment:

<table class="table" scrollHeight="calc(100vh - 170px)">
    <tr>
      <th class="tableHeader" *ngFor="let col of tableHeaders">
        {{ col.header | translate }}
        <my-icon
          *ngIf="col.field !== 'access_level'"
          [icon]="Icon.sort"
        ></my-icon>
      </th>
    </tr>
    <tr *ngFor="let item of items">
      <td>
        <span class="normalColumn"> {{ item.firstname }}</span>
      </td>
      <td>
        <span class="normalColumn"> {{ item.lastname }}</span>
      </td>
      <td>
        <span class="normalColumn"> {{ item.email }}</span>
      </td>
      <td>
        <span class="normalColumn" *ngFor="let roleId of item.roleIds">
          {{ getUserRole(roleId).name }}</span
        >
      </td>
      <td>
        <span class="left">
          {{
            item.lastLoginDate
              ? (item.lastLoginDate | fromnow)
              : ('USER_MANAGEMENT.UNKNOWN_LAST_LOGIN' | translate)
          }}
        </span>
        <span class="only-show-on-hover">
          <my-icon [icon]="Icon.edit"></my-icon>
          <my-icon [icon]="Icon.password"></my-icon>
          <my-icon [icon]="Icon.delete"></my-icon>
        </span>
      </td>
    </tr>
  </table>

I know that I should make a function and use it on the headers with Angular's onClick, but I don't know how to do more. Should I use different sorting functions on each columns? Or how should I write it?

Thank you in advance!

Upvotes: 4

Views: 20839

Answers (2)

paul
paul

Reputation: 22021

A very simple implementation would involve:

making each column header clickable

<th class="tableHeader" *ngFor="let col of tableHeaders" (click)="sort(col.propertyName)">

then sorting your items list by that property in the controller

sort(colName) {
    this.items.sort((a, b) => a[colName] > b[colName] ? 1 : a[colName] < b[colName] ? -1 : 0)
}

Upvotes: 6

Omkar Hande
Omkar Hande

Reputation: 81

Paul answered it correctly with his function but I would like to make some changes in it for toggling output. The function only return the output in Ascending order.

Here is a suggestion for toggling ascending and descending order-

<th class="tableHeader" *ngFor="let col of tableHeaders" (click)="sort(col.propertyName, booleanValue)">

Declare a boolean variable into your TS file as

    booleanValue: any = false;

Then use this function in TS file

sortFunction(colName, boolean) {
    if (boolean == true){
        this.data.sort((a, b) => a[colName] < b[colName] ? 1 : a[colName] > b[colName] ? -1 : 0)
        this.booleanValue = !this.booleanValue
    }
    else{
        this.data.sort((a, b) => a[colName] > b[colName] ? 1 : a[colName] < b[colName] ? -1 : 0)
        this.booleanValue = !this.booleanValue
    }
}

Now you can have a sorting in Ascending and Descending order. Thank you.

Upvotes: 6

Related Questions