BUG: td-data-table scroll not showing final item

Do you want to request a feature or report a bug?

Bug

Feature Request

Bug Report

Row array contains 393 elements HTML <td-data-table class="table-features" [data]="modelFeatures" [columns]="configWidthColumns" [value]="selectedRows" selectable="true" clickable="true" (rowClick)="onClick($event)"> CSS td-data-table { max-width: 100%; display: block; cursor: pointer; } .table-features { height: 400px; } StackBlitz template: https://stackblitz.com/edit/covalent

Screenshots or link to CodePen/Plunker/JSfiddle

In the screenshot, the final two elements of my array are "partyid" and "segment" the screenshot makes reference to these elements.

What is the expected behavior?

All rows should be displayed

What is the motivation / use case for changing the behavior?

Which version of Angular and Material, and which browser and OS does this issue affect?

Chrome Version 89.0.4389.90 (Official Build) (x86_64) on Mac

Did this work in previous versions of Angular / Material?

Other information

The issue could be in covalent/src/platform/core/data-table/data-table.component.ts /

private _calculateVirtualRows(): void { let scrolledRows: number = 0; ... ... // set the last row to be rendered taking into account the row offset const range: number = index - 1 + TD_VIRTUAL_OFFSET * 2; let toRow: number = range + this.fromRow; // if last row is greater than the total length, then we use the total length if (isFinite(toRow) && toRow > this._data.length) { toRow = this._data.length; } else if (!isFinite(toRow)) { toRow = TD_VIRTUAL_OFFSET; } ... ... This could be >= meaning if we are at the end, show the final row vs. if we are past the end.

Teradata / covalent