PrimeNG - p-dataTable height set by number of rows

Question

I'm trying to find a solution to fix the dataTable height.

The table has pagination added. Changing the page to the second page where the number of rows are lower as on initial page (in our case first page) the dataTable height will be changed.

Answer 1

For me it worked with the following css statement:

::ng-deep .ui-datatable-scrollable-view .ui-datatable-scrollable-body {
    min-height: 400px;
    border: 1px solid #D5D5D5;
}

::ng-deep targets inside the primeNg element < p-dataTable > . The min-height: 0px of the ui-datatable-scrollable-body class will be overwritten by your desired min-height.

Two css selectors are used instead of one to increase the css selector's specificity.

I created the following plunker that illustrates how it works.

https://plnkr.co/edit/8cFrCY?p=preview