diff --git a/components/table/Table.tsx b/components/table/Table.tsx index ce0c5c5478..9f7b1d7b37 100755 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -294,7 +294,7 @@ export default class Table extends React.Component, any> { } getFilteredValueColumns(columns?) { - return (columns || this.columns || []).filter(column => column.filteredValue); + return (columns || this.columns || []).filter(column => typeof column.filteredValue !== 'undefined'); } getFiltersFromColumns(columns?) { diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js index 49ca3970fb..1517ba5fca 100644 --- a/components/table/__tests__/Table.filter.test.js +++ b/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 })); diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap index f0f4668983..d596ea15dd 100644 --- a/components/table/__tests__/__snapshots__/demo.test.js.snap +++ b/components/table/__tests__/__snapshots__/demo.test.js.snap @@ -6908,18 +6908,27 @@ exports[`test renders ./components/table/demo/reset-filter.md correctly 1`] = `
- - Age descending order - - - Clear filters - - - Clear filters and sorting - + + +
diff --git a/components/table/demo/reset-filter.md b/components/table/demo/reset-filter.md index 88b0131b34..69f61287a8 100644 --- a/components/table/demo/reset-filter.md +++ b/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) { - e.preventDefault(); + clearFilters() { this.setState({ filteredInfo: null }); }, - clearAll(e) { - e.preventDefault(); + clearAll() { this.setState({ filteredInfo: null, sortedInfo: null, }); }, - setAgeSort(e) { - e.preventDefault(); + setAgeSort() { 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 (
- Age descending order - Clear filters - Clear filters and sorting + + +
@@ -133,12 +130,10 @@ ReactDOM.render(, mountNode); ````css .table-operations { - font-size: 12px; - text-align: right; margin-bottom: 16px; } -.table-operations a { - margin-left: 8px; +.table-operations > button { + margin-right: 8px; } ````