Visual Glitch when Rows array is static.

Steps to reproduce:

Set rows as:

<datatable
  class='material'
  [rows]='rows'
  [options]='options'
  (onRowClick)="userClicked($event)">
  <datatable-column name="Name" [width]="300"></datatable-column>
  <datatable-column name="Gender"></datatable-column>
  <datatable-column name="Age"></datatable-column>
  <datatable-column name="City" [width]="300" prop="address.city"></datatable-column>
  <datatable-column name="State" [width]="300" prop="address.state"></datatable-column>
</datatable>


    {
      "id": 0,
      "name": "Ramsey Cummings",
      "gender": "male",
      "age": 52,
      "address": {
        "state": "South Carolina",
        "city": "Glendale"
      }
    },
    {
      "id": 1,
      "name": "Stefanie Huff",
      "gender": "female",
      "age": 70,
      "address": {
        "state": "Arizona",
        "city": "Beaverdale"
      }
    },
    {
      "id": 2,
      "name": "Mabel David",
      "gender": "female",
      "age": 52,
      "address": {
        "state": "New Mexico",
        "city": "Grazierville"
      }
    }

  options = new TableOptions({
    columnMode: ColumnMode.force,
    headerHeight: 50,
    footerHeight: 0,
    rowHeight: 50,
    scrollbarV: true,
    scrollbarH: true
  });

Result:

After the scroll bar is pressed it does update to the intended tho:

I have used Augury and seen that the the array does not initially have the $$index set to anything only after I click the scroll bar does it update the rows and appends to each object.

Disabling scrollbarV fixes this issue so I think the problem is with the functionality that variable has.

[MonicaOlejniczak]

I’ve just stumbled upon this same issue. Here is a simple example demonstrating the issue based on the Horizontal/Vertical Scrolling example found in the documentation.

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

I have noted my observations below while debugging through the code.

The following block of code from DataTableBody.getRowsStyles is responsible for setting the row positions by calling the translateXY method:

var idx = row ? row.$$index : 0;
var pos = idx * rowHeight;
translateXY(styles, 0, pos);

The issue with this block is that it assumes the row $$index property has been set. This property is updated in DataTableBody.updateRows, which is never called in the example shown above. So this results in the pos evaluating to NaN, messing up the calculations in the translateXY method, and hence all of the row positions. At the very least, the first line should become var idx = row && row.$$index ? row.$$index : 0 so that the idx defaults to 0 correctly.

For the aforementioned assumption to work, updateRows needs to be called This happens in either onPageChange, onRowsUpdate or onBodyScroll. This explains why when you scroll in the data table, the row positions are recalculated and then appears to be fixed. One problem with the onRowsUpdate event emitter is that it isn’t subscribed to until DataTableBody.ngOnInit is called. So the DataTable.ngDoCheck isn’t really doing anything when it calls this.onRowsUpdate.emit(this.rows) and by the time the subscription occurs, there are no row diffs, so the onRowsUpdate output isn’t emitted either.

These assumptions don’t play nicely with ‘static’ data, or even any @Input properties defined in an Angular 2 component.

[nthonymiller]

@MonicaOlejniczak - I’ve fixed the issue and will support a pull request later.

Body.ts :- Add call to updateRows()

ngOnInit(): void { this.rows = [...this.state.rows]; this.updateRows(); ...... }