How do I create a search filter for a JSON datatable in React?

Question

I've been trying to implement a search filter for a JSON datatable by filtering the data by values of the data header...

Here's the input field

 <input type= "text" placeholder="Search..." value={search} onChange={(e) => 
 {setSearch(e.target.value)}} />

below is the datatable..

<table cellSpacing="40" cellPadding="20" >
            <thead>
                <tr>
                <th>#ID</th>
                <th>Name</th>
                <th>Gender</th>
                <th>LGA</th>
                <th>WARD</th>
                </tr>
            </thead>
            <tbody>
    {person.map(record =>(
        <tr key = {record.id}>
        <td>{record.id}</td>
        <td> <Link to={`/beneficiary/${record.full_name}`} >
         {record.full_name}</Link></td>
         <td>{record.gender}</td>
         <td>{record.lga}</td>
         <td> {record.ward} </td>
        </tr>     
    ))}
    
</tbody>
</table>
    
}

How do i wrap the input field with the datable to be able to get data by values of their data header. Say, a header for gender..i want to get results for male only.etc

Answer 1

By your description you need to add a filter rule to person.map(...) , ie you need to use person.filter(somefilterfunction).map(record => ( . So the question now becomes how to program the somefilterfunction to cater to your needs, for example you want to filter for male, then use

(person) => {
    if (person.gender === search) {
        return person;
    }
}

the search here should be your state (I guess you are using React hooks), and other filter rules can be implemented similarly.

---

Modern React also supports useMemo and it can serve as a cache for the filtered data, this may have better performances. You may look deeper into it by look at the official document or Google a bit.

Answer 2

Just filter the Data first

       {person.filter((e) => ['name', 'descr']
       .some((property)=> e[property].toLowerCase()
       .includes(search.toLowerCase())))
       .map(record =>(
            <tr key = {record.id}>
            <td>{record.id}</td>
            <td> <Link to={`/beneficiary/${record.full_name}`} >
             {record.full_name}</Link></td>
             <td>{record.gender}</td>
             <td>{record.lga}</td>
             <td> {record.ward} </td>
            </tr>     
        ))}