body height is too small (recalculate dimensions not working correctly)

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here

Current behavior When loading NGX-Datablewith virtual scrolling enabled, the body height is calculated incorrectly.

the height of the table element (this.element) is set to 118px, should I be setting this manually?

the body of the datatable is set to a height of 19px but the row height is set to 50.

the ng-reflect-body-height is set to “19”, not sure why this is getting calculated incorrectly.

Expected behavior More than 1 row should be appearing and the body height should be number of rows multiplied by the row height (at a minimum).

Reproduction of the problem

The code:

<ngx-datatable
   class="material"
   [rows]="rows"
   [columns]="columns"
   [loadingIndicator]="loading"
   [scrollbarV]="true"
   [rowHeight]="50"
   [headerHeight]="50"
   [footerHeight]="50"
   ></ngx-datatable>

the issue seems to be here: https://github.com/swimlane/ngx-datatable/blob/c3a1ba2e542416ba45fe1b4040db7abebac9ce7b/src/components/datatable.component.ts#L764

What is the motivation / use case for changing the behavior? It doesn’t look good and there’s no way to monkeypatch this so the height is calculated correctly.

Please tell us about your environment:

Ubuntu 16.04 LTS

• Table version: 6.0.1

• Angular version: 2.3.0

• Browser: Chrome | Firefox

• Language: TypeScript 2.1.5 (compiling to ES6)

[rajeshvaya]

If we set height of the ngx-datatable like the below example it works - The height has to calculated with header and footer height in mind

E.g.

<ngx-datatable style="height: 439px;"
            class="material"
            [rows]="rows"
            [columnMode]="'standard'"
            [headerHeight]="40"
            [footerHeight]="50"
            [rowHeight]="35"
            [scrollbarV]="true">

The height 439px was calculated to display 10 rows per page as follows: Header height + Footer height + (Number of rows to display on one page * row height)

Due to the css and font size of your app the header and footer height may increase - inspect the header and footer element through dev tools to get the accurate height.

439px = 38 + 51 + (35 * 10)

[professorjoshua]

Can we create a property for how many rows we can display when using a vertical scroll?