Search Functionality

In any tabular format data it is necessary to have a search input so that user can search their intended data using particular text or string. This will help them to find the expected data in a little time than searching the whole HTML table data by navigating to different pages. This example will show you how to create such functionality using React JS library.

Prerequisites

Node 18.12.1, Npm 8.19.2, React 18.2.0, axios (npm install axios) Create New React Project

Search Implementation

Here I am going to show you how to build search functionality in the HTML table data.

Instead of building own API for displaying data on the HTML table, I am calling the readymade API for fetching and displaying data. I am using axios for fetching data from the jsonplaceholder.typicode.com site.

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import './App.css'
export default function Todo() {

    const [todos, setTodos] = useState([]);
    const [todosInitial, setTodosInitial] = useState([]);
    const [todoSearch, setTodoSearch] = useState("");

    useEffect(() => {
        axios({
            url: "https://jsonplaceholder.typicode.com/todos"
        }).then(response => {
            setTodos(response.data);
            setTodosInitial(response.data);
        })


    }, []);

    function handleTodoChange(e) {
        e.preventDefault();
        setTodoSearch(e.target.value);
        setTodos(todosInitial.filter(todo => todo.title.includes(todoSearch)));
    }
    return (
        <div className="App">
            <hr />
            <label>Search</label> <input type="text" value={todoSearch} name="todosearch" onChange={handleTodoChange} />
            <hr />
            <table>
                <tbody>
					<tr>
						<th>Title</th>
						<th>Status</th>
					</tr>
                    {todos.map(todo => (
                        <tr>
                            <td>{todo.title}</td>
                            <td>{todo.completed.toString()}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    )
}

I have kept one input box for providing input for the search text and accordingly the table data will be updated instantly to show the filtered data.

Initially all data from the API will be displayed and when you type in the input box the resultant data (if found) will be shown in the same table.

Basic Style

Apply a basic style to the HTML table for odd and even rows using the simple css rule:

.App table tr:nth-child(even) {background: #CCC}
.App table tr:nth-child(odd) {background: #FFF}

Testing the Search App

While you run the app using npm start command, your app will be opened in the browser at location http://localhost:3000.

Now you can type a text to search in the table data and if the related text found in any row then that row or rows will be displayed.

Source Code

Download