p-table scrollHeight="flex" requires virtualScroll in flex layout

[remackgeek]

I'm submitting a ... (check one with "x")

[x ] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Current behavior

In a pure flex layout, where the p-table containing element has no fixed size, just something like "flex:1", setting scrollHeight="flex" does not set scrolling on the body, renders all the rows.

For an example, see : this stackblitz

Adding [virtualScroll]="true" causes the table to scroll correctly, see: this this stackblitz

Expected behavior

A scrollable table with fixed data should not require virtualScroll in a flex layout to properly size to the parent container

Minimal reproduction of the problem with instructions
see this stackblitz

What is the motivation / use case for changing the behavior?

requiring virtualScroll for fixed data complicates sorting and searching

Please tell us about your environment:

• Angular version: 9.x

• PrimeNG version: 9.1.3

• Browser: [Chrome ]

[chetakagrawal]

I am seeing the same problem. Do we have an update on this issue?

[vds-simon-lapointe]

We have this problem as well. I'd like an update as well.

[PotatoesMaster]

I have a workaround in place for this problem (I am using Angular 12 and PrimeNG 12, but I don't think it matters in this case).

I added a min-height to the "datatable-scrollable-wrapper" internal element of the table :

// here in root styles.(s)css
// (this could alternatively be added in a component style, in which case ng-deep is required)
.p-datatable-scrollable-wrapper {
  min-height: 0;
}

I also made sure to have a min-height on flex-sized parent elements of the table.

The scrollbar appears as expected and as needed with a p-table having [scrollable]="true" and scrollHeight="flex", without the need to enable virtual scrolling.

[spierala]

Also have this issue. It can be reproduced in primeng 12.2.1

[ErikPhilips]

The only way I've gotten it to work within other flex elements is by overriding some of the defaults:

.p-datatable-flex-scrollable .p-datatable-wrapper {
  flex-basis: auto !important;
  height: 0 !important;
}

[leonardoporro]

The only way I've gotten it to work within other flex elements is by overriding some of the defaults:

.p-datatable-flex-scrollable .p-datatable-wrapper {
  flex-basis: auto !important;
  height: 0 !important;
}

works for me, this should be added to source

[mertsincan]

Hi,

We changed our virtualScroll implementation. We designed a new scroller API instead of Angular cdk and used it in all components. So, I think this issue has already been fixed.
#11656

If the problem persists, please reopen this ticket. Thanks a lot for your understanding!

Best Regards,

[philippwaller]

@mertsincan: Thanks for the update. I am using v14.0.1 and the problem still persists. Fortunately, @leonardoporro's fix still works.

@remackgeek: I would suggest to reopening this ticket.

[buchatsky]

Really it is enough to change flex: 1; for flex: 1 1 0; in table.css for .p-datatable-flex-scrollable > .p-datatable-wrapper (v16.0.0)

[vcucchiara]

The only way I've gotten it to work within other flex elements is by overriding some of the defaults:

.p-datatable-flex-scrollable .p-datatable-wrapper {
  flex-basis: auto !important;
  height: 0 !important;
}

works for me, this should be added to source

I have been battling this for a while. This suggestion worked for me. Thx for the fix!