0

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 ?

Neamesis
  • 704
  • 1
  • 13
  • 28

1 Answers1

0

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
  }">
El Fadel Anas
  • 1,581
  • 2
  • 18
  • 25
  • Sorry it does not work, I can't override the css of prime ng with your solution. Scrollheight is not a style property I think. Or I don't know how to convert it in CSS... I've stried in the css ```height: 200px``` or ```scrollheight: 200px``` , it does not work – Neamesis Jul 26 '18 at 12:47
  • the css that you should use is: height: 200px; overflow: overlay; – El Fadel Anas Jul 26 '18 at 15:10
  • Neither. My datatable does not re render, and the components below the table goes above (on ?) the table. It gives me headache I don't know how to proceed T_T – Neamesis Jul 26 '18 at 15:33