CODEWITHSUNDEEP
angularprimeng
mindparse
mindparse

Reputation: 7225

Table with virtual scroll and flex scroll not rendering rows

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.

Upvotes: 3

Views: 3112

Answers (4)

luiscla27
luiscla27

Reputation: 6419

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>

Upvotes: 0

pathe.kiran
pathe.kiran

Reputation: 2484

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>

Upvotes: 1

paranaaan
paranaaan

Reputation: 1735

Seem like primeng v.12.2.2 has missing some CSS part.

I added CSS in style.css and everything fixed like charm.

stackblitz

Ref: Here is where I found the missing CSS part. (https://www.primefaces.org/primeng-v12-lts/#/table/flexscroll)

Upvotes: 1

Eliseo
Eliseo

Reputation: 57939

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

Upvotes: 1

Related Questions