title: Sorting table columns in Angular
body: <p>I'm trying to make my table columns sortable. I found this tutorial here: <a href="https://www.youtube.com/watch?v=UzRuerCoZ1E&amp;t=715s" rel="noreferrer">https://www.youtube.com/watch?v=UzRuerCoZ1E&amp;t=715s</a></p>
  <p>Using that information, I ended up with the following:</p>
  <p>A pipe that handles the sorting</p>
  <pre><code>import { Pipe, PipeTransform } from '@angular/core';
  
      @Pipe({
        name: 'sort',
        pure: true
      })
      export class TableSortPipe implements PipeTransform {
      
        transform(list: any[], column:string): any[] {
            let sortedArray = list.sort((a,b)=&gt;{
              if(a[column] &gt; b[column]){
                return 1;
              }
              if(a[column] &lt; b[column]){
                return -1;
              }
              return 0;
            })
          return sortedArray;
        }
      
      }
  </code></pre>
  <p>Here's the component that helps me build my table. Here I define the sortedColumn variable.</p>
  <pre><code>import { NavbarService } from './../navbar/navbar.service';
  import { LiveUpdatesService } from './live-updates.service';
  import { Component, OnInit } from '@angular/core';
  import { Observable } from 'rxjs';
  
  @Component({
    selector: 'app-live-updates',
    templateUrl: './live-updates.component.html',
    styleUrls: ['./sass/live-updates.component.scss']
  })
  export class LiveUpdatesComponent implements OnInit{
    stocks$: Observable&lt;any[]&gt;;
    sortedColumn: string;
  
    constructor(private updatesService: LiveUpdatesService, public nav: NavbarService) {
      this.stocks$ = this.updatesService.getStocks();
    }
  
    ngOnInit() {
      this.nav.show();
    }
  }
  </code></pre>
  <p>Here's my template file. As you can see, I've attached my <code>sort</code> pipe to the my loop, spitting out the table rows. It's worth noting that the way I'm rendering the table differs from the video. For example, his data is stored in an array, but mine is stored on Firebase. He's rendering his table dynamically, but mine is fixed to a certain number of columns. I'm also hardcoding the headers, but he used the variable names from his array to generate the table headers. I'm not sure if these differences could be preventing things from working.</p>
  <pre><code>&lt;section class=&quot;score-cards&quot;&gt;
      &lt;app-score-cards&gt;&lt;/app-score-cards&gt;
  &lt;/section&gt;
  &lt;section class=&quot;live-updates-wrapper&quot;&gt;
      &lt;div class=&quot;table-wrapper&quot;&gt;
          &lt;table class=&quot;stock-updates&quot;&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th class=&quot;ticker-fixed&quot;&gt;Ticker&lt;/th&gt;
                      &lt;th&gt;&lt;a (click)=&quot;sortedColumn = $any($event.target).textContent&quot;&gt;Ask Price&lt;/a&gt;&lt;/th&gt;
                      &lt;th&gt;&lt;a (click)=&quot;sortedColumn = $any($event.target).textContent&quot;&gt;Tax Value&lt;/a&gt;&lt;/th&gt;
                      &lt;th&gt;&lt;a (click)=&quot;sortedColumn = $any($event.target).textContent&quot;&gt;Est. Value&lt;/a&gt;&lt;/th&gt;
                      &lt;th&gt;&lt;a (click)=&quot;sortedColumn = $any($event.target).textContent&quot;&gt;Location&lt;/a&gt;&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
                  &lt;tr *ngFor=&quot;let s of stocks$ | async | sort : sortedColumn&quot;&gt;
                      &lt;td class=&quot;ticker-fixed&quot;&gt;
                          &lt;a target=&quot;_blank&quot; href=&quot;https://robinhood.com/stocks/{{ s.TICKER }}&quot;&gt;{{ s.TICKER }}&lt;/a&gt;
                          &lt;span class=&quot;sp500&quot;&gt;{{ s.sp500_flag }}S&amp;P&lt;/span&gt;
                      &lt;/td&gt;
                      &lt;td&gt;{{ s.CLOSE }}&lt;/td&gt;
                      &lt;td&gt;{{ s.tax_diff }}&lt;/td&gt;
                      &lt;td&gt;{{ s.MarketCap }}&lt;/td&gt;
                      &lt;td&gt;{{ s.Sector }}&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
      &lt;/div&gt;
  &lt;/section&gt;
  </code></pre>
  <p>I was getting the following error below, but was able to fix it injecting the following code in my pipe file: <code>list = !!list ? list : [];</code></p>
  <p>Now there are no errors, but the sorting is not working as expected. When I click on the table header, nothing happens. How can I fix this?</p>
  <p><a href="https://i.stack.imgur.com/InyGZ.png" rel="noreferrer"><img src="https://i.stack.imgur.com/InyGZ.png" alt="enter image description here" /></a></p>