ui-scroll two table using the same datasource and scrolling in sync of both tables

Question

I am using ui-scroll in my application and ran into some issues.

I want to run ui-scroll on same datasource used to build two tables and by scrolling one table it should also scroll the other table which is created via same datasource.

I have tried to achieve that using following sample code but it doesn't work.

When scrolling any of the tables the behaviour of the lists is weird; it increases the size of the list and empty rows are shows. It can noticed in the plunker attached.

And if I change the data it only affects to the first table and the second one doesn't update the list.

Also I can not make the sync (sorry for the stupid question, if anyone can help).

Here is how I am doing:

Template:

<table border="1"> 
  <tbody>
    <td>
      <table> 
        <tbody id="first-tbody" ui-scroll-viewport style="height: 400px">
          <tr ui-scroll="item in datasource" adapter="adapter" start-index="0">
            <td>{{item}}</td>
          </tr>
        </tbody>
      </table>
    </td>
    <td> 
      <table>
        <tbody id="second-tbody" ui-scroll-viewport style="height: 400px">
          <tr ui-scroll="item in datasource" adapter="adapter2" start-index="0">
            <td>{{item}}</td>
          </tr>
        </tbody>
      </table>
    </td>
  </tbody>
</table>

Controller:

var datasource = {};
datasource.get = function (index, count, success) {
    $timeout(function () {
        var result = [];
        for (var i = index; i <= index + count - 1; i++) {
            result.push("item #" + i);
        }
        success(result);
    }, 100);
};
$scope.datasource = datasource;

https://plnkr.co/edit/CBPDlqx5P6Rc4tPZzGaw?p=preview

Any help would be highly appreciated. TIA

When scrolling too fast the first and last rows which ui-scroll adds for some scrolling calculations tend to have larger than 100px height. How to tackle them? Can i just hide them?

Here is the picture showing how it looks:

Answer 1

Something is not ok with display css-property in these template and it seems a good idea to extract both viewports into separate div-containers... The following code fixes empty rows issue:

<table border="1"> 
  <tbody>
    <td>
      <div ui-scroll-viewport style="height: 400px;">
        <table> 
          <tbody id="first-tbody" >
            <tr ui-scroll="item in datasource" adapter="adapter" start-index="0">
              <td>{{item}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </td>
    <td> 
      <div ui-scroll-viewport style="height: 400px;">
        <table>
          <tbody id="second-tbody" >
            <tr ui-scroll="item in datasource" adapter="adapter2" start-index="0">
              <td>{{item}}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </td>
  </tbody>
</table>

The updated demo is here: https://plnkr.co/edit/JjAiw3zvG4uIWGNjLUU7

---

Regarding 2 viewports scroll syncing, I guess, following approach might work:

$scope.datasource = {};
$scope.datasource.get = function (index, count, success) {
    var result = [];
    for (var i = index; i <= index + count - 1; i++) {
        result.push("item #" + i);
    }
    success(result); 
};

const vp1 = document.getElementById('vp1');
const vp2 = document.getElementById('vp2');
vp1.addEventListener('scroll', function() {
    vp2.scrollTop = vp1.scrollTop;
});

where "vp1" and "vp2" are ids of the viewports.