diff --git a/components/table/Column.tsx b/components/table/Column.tsx index 6fd34100f0..36d93fc4fd 100644 --- a/components/table/Column.tsx +++ b/components/table/Column.tsx @@ -6,7 +6,7 @@ export interface ColumnProps { key?: string; dataIndex?: string; render?: (text: any, record: T, index: number) => React.ReactNode; - filters?: { text: string; value: string }[]; + filters?: { text: string; value: string, children?: any[] }[]; onFilter?: (value: any, record: T) => boolean; filterMultiple?: boolean; filterDropdown?: React.ReactNode; diff --git a/components/table/filterDropdown.tsx b/components/table/filterDropdown.tsx index 4e5c556d71..79a9f52b8e 100755 --- a/components/table/filterDropdown.tsx +++ b/components/table/filterDropdown.tsx @@ -1,5 +1,6 @@ import React from 'react'; import Menu, { SubMenu, Item as MenuItem } from 'rc-menu'; +import classNames from 'classnames'; import Dropdown from '../dropdown'; import Icon from '../icon'; import Checkbox from '../checkbox'; @@ -12,7 +13,7 @@ export interface FilterMenuProps { column: { filterMultiple?: boolean, filterDropdown?: React.ReactNode, - filters?: string[], + filters?: { text: string; value: string, children?: any[] }[], filterDropdownVisible?: boolean, onFilterDropdownVisibleChange?: (visible: boolean) => any, }; @@ -112,6 +113,11 @@ export default class FilterMenu extends React.Component { ); } + hasSubMenu() { + const { column: { filters = [] } } = this.props; + return filters.some(item => !!(item.children && item.children.length > 0)); + } + renderMenus(items) { return items.map(item => { if (item.children && item.children.length > 0) { @@ -149,6 +155,9 @@ export default class FilterMenu extends React.Component { const { column, locale, prefixCls, dropdownPrefixCls } = this.props; // default multiple selection in filter dropdown const multiple = ('filterMultiple' in column) ? column.filterMultiple : true; + const dropdownMenuClass = classNames({ + [`${dropdownPrefixCls}-menu-without-submenu`]: !this.hasSubMenu(), + }); const menus = column.filterDropdown ? ( {column.filterDropdown} @@ -159,6 +168,7 @@ export default class FilterMenu extends React.Component { multiple={multiple} onClick={this.handleMenuItemClick} prefixCls={`${dropdownPrefixCls}-menu`} + className={dropdownMenuClass} onSelect={this.setSelectedKeys} onDeselect={this.setSelectedKeys} selectedKeys={this.state.selectedKeys} diff --git a/components/table/style/index.less b/components/table/style/index.less index f69789a579..e0871de227 100644 --- a/components/table/style/index.less +++ b/components/table/style/index.less @@ -373,8 +373,12 @@ border: 0; box-shadow: none; border-radius: @border-radius-base @border-radius-base 0 0; - max-height: 400px; - overflow-x: hidden; + + // https://github.com/ant-design/ant-design/issues/4916 + &-without-submenu { + max-height: 400px; + overflow-x: hidden; + } &-item > label + span { padding: 0;