DataTable: Bad position of match mode filter menu when Portals is deactivated

[FAMSTM]

Describe the bug

By deactivating Portals with <PrimeReactProvider value={{ appendTo: "self" }} > surronding datatable, the filter match mode menu of basic filter is positionned on the top-left of the table.

I set the css with .p-column-filter-row { position: relative; }, but there are 2 problems:

• with few rows in the table, the end of the menu is hidden after the wrapper's bottom border
• with resizableColumns={true}, after resizing the column, the menu disappears behind tbody

How can I have Portals deactivated and the menu with the same behavior as when Portals is activated?

Reproducer

https://codesandbox.io/s/primereact-demo-forked-w4rswy?file=/src/App.js:6580-6596

PrimeReact version

10.0.9

React version

17.x

Language

TypeScript

Build / Runtime

Create React App (CRA)

Browser(s)

Chrome 118

Steps to reproduce the behavior

1. Go in https://codesandbox.io/s/primereact-demo-forked-w4rswy?file=/src/App.js:6580-6596
2. Click on the filter button of a column => the menu is on the top-left
3. Uncomment .p-column-filter-row { position: relative; } l. 22->24 in style.css and click on the filter button of a column => the bottom of the menu is hidden
4. Uncomment resizableColumns l. 233 in App.js and click on the filter button of a column => the menu is hidden behind tbody

Expected behavior

The filter menu should be correctly displayed when Portals is deactivated

[kl-nevermore]

Q1: maybe set height and scroll or appendto another element

Q2:

/* Resizable */
    .p-datatable-resizable-table > .p-datatable-thead > tr > th,
    .p-datatable-resizable-table > .p-datatable-tfoot > tr > td,
    .p-datatable-resizable-table > .p-datatable-tbody > tr > td {
        overflow: hidden; // this code,but not sure what the problem would be with canceling
        white-space: nowrap;
    }

[arnodemer]

Hi, having same kind of issue with position absolute/relative since moved to primereact v10. It seems that issue comes from css & inline style element from p-datatable-wrapper. We tried to use passThrough ('initial' value was used for wrapper by primereact v7) :

<DataTable
   {...tableProps}
   pt={{ wrapper: { style: { overflow: 'initial' } } }}
   />

It seems to solve the overflow issue, but not sure this have others unexpected side effect (on table scroll ?). Hope this can help.