Table with virtual scroll and flex scroll not rendering rows

user_726965 0
Viewed 789

I am having trouble getting virtual scrolling working on a table using Flex Scroll with scrollHeight='flex'

I have an outer element set with a fixed height like so:

<div style="height: 800px">
    <h5>Virtual Scroll with Preloaded Data (1000 Rows)</h5>
    <p-table
      [columns]="cols"
      [value]="cars"
      [scrollable]="true"
      [rows]="100"
      scrollHeight="flex"
      [virtualScroll]="true"
      [virtualRowHeight]="34"
    >
    ...
    </p-table>
</div>

You can see this in action here

Changing the scrollHeight to a fixed px height works no problem, but I really need this to fill whatever space is available.

Note that I need this behaving in v12 of primeng too.

primeng angular
4 Answers

I don't know about prime-p, but if it's neccessary indicate a fixed height I imagine you can use a variable

Or better use fromEvent(window,'resize') as observable

Declare in your component.ts

height$=fromEvent(window,'resize').pipe(
      startWith(null),
      map(_=>(window.innerHeight-50)+'px'))

(I substract 50px form the window.innerHeight)

And use

<p-table [scrollHeight]="height$|async" ...>
...
</p-table>

a stackblitz

user_85581860
user_116343810

setting scrollHeight="flex" and adding height to parent is working fine with primeng v12.2.3
stackblitz with prime-ng 13.
stackblitz with prime-ng 12

<div style="height: 200px;">
    <p-table
        [columns]="cols"
        [value]="virtualCars"
        [scrollable]="true"
        [rows]="100"
        scrollHeight="flex"
        [virtualScroll]="true"
        [virtualRowHeight]="34"
        [lazy]="true"
        (onLazyLoad)="loadCarsLazy($event)">
   </p-table>
</div>
user_25309510

You can keep your scrollHeight to flex and just set your container height to the vertical window height (so it'll fill whatever space is available)

A solution, might be to set it to calc(100vh - 150px), I've fixed your stackblitz example and I think now it works as you expect:

<!-- only relevant changes -->
<div style="height: calc(100vh - 150px)">
  ...
  <p-table scrollHeight="flex" ...>
      ...
  <p-table>
</div>
user_16574650
Related