18.0.0-rc.2 : Table's Column Filter drop-down is cut off when it's length exceeds height of the table

[mplgn]

Describe the bug

When using a Column Filter on a Table Column, if the height of the filter's drop-down exceeds the height of the table, the drop-down (and thus filter options) get cut off.

Stackblitz link is provided below to demonstrate and reproduce this.

Works correctly (because table height is greater than height of the filter drop-down):

Broken: filtered data contains just one row, which makes the table height less than the drop-down height, and the filter items get cut off:

Environment

Angular v18 + PrimeNG 18 rc.2
macOS Sequoia
Webstorm 2024.3

Reproducer

https://stackblitz.com/edit/stackblitz-starters-87smrn?file=src%2Fapp%2Ftable-basic-demo%2Ftable-basic-demo.component.html

Angular version

18.2.0

PrimeNG version

18.0.0-rc.2

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.17.0

Browser(s)

No response

Steps to reproduce the behavior

1. Go to the Stackblitz demo
2. Click on the filter in the Category column
3. Observe all filter items are visible
4. Select the "Fitness" filter item
5. Observe only the single row in the table is now visible
6. Click on the filter in the Category column
7. Observe that the drop-down is cut off and not all filter items are visible.

Expected behavior

All filter items should be visible regardless of the height of the table.

[mehmetcetin01140]

Hi, you can resolve the issue by adding appendTo="body" to the select component. I'm closing the issue.

Example: https://stackblitz.com/edit/stackblitz-starters-gvb2bw4y?file=src%2Fapp%2Ftable-basic-demo%2Ftable-basic-demo.component.html