-
Notifications
You must be signed in to change notification settings - Fork 40
/
filter search react datatable
84 lines (77 loc) · 2.45 KB
/
filter search react datatable
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
import React, { useState, useEffect } from "react";
import { Container } from "react-bootstrap";
function Search() {
const [allcountry, setAllcountry] = useState([]);
const [filterresult, setFilterresult] = useState([]);
const [serachcountry, setSearchcountry] = useState("");
const handlesearch = (event) => {
const search = event.target.value;
console.log(search);
setSearchcountry(search);
if (search !== "") {
const filterdata = allcountry.filter((item) => {
return Object.values(item)
.join("")
.toLowerCase()
.includes(search.toLowerCase());
});
setFilterresult(filterdata);
} else {
setFilterresult(allcountry);
}
};
useEffect(() => {
const getcountry = async () => {
const getres = await fetch("http://localhost/devopsdeveloper/country");
const setcounty = await getres.json();
//console.log(setcounty);
setAllcountry(await setcounty);
};
getcountry();
}, []);
return (
<React.Fragment>
<Container>
<div className="row fthight">
<div className="col-md-6 mb-3 mt-3">
<input
type="text"
className="form-control"
placeholder="Enter Keyword"
onChange={(e) => {
handlesearch(e);
}}
/>
<table className="table " style={{ color: "#fff" }}>
<thead>
<tr>
<th>Sr. No </th>
<th>Country Codeo</th>
<th>Country Name</th>
</tr>
</thead>
<tbody>
{serachcountry.length > 1
? filterresult.map((filtercountry, index) => (
<tr key={index}>
<td> {filtercountry.country_id} </td>
<td> {filtercountry.sortname} </td>
<td> {filtercountry.country_name} </td>
</tr>
))
: allcountry.map((getcon, index) => (
<tr key={index}>
<td> {getcon.country_id} </td>
<td> {getcon.sortname} </td>
<td> {getcon.country_name} </td>
</tr>
))}
</tbody>
</table>
</div>
</div>
</Container>
</React.Fragment>
);
}
export default Search;