Fix Table column.filteredValue null problem, ref #4550

components/table/Table.tsx

@@ -294,7 +294,7 @@ export default class Table<T> extends React.Component<TableProps<T>, any> {
   }
 
   getFilteredValueColumns(columns?) {
-    return (columns || this.columns || []).filter(column => column.filteredValue);
+    return (columns || this.columns || []).filter(column => typeof column.filteredValue !== 'undefined');
   }
 
   getFiltersFromColumns(columns?) {

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

@@ -128,6 +128,22 @@ describe('Table.filter', () => {
     expect(wrapper.find('tbody tr').length).toBe(4);
   });
 
+  it('can be controlled by filteredValue null', () => {
+    const wrapper = mount(createTable({
+      columns: [{
+        ...column,
+        filteredValue: ['girl'],
+      }],
+    }));
+
+    expect(wrapper.find('tbody tr').length).toBe(1);
+    wrapper.setProps({ columns: [{
+      ...column,
+      filteredValue: null,
+    }] });
+    expect(wrapper.find('tbody tr').length).toBe(4);
+  });
+
   it('fires change event', () => {
     const handleChange = jest.fn();
     const wrapper = mount(createTable({ onChange: handleChange }));

components/table/__tests__/__snapshots__/demo.test.js.snap

@@ -6908,18 +6908,27 @@ exports[`test renders ./components/table/demo/reset-filter.md correctly 1`] = `
 <div>
   <div
     class="table-operations">
-    <a
+    <button
-      href="#">
+      class="ant-btn ant-btn-ghost"
-      Age descending order
+      type="button">
-    </a>
+      <span>
-    <a
+        Sort age
-      href="#">
+      </span>
-      Clear filters
+    </button>
-    </a>
+    <button
-    <a
+      class="ant-btn ant-btn-ghost"
-      href="#">
+      type="button">
-      Clear filters and sorting
+      <span>
-    </a>
+        Clear filters
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-ghost"
+      type="button">
+      <span>
+        Clear filters and sorters
+      </span>
+    </button>
   </div>
   <div
     class=" clearfix">

components/table/demo/reset-filter.md

@@ -22,7 +22,7 @@ Control filters and sorters by `filteredValue` and `sortOrder`.
 > 3. `column.key` is required.
 
 ````jsx
-import { Table } from 'antd';
+import { Table, Button } from 'antd';
 
 const data = [{
   key: '1',
@@ -60,19 +60,16 @@ const App = React.createClass({
       sortedInfo: sorter,
     });
   },
-  clearFilters(e) {
+  clearFilters() {
-    e.preventDefault();
     this.setState({ filteredInfo: null });
   },
-  clearAll(e) {
+  clearAll() {
-    e.preventDefault();
     this.setState({
       filteredInfo: null,
       sortedInfo: null,
     });
   },
-  setAgeSort(e) {
+  setAgeSort() {
-    e.preventDefault();
     this.setState({
       sortedInfo: {
         order: 'descend',
@@ -92,7 +89,7 @@ const App = React.createClass({
         { text: 'Joe', value: 'Joe' },
         { text: 'Jim', value: 'Jim' },
       ],
-      filteredValue: filteredInfo.name,
+      filteredValue: filteredInfo.name || null,
       onFilter: (value, record) => record.name.includes(value),
       sorter: (a, b) => a.name.length - b.name.length,
       sortOrder: sortedInfo.columnKey === 'name' && sortedInfo.order,
@@ -110,7 +107,7 @@ const App = React.createClass({
         { text: 'London', value: 'London' },
         { text: 'New York', value: 'New York' },
       ],
-      filteredValue: filteredInfo.address,
+      filteredValue: filteredInfo.address || null,
       onFilter: (value, record) => record.address.includes(value),
       sorter: (a, b) => a.address.length - b.address.length,
       sortOrder: sortedInfo.columnKey === 'address' && sortedInfo.order,
@@ -118,9 +115,9 @@ const App = React.createClass({
     return (
       <div>
         <div className="table-operations">
-          <a href="#" onClick={this.setAgeSort}>Age descending order</a>
+          <Button type="ghost" onClick={this.setAgeSort}>Sort age</Button>
-          <a href="#" onClick={this.clearFilters}>Clear filters</a>
+          <Button type="ghost" onClick={this.clearFilters}>Clear filters</Button>
-          <a href="#" onClick={this.clearAll}>Clear filters and sorting</a>
+          <Button type="ghost" onClick={this.clearAll}>Clear filters and sorters</Button>
         </div>
         <Table columns={columns} dataSource={data} onChange={this.handleChange} />
       </div>
@@ -133,12 +130,10 @@ ReactDOM.render(<App />, mountNode);
 
 ````css
 .table-operations {
-  font-size: 12px;
-  text-align: right;
   margin-bottom: 16px;
 }
 
-.table-operations a {
+.table-operations > button {
-  margin-left: 8px;
+  margin-right: 8px;
 }
 ````