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

Question

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!

marc_s · Accepted Answer · 2023-12-28 22:08:37Z

6

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)
}

edited Dec 28, 2023 at 22:08

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Nov 12, 2019 at 14:42

paul

22.1k1 gold badge56 silver badges54 bronze badges

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

1 Comment

kameholic1582 Over a year ago

Thank you! I made some editing to the code and now it works like magic, ascending and descending too!

Omkar Hande · Accepted Answer · 2021-01-06 07:45:47Z

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.

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related