|
Age
+
+
+
|
@@ -1120,17 +1141,35 @@ exports[`renders ./components/table/demo/custom-filter-panel.md correctly 1`] =
class="ant-table-row-indent indent-level-0"
style="padding-left:0px"
/>
- John Brown
-
- |
- 32
+
+
+ John Brown
+
+
|
- New York No. 1 Lake Park
+
+
+ 32
+
+
+ |
+
+
+
+ New York No. 1 Lake Park
+
+
|
|
- Joe Black
-
-
- 42
+
+
+ Joe Black
+
+
|
- London No. 1 Lake Park
+
+
+ 42
+
+
+ |
+
+
+
+ London No. 1 Lake Park
+
+
|
|
- Jim Green
-
-
- 32
+
+
+ Jim Green
+
+
|
- Sidney No. 1 Lake Park
+
+
+ 32
+
+
+ |
+
+
+
+ Sidney No. 1 Lake Park
+
+
|
|
- Jim Red
-
-
- 32
+
+
+ Jim Red
+
+
|
- London No. 2 Lake Park
+
+
+ 32
+
+
+ |
+
+
+
+ London No. 2 Lake Park
+
+
|
diff --git a/components/table/demo/custom-filter-panel.md b/components/table/demo/custom-filter-panel.md
index d01544c393..e63d07483a 100644
--- a/components/table/demo/custom-filter-panel.md
+++ b/components/table/demo/custom-filter-panel.md
@@ -17,6 +17,7 @@ Implement a customized column search example via `filterDropdown`.
import {
Table, Input, Button, Icon,
} from 'antd';
+import Highlighter from 'react-highlight-words';
const data = [{
key: '1',
@@ -45,12 +46,60 @@ class App extends React.Component {
searchText: '',
};
- handleSearch = (selectedKeys, confirm) => () => {
+ getColumnSearchProps = (dataIndex) => ({
+ filterDropdown: ({
+ setSelectedKeys, selectedKeys, confirm, clearFilters,
+ }) => (
+
+ { this.searchInput = node; }}
+ placeholder={`Search ${dataIndex}`}
+ value={selectedKeys[0]}
+ onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
+ onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
+ style={{ width: 188, marginBottom: 8, display: 'block' }}
+ />
+
+
+
+ ),
+ filterIcon: filtered => ,
+ onFilter: (value, record) => record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
+ onFilterDropdownVisibleChange: (visible) => {
+ if (visible) {
+ setTimeout(() => this.searchInput.select());
+ }
+ },
+ render: (text) => (
+
+ ),
+ })
+
+ handleSearch = (selectedKeys, confirm) => {
confirm();
this.setState({ searchText: selectedKeys[0] });
}
- handleReset = clearFilters => () => {
+ handleReset = (clearFilters) => {
clearFilters();
this.setState({ searchText: '' });
}
@@ -60,57 +109,19 @@ class App extends React.Component {
title: 'Name',
dataIndex: 'name',
key: 'name',
- filterDropdown: ({
- setSelectedKeys, selectedKeys, confirm, clearFilters,
- }) => (
-
- this.searchInput = ele}
- placeholder="Search name"
- value={selectedKeys[0]}
- onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
- onPressEnter={this.handleSearch(selectedKeys, confirm)}
- />
-
-
-
- ),
- filterIcon: filtered => ,
- onFilter: (value, record) => record.name.toLowerCase().includes(value.toLowerCase()),
- onFilterDropdownVisibleChange: (visible) => {
- if (visible) {
- setTimeout(() => {
- this.searchInput.focus();
- });
- }
- },
- render: (text) => {
- const { searchText } = this.state;
- return searchText ? (
-
- {text.split(new RegExp(`(${searchText})`, 'gi')).map((fragment, i) => (
- fragment.toLowerCase() === searchText.toLowerCase()
- ? {fragment} : fragment // eslint-disable-line
- ))}
-
- ) : text;
- },
+ width: '30%',
+ ...this.getColumnSearchProps('name'),
}, {
title: 'Age',
dataIndex: 'age',
key: 'age',
+ width: '20%',
+ ...this.getColumnSearchProps('age'),
}, {
title: 'Address',
dataIndex: 'address',
key: 'address',
- filters: [{
- text: 'London',
- value: 'London',
- }, {
- text: 'New York',
- value: 'New York',
- }],
- onFilter: (value, record) => record.address.indexOf(value) === 0,
+ ...this.getColumnSearchProps('address'),
}];
return ;
}
@@ -122,21 +133,8 @@ ReactDOM.render(, mountNode);
````css
.custom-filter-dropdown {
padding: 8px;
- border-radius: 6px;
+ border-radius: 4px;
background: #fff;
- box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
-}
-
-.custom-filter-dropdown input {
- width: 130px;
- margin-right: 8px;
-}
-
-.custom-filter-dropdown button {
- margin-right: 8px;
-}
-
-.highlight {
- color: #f50;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
````
diff --git a/package.json b/package.json
index 65c7c989b4..fe48c5edf7 100644
--- a/package.json
+++ b/package.json
@@ -156,6 +156,7 @@
"react-document-title": "^2.0.3",
"react-dom": "^16.5.2",
"react-github-button": "^0.1.11",
+ "react-highlight-words": "^0.14.0",
"react-infinite-scroller": "^1.2.1",
"react-intl": "^2.7.0",
"react-resizable": "^1.7.5",