- I have searched the issues of this repository and believe that this is not a duplicate.
Reproduction link
Steps to reproduce
- Create table with sticky header and a filter in one of the columns
- Click on filter icon in the column with filter
- 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:
6条答案
按热度按时间xhv8bpkk1#
https://github.com/react-component/table/pull/410/files#diff-5136c989c296c26b5ee1d8662fbfd58d269e40e67a6f02b35f55442ab4835c3bR535
@shaodahong Could we remove
overflow: hiddenwhen there is no horizontal scroll bar in table header?polhcujo2#
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.
9o685dep3#
https://github.com/react-component/table/pull/410/files#diff-5136c989c296c26b5ee1d8662fbfd58d269e40e67a6f02b35f55442ab4835c3bR535
Could we remove
overflow: hiddenwhen there is no horizontal scroll bar in table header?It's broken when set scroll
xandy, https://table.react-component.now.sh/demo/scroll-xyqv7cva1a4#
Also noticing the same issue when a dropdown appears in an open drawer and you scroll the page down
2skhul335#
@ZLester There's another issue for the drawer here
3z6pesqy6#
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 anidto the table, then use the
getPopupContainerprop 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!