[英]How to use the search filter from outside the table?
I am working withantd table.我正在使用antd表。 Is there a way I could add a search filter outside the table and still search in the table?
有没有办法可以在表外添加搜索过滤器并仍然在表中搜索?
I added an input field just above the table.我在表格上方添加了一个输入字段。 But I cannot understand how I could link this to the search functionality available with
antd
.但我无法理解如何将其链接到
antd
可用的搜索功能。 I have also added the search filters for each column but also want to have a separate field outside.我还为每列添加了搜索过滤器,但也希望在外面有一个单独的字段。 The column filters work fine.
列过滤器工作正常。
For easier reference, I am also pasting the demo code here:为了便于参考,我还将演示代码粘贴到此处:
import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Table, Input, Button, Icon } from "antd";
import Highlighter from "react-highlight-words";
const data = [
{
key: "1",
name: "John Brown",
age: 32,
address: "New York No. 1 Lake Park"
},
{
key: "2",
name: "Joe Black",
age: 42,
address: "London No. 1 Lake Park"
},
{
key: "3",
name: "Jim Green",
age: 32,
address: "Sidney No. 1 Lake Park"
},
{
key: "4",
name: "Jim Red",
age: 32,
address: "London No. 2 Lake Park"
}
];
class App extends React.Component {
state = {
sRT: ""
};
getColumnSearchProps = dataIndex => ({
filterDropdown: ({
setSelectedKeys,
selectedKeys,
confirm,
clearFilters
}) => (
<div style={{ padding: 8 }}>
<Input
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" }}
/>
</div>
),
filterIcon: filtered => (
<Icon type="search" style={{ color: filtered ? "#1890ff" : undefined }} />
),
onFilter: (value, record) =>
record[dataIndex]
.toString()
.toLowerCase()
.includes(value.toLowerCase()),
onFilterDropdownVisibleChange: visible => {
if (visible) {
setTimeout(() => this.searchInput.select());
}
},
render: text => (
<Highlighter
highlightStyle={{ backgroundColor: "#ffc069", padding: 0 }}
searchWords={[this.state.sRT]}
autoEscape
textToHighlight={text.toString()}
/>
)
});
handleSearch = (selectedKeys, confirm) => {
confirm();
this.setState({ sRT: selectedKeys[0] });
};
handleReset = clearFilters => {
clearFilters();
this.setState({ sRT: "" });
};
render() {
const columns = [
{
title: "Name",
dataIndex: "name",
key: "name",
width: "30%",
...this.getColumnSearchProps("name")
},
{
title: "Age",
dataIndex: "age",
key: "age",
width: "20%",
...this.getColumnSearchProps("age")
},
{
title: "Address",
dataIndex: "address",
key: "address",
...this.getColumnSearchProps("address")
}
];
return (
<div>
<Input type="text" placeholder="search" />
<Table columns={columns} dataSource={data} />;
<br />
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById("container"));
You need to add additional states:您需要添加其他状态:
dataSource
dataSource
Input
value: nameSearch
Input
值的状态: nameSearch
state = {
sRT: "",
dataSource: data,
nameSearch: ""
};
Supply dataSource
to Table
component when filtering is made:进行过滤时向
Table
组件提供dataSource
:
// Filtered data
<Table columns={columns} dataSource={this.state.dataSource} />
What's left to do is adding the filter component, here is an example for three basic antd
components:剩下要做的就是添加过滤器组件,这里是三个基本
antd
组件的示例:
AutoComplete
Input.Search
AutoComplete
with Input.Search
Input.Search
AutoComplete
<>
<Row>
<Table columns={columns} dataSource={this.state.dataSource} />
</Row>
<Row type="flex" gutter={10} style={{ marginBottom: 10 }}>
<Col>
<Typography>Name Auto Complete</Typography>
</Col>
<Col>
<AutoComplete
dataSource={data.map(person => person.name)}
onChange={nameSearch =>
this.setState({
dataSource: data.filter(person => person.name.includes(nameSearch))
})
}
allowClear
/>
</Col>
</Row>
<Row type="flex" gutter={10} style={{ marginBottom: 10 }}>
<Col>
<Typography>Name Search</Typography>
</Col>
<Col>
<Input.Search
allowClear
onSearch={nameSearch =>
this.setState({
dataSource: data.filter(person => person.name.includes(nameSearch))
})
}
/>
</Col>
</Row>
<Row type="flex" gutter={10}>
<Col>
<Typography>Auto Complete Search</Typography>
</Col>
<Col>
<AutoComplete dataSource={data.map(person => person.name)}>
<Input.Search
allowClear
onSearch={nameSearch =>
this.setState({
dataSource: data.filter(person =>
person.name.includes(nameSearch)
)
})
}
/>
</AutoComplete>
</Col>
</Row>
</>;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.