im searching for a way to easily filter and maybe sort the following table. I tried filtering it with
{data.getInteressentListing.edges.filter(node.name => node.name.includes('J')).map(({node}) => (
but that did not work. Also i need something like a search bar filtering not only the name. It should filter for all colums at the same time. Maybe you can give me some sugestions or a easy solution on this.
Thanks in advance
Daniel
Here is the code of my working simple table
import React from 'react';
import gql from 'graphql-tag';
import { Query } from 'react-apollo';
import Table from 'react-bootstrap/Table'
export const GET_POSTS = gql`
query {
getInteressentListing {
edges {
node {
id
Name
Vorname
Quelle
Artikel
Land
Ort
Tel
Mobil
EMail
URL
Whatsapp
Telegram
Notizen
Geschlecht
}
}
}
}
`;
const rowStyles = (post, canEdit) => canEdit(post)
? { cursor: 'pointer', }
: {};
const PostViewer = ({ canEdit, onEdit }) => (
<Query query={GET_POSTS}>
{({ loading, data }) => !loading && (
<Table >
<thead>
<tr>
<th>Name</th>
<th>Vorname</th>
<th>Land</th>
<th>Ort</th>
<th>Tel.</th>
<th>Mobil</th>
<th>E-Mail</th>
<th>Geschlecht</th>
</tr>
</thead>
<tbody>
{data.getInteressentListing.edges.map(({node}) => (
<tr
key={node.id}
style={rowStyles(node, canEdit)}
onClick={() => canEdit(node) && onEdit(node)}
>
<td> {node.Name} </td>
<td> {node.Vorname} </td>
<td> {node.Land} </td>
<td> {node.Ort} </td>
<td> {node.Tel} </td>
<td> {node.Mobil} </td>
<td> {node.EMail} </td>
<td> {node.Geschlecht} </td>
</tr>
))}
</tbody>
</Table>
)}
</Query>
);
PostViewer.defaultProps = {
canEdit: () => true,
onEdit: () => null,
};
export default PostViewer;
That is the format my data looks like when i get it back. it has the node inside:
{
"data": {
"getInteressentListing": {
"edges": [
{
"node": {
"id": "1294",
"Name": "Felix",
"Vorname": "Hase",
"Quelle": "Facebook",
"Artikel": "Briefe",
"Land": "Deutschland",
"Ort": "KiKaLand",
"Tel": "+49 0256/659552",
"Mobil": "01525659565",
"EMail": "felix@kika.de",
"URL": "www.felixderhase.de",
"Whatsapp": true,
"Telegram": false,
"Notizen": "Läuft im Fernsehen",
"Geschlecht": "Divers"
}
},
{
"node": {
"id": "1295",
"Name": "Daniel",
"Vorname": "Morgner",
"Quelle": "eBay-Kleinanzeigen",
"Artikel": "Omega",
"Land": "Deutschland",
"Ort": "Musterort",
"Tel": "045692582",
"Mobil": "015412,0",
"EMail": "asdasd@web.de",
"URL": "www.daniel.de",
"Whatsapp": false,
"Telegram": true,
"Notizen": "asdasd",
"Geschlecht": "Männlich"
}
},
{
"node": {
"id": "1296",
"Name": "Muster",
"Vorname": "Max",
"Quelle": "eBay-Kleinanzeigen",
"Artikel": "Musterartikel",
"Land": "Musterland",
"Ort": "Musterort",
"Tel": "+49255225488",
"Mobil": "+49536256",
"EMail": "Max@mustermann.de",
"URL": "www.mustermann.org",
"Whatsapp": true,
"Telegram": null,
"Notizen": "Hat viele Muster",
"Geschlecht": "Männlich"
}
},
{
"node": {
"id": "1297",
"Name": "",
"Vorname": "Peter",
"Quelle": null,
"Artikel": "Steine",
"Land": "Deutschland",
"Ort": "Musterort",
"Tel": "07228562345",
"Mobil": "01525654654654",
"EMail": "peter-pan@web.de",
"URL": "peter-walter.de",
"Whatsapp": null,
"Telegram": null,
"Notizen": "Verkauft Steine",
"Geschlecht": "Männlich"
}
},
{
"node": {
"id": "1298",
"Name": "Jakob",
"Vorname": "Hund",
"Quelle": null,
"Artikel": "Hundefutter",
"Land": "Traumland",
"Ort": "Bagdad",
"Tel": "0152519188723",
"Mobil": "025105153",
"EMail": "jakob@web.de",
"URL": null,
"Whatsapp": null,
"Telegram": true,
"Notizen": "Ist ein Hund",
"Geschlecht": "Männlich"
}
}
]
}
}
}
I request the data in my Query see code above
Step 1: I tried with mock data in the state
this.state = {
getInteressentListing: [
{
id: 1,
Name: "Daniel",
Vorname: "Daniel",
Land: "Germany",
Ort: "Deutschland",
Tel: "9342423434",
Mobil: "893434343434",
EMail: "Daniel@gmail.com",
Geschlecht: "Male"
},
{
id: 2,
Name: "Morgner",
Vorname: "Morgner",
Land: "Germany",
Ort: "Denmark",
Tel: "92323232344",
Mobil: "942343434344",
EMail: "Morgner@gmail.com",
Geschlecht: "Male"
},
{
id: 3,
Name: "Jeba",
Vorname: "Jeba",
Land: "India",
Ort: "Chennai",
Tel: "8777788232323",
Mobil: "923232323233",
EMail: "jeba@gmail.com",
Geschlecht: "Male"
}
],
selectedFilter: "id",
filterByText: ""
};
Step 2: Input change input to set on state
inputChange = (event) => {
const { name, value } = event.target;
this.setState({ [name]: value });
};
Step 3: Written the filter function like below inside the render method
const filteredList = this.state.getInteressentListing.filter((item) => {
if (this.state.selectedFilter && this.state.filterByText) {
if (this.state.selectedFilter === "id") {
return (
item[this.state.selectedFilter] &&
item[this.state.selectedFilter].toString() ===
this.state.filterByText.toString()
);
} else {
return (
item[this.state.selectedFilter] &&
item[this.state.selectedFilter]
.toLowerCase()
.includes(this.state.filterByText.toLowerCase())
);
}
} else {
return item;
}
});
Step 4: Finally the html template will be in render method like below,
<div className="App">
<select
name="selectedFilter"
onChange={this.inputChange}
value={this.state.selectedFilter}
>
<option disabled value="" required>
Search by
</option>
<option value="id">Id</option>
<option value="Name">Name</option>
<option value="Vorname">Vorname</option>
<option value="Land">Land</option>
<option value="Ort">Ort</option>
<option value="Tel">Tel</option>
<option value="Mobile">Mobile</option>
<option value="EMail">EMail</option>
<option value="Geschlecht">Geschlecht</option>
</select>
<input
value={this.state.filterByText}
name="filterByText"
onChange={(e) => {
this.inputChange(e);
}}
placeholder="Type here..."
/>
<table>
<thead>
<tr>
<th>Name</th>
<th>Vorname</th>
<th>Land</th>
<th>Ort</th>
<th>Tel.</th>
<th>Mobil</th>
<th>E-Mail</th>
<th>Geschlecht</th>
</tr>
</thead>
<tbody>
{filteredList.map((node) => (
<tr key={node.id}>
<td> {node.Name} </td>
<td> {node.Vorname} </td>
<td> {node.Land} </td>
<td> {node.Ort} </td>
<td> {node.Tel} </td>
<td> {node.Mobil} </td>
<td> {node.EMail} </td>
<td> {node.Geschlecht} </td>
</tr>
))}
{filteredList.length === 0 && (
<tr>
<td colSpan="8" style={{ textAlign: "center" }}>
No Record Found
</td>
</tr>
)}
</tbody>
</table>
</div>