Table with sticky header: filter dropdown positions incorrectly on scroll

[nekitk]

• I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

1. Create table with sticky header and a filter in one of the columns
2. Click on filter icon in the column with filter
3. Without closing filter dropdown scroll page down so header becomes sticked to the top

What is expected?

Filter dropdown shoud be positioned under column's header

What is actually happening?

Filter dropdown moves up and away from the screen:

Environment	Info
antd	4.12.3
React	17.0.1
System	Windows 10
Browser	88.0.4324.150

---

I tried to add getPopupContainer={trigger => trigger.parentElement} to the Table, but that way filter dropdown is shown cropped inside header:

I found that adding getPopupContainer={trigger => trigger.parentElement} and setting overflow to visible on .ant-table-header is fixing it, but it breaks horizontal scrolling:

[afc163]

https://github.com/react-component/table/pull/410/files#diff-5136c989c296c26b5ee1d8662fbfd58d269e40e67a6f02b35f55442ab4835c3bR535

@shaodahong Could we remove overflow: hidden when there is no horizontal scroll bar in table header?

[nekitk]

It would be great to have ability to use sticky header and dropdown filter together with horizontal scroll if possible. We use all of these features together on mobile.

[shaodahong]

https://github.com/react-component/table/pull/410/files#diff-5136c989c296c26b5ee1d8662fbfd58d269e40e67a6f02b35f55442ab4835c3bR535

Could we remove overflow: hidden when there is no horizontal scroll bar in table header?

It's broken when set scroll x and y, https://table.react-component.now.sh/demo/scroll-xy

[ZLester]

Also noticing the same issue when a dropdown appears in an open drawer and you scroll the page down

[desoss]

@ZLester There's another issue for the drawer here

[alenocera]

Hi all,
I've resolved in this way:

<Table id="members-table" rowKey="id" columns={columns} dataSource={[...data]} size="small" scroll={{ x: 300, y: 600 }} pagination={false} getPopupContainer={() => document.getElementById('members-table')} />

So:

assigns an id to the table, then use the getPopupContainer prop and trigger it by using the previous id.

Now the filter dropdown is "fixed" to your table and prevent scroll issue (that annoying so much).

In my case works well as expected.

Cheers!

[IgorSelin]

Are there any updates?

[afc163]

5.x is good now: https://codesandbox.io/s/ant-table-with-sticky-header-and-filter-issue-forked-jj2jjg?file=/index.js

[wjj5728]

用了一个hack的方式解决了 https://codesandbox.io/s/ant-table-with-sticky-header-and-filter-issue-forked-gcdpjw?file=/index.js