title: Angular2 table with fixed header and first column
body: <p>I have tried many ways to achieve that, like bind scroll in directive or use jQuery, however, I am not sure if my table contains too many data/columns. When the scroll occurred, the fixed left and header were lagged a lot.</p>
  
  <p>I appreciate if any developer fellow could give me some advice. </p>
  
  <p><strong>[Updated]</strong></p>
  
  <p>I first tried to separate thead and tbody to make tbody scrollable, and put a directive on tbody. Then I used following code to handle on scroll, and seemed the updates were too slow, hence the fixed elements couldn't follow. Beside the overall scrolling seemed not performing very well, it lagged.</p>
  
  <pre><code>@HostListener('scroll', ['$event'])
  onScroll(event: Event): void { 
  
      this.thead.style.left = this.tbody.scrollLeft * -1 + 'px';
  
      for (let th of this.firstColumns) {
          th.style.left = this.tbody.scrollLeft + 'px';
      }
  }
  </code></pre>