Fix table filter menu overflow issue, close #6245

components/table/SelectionCheckboxAll.tsx

@@ -22,6 +22,7 @@ export interface SelectionCheckboxAllProps {
   prefixCls: string | undefined;
   onSelect: (key: string, index: number, selectFunc: any) => void;
   selections?: SelectionDecorator[] | boolean;
+  getPopupContainer: (triggerNode?: Element) => HTMLElement;
 }
 
 export default class SelectionCheckboxAll extends React.Component<SelectionCheckboxAllProps, any> {
@@ -152,7 +153,7 @@ export default class SelectionCheckboxAll extends React.Component<SelectionCheck
   }
 
   render() {
-    const { disabled, prefixCls, selections } = this.props;
+    const { disabled, prefixCls, selections, getPopupContainer } = this.props;
     const { checked, indeterminate } = this.state;
 
     let selectionPrefixCls = `${prefixCls}-selection`;
@@ -175,7 +176,7 @@ export default class SelectionCheckboxAll extends React.Component<SelectionCheck
       customSelections =  (
         <Dropdown
           overlay={menu}
-          getPopupContainer={(trigger: HTMLElement) => trigger.parentNode as HTMLElement}
+          getPopupContainer={getPopupContainer}
         >
           <div className={`${selectionPrefixCls}-down`}>
             <Icon type="down" />

components/table/Table.tsx

@@ -143,6 +143,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
   CheckboxPropsCache: Object;
   store: Store;
   columns: ColumnProps<T>[];
+  tableWrapperNode: HTMLElement;
 
   constructor(props) {
     super(props);
@@ -615,6 +616,10 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     return recordKey === undefined ? index : recordKey;
   }
 
+  getPopupContainer = () => {
+    return this.tableWrapperNode as HTMLElement;
+  }
+
   renderRowSelection() {
     const { prefixCls, rowSelection } = this.props;
     const columns = this.columns.concat();
@@ -646,6 +651,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
             prefixCls={prefixCls}
             onSelect={this.handleSelectRow}
             selections={rowSelection.selections}
+            getPopupContainer={this.getPopupContainer}
           />
         );
       }
@@ -700,6 +706,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
             confirmFilter={this.handleFilter}
             prefixCls={`${prefixCls}-filter`}
             dropdownPrefixCls={dropdownPrefixCls || 'ant-dropdown'}
+            getPopupContainer={this.getPopupContainer}
           />
         );
       }
@@ -939,7 +946,11 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
     }
 
     return (
-      <div className={classNames(`${prefixCls}-wrapper`, className)} style={style}>
+      <div
+        className={classNames(`${prefixCls}-wrapper`, className)}
+        style={style}
+        ref={node => { this.tableWrapperNode = node; }}
+      >
         <Spin
           {...loading}
           className={loading ? `${paginationPatchClass} ${prefixCls}-spin-holder` : ''}

components/table/filterDropdown.tsx

@@ -24,6 +24,7 @@ export interface FilterMenuProps {
   confirmFilter: (column: Object, selectedKeys: string[]) => any;
   prefixCls: string;
   dropdownPrefixCls: string;
+  getPopupContainer: (triggerNode?: Element) => HTMLElement;
 }
 
 export default class FilterMenu extends React.Component<FilterMenuProps, any> {
@@ -182,7 +183,7 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
     }) : <Icon title={locale.filterTitle} type="filter" className={dropdownSelectedClass} />;
   }
   render() {
-    const { column, locale, prefixCls, dropdownPrefixCls } = this.props;
+    const { column, locale, prefixCls, dropdownPrefixCls, getPopupContainer } = this.props;
     // default multiple selection in filter dropdown
     const multiple = ('filterMultiple' in column) ? column.filterMultiple : true;
     const dropdownMenuClass = classNames({
@@ -228,7 +229,7 @@ export default class FilterMenu extends React.Component<FilterMenuProps, any> {
         overlay={menus}
         visible={this.neverShown ? false : this.state.visible}
         onVisibleChange={this.onVisibleChange}
-        getPopupContainer={triggerNode => triggerNode.parentNode as HTMLElement}
+        getPopupContainer={getPopupContainer}
       >
         {this.renderFilterIcon()}
       </Dropdown>