title: How can I sort HTML table using Angular/Typescript without 3rd party?
body: <p>So I have a html table where the rows and coloumns are interpolated from my User like his name, last login date, etc.</p>
  
  <p>Earlier we used Prime NG's customSort function but now we are eliminating those so I need to make my own sorting function.</p>
  
  <p>Can I make it withOUT using AngularJS, JavaScript, Bootstrap, Angular Material or any 3rd party thing? If yes, how?</p>
  
  <p>I spent 2 days just googling but I didn't find any solution that doesn't include one of the mentioned ways above. </p>
  
  <p>My HTML table at the moment:</p>
  
  <pre><code>&lt;table class="table" scrollHeight="calc(100vh - 170px)"&gt;
      &lt;tr&gt;
        &lt;th class="tableHeader" *ngFor="let col of tableHeaders"&gt;
          {{ col.header | translate }}
          &lt;my-icon
            *ngIf="col.field !== 'access_level'"
            [icon]="Icon.sort"
          &gt;&lt;/my-icon&gt;
        &lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr *ngFor="let item of items"&gt;
        &lt;td&gt;
          &lt;span class="normalColoumn"&gt; {{ item.firstname }}&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;span class="normalColoumn"&gt; {{ item.lastname }}&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;span class="normalColoumn"&gt; {{ item.email }}&lt;/span&gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;span class="normalColoumn" *ngFor="let roleId of item.roleIds"&gt;
            {{ getUserRole(roleId).name }}&lt;/span
          &gt;
        &lt;/td&gt;
        &lt;td&gt;
          &lt;span class="left"&gt;
            {{
              item.lastLoginDate
                ? (item.lastLoginDate | fromnow)
                : ('USER_MANAGEMENT.UNKNOWN_LAST_LOGIN' | translate)
            }}
          &lt;/span&gt;
          &lt;span class="only-show-on-hover"&gt;
            &lt;my-icon [icon]="Icon.edit"&gt;&lt;/my-icon&gt;
            &lt;my-icon [icon]="Icon.password"&gt;&lt;/my-icon&gt;
            &lt;my-icon [icon]="Icon.delete"&gt;&lt;/my-icon&gt;
          &lt;/span&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  </code></pre>
  
  <p>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 fuctions on each coloumns? Or how should I write it?</p>
  
  <p>Thank you in advance!</p>