feat: filterIcon can be a function

components/table/__tests__/Table.filter.test.js

@@ -368,4 +368,23 @@ describe('Table.filter', () => {

    expect(handleChange).toBeCalled();
  });

  it('renders custom filter icon correctly', () => {
    const wrapper = mount(createTable({
      columns: [{
        ...column,
        filterIcon: filtered => <span>{filtered ? 'filtered' : 'unfiltered'}</span>,
      }],
    }));

    wrapper.find('.ant-dropdown-trigger').first().simulate('click');
    wrapper.find('.ant-dropdown-menu-item').first().simulate('click');
    wrapper.find('.ant-dropdown-trigger').first().simulate('click');
    expect(wrapper.find('.ant-table-filter-icon').render()).toMatchSnapshot();

    wrapper.find('.ant-dropdown-trigger').first().simulate('click');
    wrapper.find('.ant-dropdown-menu-item').first().simulate('click');
    wrapper.find('.ant-dropdown-trigger').first().simulate('click');
    expect(wrapper.find('.ant-table-filter-icon').render()).toMatchSnapshot();
  });
});

components/table/__tests__/__snapshots__/Table.filter.test.js.snap

@@ -42,6 +42,26 @@ exports[`Table.filter renders custom content correctly 1`] = `
</div>
`;

exports[`Table.filter renders custom filter icon correctly 1`] = `
<span
  class="ant-table-filter-icon ant-dropdown-trigger"
  style=""
  title="Filter menu"
>
  filtered
</span>
`;

exports[`Table.filter renders custom filter icon correctly 2`] = `
<span
  class="ant-table-filter-icon ant-dropdown-trigger"
  style=""
  title="Filter menu"
>
  unfiltered
</span>
`;

exports[`Table.filter renders filter correctly 1`] = `
<div
  class="ant-table-wrapper"

components/table/filterDropdown.tsx

@@ -169,8 +169,12 @@ export default class FilterMenu<T> extends React.Component<FilterMenuProps<T>, F

  renderFilterIcon = () => {
    const { column, locale, prefixCls } = this.props;
    const filterIcon = column.filterIcon as any;
    const dropdownSelectedClass = this.props.selectedKeys.length > 0 ? `${prefixCls}-selected` : '';
    const filterd = this.props.selectedKeys.length > 0;
    let filterIcon = column.filterIcon as any;
    if (typeof filterIcon === 'function') {
      filterIcon = filterIcon(filterd);
    }
    const dropdownSelectedClass =  filterd ? `${prefixCls}-selected` : '';

    return filterIcon ? React.cloneElement(filterIcon as any, {
      title: locale.filterTitle,

components/table/index.en-US.md

@@ -116,7 +116,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - |
| filtered | Whether the `dataSource` is filtered | boolean | `false` |
| filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - |
| filterIcon | Customized filter icon | ReactNode | `false` |
| filterIcon | Customized filter icon | ReactNode\|(filtered: boolean) => ReactNode | `false` |
| filterMultiple | Whether multiple filters can be selected | boolean | `true` |
| filters | Filter menu config | object\[] | - |
| fixed | Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean\|string | `false` |

components/table/index.zh-CN.md

@@ -116,7 +116,7 @@ const columns = [{
| filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - |
| filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false |
| filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string\[] | - |
| filterIcon | 自定义 fiter 图标。 | ReactNode | false |
| filterIcon | 自定义 filter 图标。 | ReactNode\|(filtered: boolean) => ReactNode | false |
| filterMultiple | 是否多选 | boolean | true |
| filters | 表头的筛选菜单项 | object\[] | - |
| fixed | 列是否固定，可选 `true`(等效于 left) `'left'` `'right'` | boolean\|string | false |