Add active style of filtered state

components/style/themes/default.less

@@ -344,6 +344,7 @@
 @table-header-bg: @background-color-light;
 @table-header-color: @heading-color;
 @table-header-sort-bg: @background-color-base;
+@table-body-sort-bg: rgba(0, 0, 0, .01);
 @table-row-hover-bg: @primary-1;
 @table-selected-row-bg: #fafafa;
 @table-expanded-row-bg: #fbfbfb;

components/table/filterDropdown.tsx

@@ -70,6 +70,10 @@ export default class FilterMenu<T> extends React.Component<FilterMenuProps<T>, F
     }
   }
 
+  getDropdownVisible() {
+    return this.neverShown ? false : this.state.visible;
+  }
+
   setNeverShown = (column: ColumnProps<T>) => {
     const rootNode = ReactDOM.findDOMNode(this);
     const filterBelongToScrollBody = !!closest(rootNode, `.ant-table-scroll`);
@@ -183,22 +187,27 @@ export default class FilterMenu<T> extends React.Component<FilterMenuProps<T>, F
     if (typeof filterIcon === 'function') {
       filterIcon = filterIcon(filterd);
     }
-    const dropdownSelectedClass =  filterd ? `${prefixCls}-selected` : '';
+
+    const dropdownIconClass = classNames({
+      [`${prefixCls}-selected`]: filterd,
+      [`${prefixCls}-open`]: this.getDropdownVisible(),
+    });
 
     return filterIcon ? React.cloneElement(filterIcon as any, {
       title: locale.filterTitle,
-      className: classNames(`${prefixCls}-icon`, filterIcon.props.className),
+      className: classNames(`${prefixCls}-icon`, dropdownIconClass, filterIcon.props.className),
       onClick: stopPropagation,
     }) : (
       <Icon
         title={locale.filterTitle}
         type="filter"
         theme="filled"
-        className={dropdownSelectedClass}
+        className={dropdownIconClass}
         onClick={stopPropagation}
       />
     );
   }
+
   render() {
     const { column, locale, prefixCls, dropdownPrefixCls, getPopupContainer } = this.props;
     // default multiple selection in filter dropdown
@@ -259,7 +268,7 @@ export default class FilterMenu<T> extends React.Component<FilterMenuProps<T>, F
         trigger={['click']}
         placement="bottomRight"
         overlay={menus}
-        visible={this.neverShown ? false : this.state.visible}
+        visible={this.getDropdownVisible()}
         onVisibleChange={this.onVisibleChange}
         getPopupContainer={getPopupContainer}
         forceRender

components/table/style/index.less

@@ -115,6 +115,14 @@
         }
       }
 
+      .@{iconfont-css-prefix}-filter,
+      .@{table-prefix-cls}-filter-icon {
+        &.@{table-prefix-cls}-filter-open {
+          color: @text-color-secondary;
+          background: #ebebeb;
+        }
+      }
+
       &:active {
         .@{table-prefix-cls}-column-sorter-up:not(.on),
         .@{table-prefix-cls}-column-sorter-down:not(.on) {
@@ -245,6 +253,10 @@
     background: @table-header-sort-bg;
   }
 
+  &-tbody > tr > td.@{table-prefix-cls}-column-sort {
+    background: @table-body-sort-bg;
+  }
+
   &-thead > tr > th,
   &-tbody > tr > td {
     padding: @table-padding-vertical @table-padding-horizontal;