title: Infinite scroll table with fixed column
body: <p>I have a table that is being populated from the back-end using an ng-repeat on a single list item.  The table has a column for the date that needs to be fixed to the left but still able to scroll up and down through the months. </p>
  
  <p>All other columns that are not the Date column should be able to scroll up, down, left, or right. But when scrolling up or down the date should always be aligned with the correct row. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="grid-headers"&gt;
   &lt;div class="grid-column-date grid-header-item"&gt;Date&lt;/div&gt;
   &lt;div class="grid-column-col1 grid-header-item"&gt;Col1&lt;/div&gt;
   &lt;div class="grid-column-col2 grid-header-item"&gt;Col2&lt;/div&gt;
   &lt;div class="grid-column-col3 grid-header-item"&gt;Col3&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;ul class="grid-content"&gt;
      &lt;li ng-repeat="item in vm.gridItems" class="grid-row"&gt;
           &lt;div class="grid-column-date grid-row-item"&gt;&lt;/div&gt;
           &lt;div class="grid-column-col1 grid-row-item"&gt;&lt;/div&gt;
           &lt;div class="grid-column-col2 grid-row-item"&gt;&lt;/div&gt;
           &lt;div class="grid-column-col3 grid-row-item"&gt;&lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/DUkMI.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DUkMI.jpg" alt="enter image description here"></a></p>
  
  <p>UPDATE:</p>
  
  <p>I was able to find this directive that tethers divs when scrolling. It doesn't work in my app but it looks like a possible step in the right direction. </p>
  
  <p><a href="https://stackoverflow.com/questions/24296881/how-do-i-synchronize-the-scroll-position-of-two-divs-using-angularjs">How do I synchronize the scroll position of two divs using AngularJS?</a></p>
  
  <p>And this JSfiddle <a href="http://jsfiddle.net/gdjz6go5/" rel="nofollow noreferrer">http://jsfiddle.net/gdjz6go5/</a></p>