ngx-datatable: 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>

too-small-table

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)

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 7
Comments: 19 (3 by maintainers)

Most upvoted comments

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)

+12

rajeshvaya on Mar 28, 2017

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

professorjoshua on Mar 27, 2017

I use absolute position for sizing -> position: absolute; top:0;left:0;right:0;bottom:0; when I need to make it 100% height.

amcdnl on Feb 2, 2017

I have a workaround, it involves storing a reference to the datatable and then setting its bodyHeight:

import { Component, ViewChild, AfterViewInit } from "@angular/core";
import { DatatableComponent } from "@swimlane/ngx-datatable";

@Component({...})
export class MyComponent implements AfterViewInit {
  @ViewChild(DatatableComponent) table: DatatableComponent;
  ngAfterViewInit() {
        this.table.bodyHeight = 400;
    }
}

That seemed to work though the scrolling looks strange because it flies through 10 items which don’t get rendered. So I’m not sure if that’s the correct behaviour but this confirms that the height of the element is incorrect, which propagates to the bodyHeight component input.

ghost on Feb 2, 2017

I think it’d be nice if this workaround position: absolute; top:0;left:0;right:0;bottom:0; by @amcdnl is mentioned in the example. I spent about two days figuring out. 😃

thomedw on Nov 30, 2017

Me too. But me on desktop my ngxdatable have 100% in height correctly but in iphone table is tooo small ! Weird

elvisbegovic on Feb 1, 2017