Fix table filter in JSX (#4765)

Fix #4759

components/table/Table.tsx

@@ -194,6 +194,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
   }
 
   componentWillReceiveProps(nextProps) {
+    this.columns = nextProps.columns || normalizeColumns(nextProps.children);
     if ('pagination' in nextProps || 'pagination' in this.props) {
       this.setState(previousState => {
         const newPagination = assign({}, defaultPagination, previousState.pagination, nextProps.pagination);
@@ -222,17 +223,17 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
       this.CheckboxPropsCache = {};
     }
 
-    if (this.getSortOrderColumns(nextProps.columns).length > 0) {
-      const sortState = this.getSortStateFromColumns(nextProps.columns);
+    if (this.getSortOrderColumns(this.columns).length > 0) {
+      const sortState = this.getSortStateFromColumns(this.columns);
       if (sortState.sortColumn !== this.state.sortColumn ||
           sortState.sortOrder !== this.state.sortOrder) {
         this.setState(sortState);
       }
     }
 
-    const filteredValueColumns = this.getFilteredValueColumns(nextProps.columns);
+    const filteredValueColumns = this.getFilteredValueColumns(this.columns);
     if (filteredValueColumns.length > 0) {
-      const filtersFromColumns = this.getFiltersFromColumns(nextProps.columns);
+      const filtersFromColumns = this.getFiltersFromColumns(this.columns);
       const newFilters = assign({}, this.state.filters);
       Object.keys(filtersFromColumns).forEach(key => {
         newFilters[key] = filtersFromColumns[key];
@@ -241,8 +242,6 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
         this.setState({ filters: newFilters });
       }
     }
-
-    this.columns = nextProps.columns || normalizeColumns(nextProps.children);
   }
 
   setSelectedRowKeys(selectedRowKeys, { selectWay, record, checked, changeRowKeys }: any) {

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

@@ -194,4 +194,46 @@ describe('Table.filter', () => {
     dropdownWrapper.find('.confirm').simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Jack']);
   });
+
+  it('works with JSX in controlled mode', () => {
+    const { Column } = Table;
+
+    class App extends React.Component {
+      state = {
+        filters: {},
+      }
+
+      handleChange = (pagination, filters) => {
+        this.setState({ filters });
+      }
+
+      render() {
+        return (
+          <Table dataSource={data} onChange={this.handleChange}>
+            <Column
+              title="name"
+              dataIndex="name"
+              key="name"
+              filters={[
+                { text: 'Jack', value: 'Jack' },
+                { text: 'Lucy', value: 'Lucy' },
+              ]}
+              filteredValue={this.state.filters.name}
+              onFilter={filterFn}
+            />
+          </Table>
+        );
+      }
+    }
+
+    const wrapper = mount(<App />);
+    const dropdownWrapper = mount(wrapper.find('Trigger').node.getComponent());
+
+    dropdownWrapper.find('MenuItem').first().simulate('click');
+    dropdownWrapper.find('.confirm').simulate('click');
+    expect(renderedNames(wrapper)).toEqual(['Jack']);
+
+    dropdownWrapper.find('.clear').simulate('click');
+    expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
+  });
 });