Angular 4 + Primeng (datatable) : custom scrollHeight property

Question

I'm a beginner working on an app built with Jhipster, using Angular 4.3 and PrimeNg.

I've a table (datatable, because turbotable is since Angular 5). I would like to customise the scrollHeight property according to a boolean in order to have a bigger table if my boolean is true, smaller if my boolean is false.

* Here is my HTML which works *

<p-dataTable [value]="objects" scrollable="true" scrollHeight="200px" emptyMessage="" [loading]="loading">
     <p-column field="name" header="Name" [sortable]="true"></p-column>
... other columns
</p-dataTable>

But I have a button which extends a part of my screen, so I would like my scrollHeight becoming : scrollHeight="400px"

* Button code *

<div class="col col-lg-12">
    <div class="row text-center" style="padding: 10px">
        <div class="col-lg">
            <button type="button" class="btn btn-default" data-dismiss="modal" (click)="extendOrReduceTheTop()">
                <span [ngClass]="{'fa-caret-up': extend, 'fa-caret-down': !extend}" class="fa"></span>&nbsp;
            </button>
        </div>
    </div>
</div>

* TS BUTTON *

extendOrReduceTheTop() {
    this.extend = !this.extend;
}

The official documentation is here : Documentation scroll on datatable

I've read the doc, tried several personalized solutions, but none of them work :

<p-dataTable [value]="objects" scrollable="true" [ngStyle]="{'scrollHeight': extend ? '400px' : '200px'}" emptyMessage="" [loading]="loading">

<p-dataTable [value]="objects" scrollable="true" [scrollHeight]="{extend ? '400px' : '200px'}" emptyMessage="" [loading]="loading">

This one with the value changed in ts (but the table is not re rendered so... It's useless:

<p-dataTable #tableCara [value]="aeroportsCaract" scrollable="true" [scrollHeight]="scrollheight" emptyMessage="" [loading]="loading">

Does anyone have an idea ?

El Fadel Anas El Fadel Anas · Accepted Answer · 2018-07-26T10:17:35

You can try this :

In your css component file :

.small-table{
  /** your css **/
}

.big-table{
  /** your css **/
}

In your html component file :

<p-dataTable [value]="objects" scrollable="true" [ngClass]="{
    'small-table':extend === false,
    'big-table':extend
  }">

Angular 4 + Primeng (datatable) : custom scrollHeight property

1 Answers