While creating a dashboard, sometimes we need to show data in a tabular form in ReactJS. The larger the table gets, the harder it gets to find some specific data from the table.
In this article, we will learn how to find some data in a table by searching and filtering. Below are the steps that we will be following,
- Setup the environment
- Create an array of objects
- Create the table with search and filtering inputs
- Implement search functionality
- Implement filtering functionality
Setup the environment
- Create a folder named components inside the src folder in the React Project.
- Create a functional component in that folder
In our case, it is FilterTable
import React from 'react';
const FilterTable = () => {
return (
<div>
</div>
);
};
export default FilterTable;
We will create the table inside the <div> and create the filtering functionalities inside the function (before returning the <div>)
- Import this component into App.js
import FilterTable from "./components/FilterTable";
import React, { useState, useEffect } from "react";
import FilterTable from "./components/FilterTable";
const App = () => {
return (
<div >
{/* anything inside this div will be visible to the browser */}
<FilterTable />
</div>
);
}
export default App
Here, we have imported the component into App.js. And inside the <div> here, whatever is written, will be visible to the browser.
Once the environment is ready, we will create the table. We will be using TailwindCSS and DaisyUI for styling. To know more about setting up an environment with TailwindCSS, Read This Article.
Create an array of objects
- Inside the FilterTable function, create an array of objects.
const products = [
{ id: 1, brand: "Samsung", model: "a50", category: "Smartphone", availability: "Available" },
{ id: 2, brand: "Samsung", model: "s21", category: "Smartphone", availability: "Available" },
{ id: 3, brand: "Apple", model: "13pro", category: "Smartphone", availability: "Available" },
{ id: 4, brand: "Apple", model: "12pro", category: "Smartphone", availability: "Available" },
{ id: 5, brand: "Apple", model: "xe", category: "Smartphone", availability: "Available" },
{ id: 6, brand: "Redmi", model: "note 8 pro", category: "Smartphone", availability: "Available" },
{ id: 7, brand: "Redmi", model: "note8", category: "Smartphone", availability: "Available" },
{ id: 8, brand: "Oppo", model: "a21", category: "Smartphone", availability: "Available" },
{ id: 9, brand: "Oppo", model: "a22", category: "Smartphone", availability: "Available" },
{ id: 10, brand: "Oppo", model: "", category: "Smartphone", availability: "Available" },
{ id: 10, brand: "HP", model: "15-ay", category: "Laptop", availability: "Available" },
{ id: 10, brand: "HP", model: "pavilion", category: "Laptop", availability: "Available" },
{ id: 10, brand: "Dell", model: "aspirion", category: "Laptop", availability: "Available" },
{ id: 10, brand: "Acer", model: "nitro", category: "Laptop", availability: "Available" },
{ id: 10, brand: "Acer", model: "nitro", category: "Laptop", availability: "Available" },
]
This is the array of products. Each object has some property. Such as Brand, Model, Category, etc. We will show them in the table and later, we will implement filtering functionality.
import React from 'react';
const FilterTable = () => {
const products = [
{ id: 1, brand: "Samsung", model: "a50", category: "Smartphone", availability: "Available" },
{ id: 2, brand: "Samsung", model: "s21", category: "Smartphone", availability: "Available" },
{ id: 3, brand: "Apple", model: "13pro", category: "Smartphone", availability: "Available" },
{ id: 4, brand: "Apple", model: "12pro", category: "Smartphone", availability: "Available" },
{ id: 5, brand: "Apple", model: "xe", category: "Smartphone", availability: "Available" },
{ id: 6, brand: "Redmi", model: "note 8 pro", category: "Smartphone", availability: "Available" },
{ id: 7, brand: "Redmi", model: "note8", category: "Smartphone", availability: "Available" },
{ id: 8, brand: "Oppo", model: "a21", category: "Smartphone", availability: "Available" },
{ id: 9, brand: "Oppo", model: "a22", category: "Smartphone", availability: "Available" },
{ id: 10, brand: "Oppo", model: "", category: "Smartphone", availability: "Available" },
{ id: 11, brand: "HP", model: "15-ay", category: "Laptop", availability: "Available" },
{ id: 12, brand: "HP", model: "pavilion", category: "Laptop", availability: "Available" },
{ id: 13, brand: "Dell", model: "aspirion", category: "Laptop", availability: "Available" },
{ id: 14, brand: "Acer", model: "nitro", category: "Laptop", availability: "Available" },
{ id: 15, brand: "Acer", model: "nitro", category: "Laptop", availability: "Available" },
]
return (
<div>
</div>
);
};
export default FilterTable;
Create a table and show the data
- Create a table with the help of TailwindCSS (for styling purposes)
<div>
<div class="overflow-x-auto">
<table class="table w-full">
<thead>
<tr>
<th>ID</th>
<th>Brand</th>
<th>Model</th>
<th>Category</th>
<th>Avaiability</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
Here we have created a table structure. And inside the <tbody> we will render the array of objects dynamically.
- Run a
mapmethod to the array and show the data dynamically
<div>
<div class="overflow-x-auto">
<table class="table w-full">
<thead>
<tr>
<th>ID</th>
<th>Brand</th>
<th>Model</th>
<th>Category</th>
<th>Avaiability</th>
</tr>
</thead>
<tbody>
{
products.map(product =>
<tr>
<th>{product.id}</th>
<td>{product.brand}</td>
<td>{product.model}</td>
<td>{product.category}</td>
<td>{product.availability}</td>
</tr>
)
}
</tbody>
</table>
</div>
</div>
import React from 'react';
const FilterTable = () => {
const products = [
{ id: 1, brand: "Samsung", model: "a50", category: "Smartphone", availability: "Available" },
{ id: 2, brand: "Samsung", model: "s21", category: "Smartphone", availability: "Available" },
{ id: 3, brand: "Apple", model: "13pro", category: "Smartphone", availability: "Available" },
{ id: 4, brand: "Apple", model: "12pro", category: "Smartphone", availability: "Available" },
{ id: 5, brand: "Apple", model: "xe", category: "Smartphone", availability: "Available" },
{ id: 6, brand: "Redmi", model: "note 8 pro", category: "Smartphone", availability: "Available" },
{ id: 7, brand: "Redmi", model: "note8", category: "Smartphone", availability: "Available" },
{ id: 8, brand: "Oppo", model: "a21", category: "Smartphone", availability: "Available" },
{ id: 9, brand: "Oppo", model: "a22", category: "Smartphone", availability: "Available" },
{ id: 10, brand: "Oppo", model: "", category: "Smartphone", availability: "Available" },
{ id: 11, brand: "HP", model: "15-ay", category: "Laptop", availability: "Available" },
{ id: 12, brand: "HP", model: "pavilion", category: "Laptop", availability: "Available" },
{ id: 13, brand: "Dell", model: "aspirion", category: "Laptop", availability: "Available" },
{ id: 14, brand: "Acer", model: "nitro", category: "Laptop", availability: "Available" },
{ id: 15, brand: "Acer", model: "nitro", category: "Laptop", availability: "Available" },
]
return (
<div>
<div class="overflow-x-auto">
<table class="table w-full">
<thead>
<tr>
<th>ID</th>
<th>Brand</th>
<th>Model</th>
<th>Category</th>
<th>Avaiability</th>
</tr>
</thead>
<tbody>
{
products.map(product =>
<tr>
<th>{product.id}</th>
<td>{product.brand}</td>
<td>{product.model}</td>
<td>{product.category}</td>
<td>{product.availability}</td>
</tr>
)
}
</tbody>
</table>
</div>
</div>
);
};
export default FilterTable;
Note: To know more about showing data in a table in ReactJS, Read This Article.
- Add one input field for searching the data by name and a select option for getting the data based on selection.
<div className='flex justify-between my-8'>
<div>
<label htmlFor="">Search By Brand</label>
<input type="text" placeholder="Type here" class="input input-bordered w-full max-w-xs" />
</div>
<div>
<label htmlFor="">Category</label>
<select class="select select-bordered w-full max-w-xs">
<option selected>Select Category</option>
<option>Smartphone</option>
<option>Laptop</option>
</select>
</div>
</div>
import React from 'react';
const FilterTable = () => {
const products = [
{ id: 1, brand: "Samsung", model: "a50", category: "Smartphone", availability: "Available" },
{ id: 2, brand: "Samsung", model: "s21", category: "Smartphone", availability: "Available" },
{ id: 3, brand: "Apple", model: "13pro", category: "Smartphone", availability: "Available" },
{ id: 4, brand: "Apple", model: "12pro", category: "Smartphone", availability: "Available" },
{ id: 5, brand: "Apple", model: "xe", category: "Smartphone", availability: "Available" },
{ id: 6, brand: "Redmi", model: "note 8 pro", category: "Smartphone", availability: "Available" },
{ id: 7, brand: "Redmi", model: "note8", category: "Smartphone", availability: "Available" },
{ id: 8, brand: "Oppo", model: "a21", category: "Smartphone", availability: "Available" },
{ id: 9, brand: "Oppo", model: "a22", category: "Smartphone", availability: "Available" },
{ id: 10, brand: "Oppo", model: "", category: "Smartphone", availability: "Available" },
{ id: 11, brand: "HP", model: "15-ay", category: "Laptop", availability: "Available" },
{ id: 12, brand: "HP", model: "pavilion", category: "Laptop", availability: "Available" },
{ id: 13, brand: "Dell", model: "aspirion", category: "Laptop", availability: "Available" },
{ id: 14, brand: "Acer", model: "nitro", category: "Laptop", availability: "Available" },
{ id: 15, brand: "Acer", model: "nitro", category: "Laptop", availability: "Available" },
]
return (
<div className='w-4/5 mx-auto mt-16'>
<div className='flex justify-between my-8'>
<div>
<label htmlFor="">Search By Brand</label>
<input type="text" placeholder="Type here" class="input input-bordered w-full max-w-xs" />
</div>
<div>
<label htmlFor="">Category</label>
<select class="select select-bordered w-full max-w-xs">
<option selected>Select Category</option>
<option>Smartphone</option>
<option>Laptop</option>
</select>
</div>
</div>
<div class="overflow-x-auto">
<table class="table w-full text-center">
<thead>
<tr>
<th>ID</th>
<th>Brand</th>
<th>Model</th>
<th>Category</th>
<th>Avaiability</th>
</tr>
</thead>
<tbody>
{
products.map(product =>
<tr>
<th>{product.id}</th>
<td>{product.brand}</td>
<td>{product.model}</td>
<td>{product.category}</td>
<td>{product.availability}</td>
</tr>
)
}
</tbody>
</table>
</div>
</div>
);
};
export default FilterTable;
Implement search in reactJS
- Create a state hook to store the typed texts in the input field.
// store input data
const [searchText, setSearchText] = useState('');
- Create an
onChange()event inside the input field and set the state value forsetSearchText.
<input onChange={e => setSearchText(e.target.value)} type="text" placeholder="Type here" class="input input-bordered w-full max-w-xs" />
With this, anything written into the input field will be stored in the state.
- Run the below code and store it on a variable.
const filter = products.filter(product => product.brand.toLowerCase().includes(text.toLowerCase()))
Here, we are running a filter method to the products array which will return us some results based on some conditions. And we are adding the condition that. if the object property of the array includes the text that is written in the input field, we will store them in the filter variable.
Note: Adding toLowerCase() will avoid case-sensitive issues.
- Now, render the
<tr>in the<tbody>based on this filter variable.
<tbody>
{
filter.map(product =>
<tr>
<th>{product.id}</th>
<td>{product.brand}</td>
<td>{product.model}</td>
<td>{product.category}</td>
<td>{product.availability}</td>
</tr>
)
}
</tbody>
And the whole code should look like this,
import React from 'react';
import { useEffect } from 'react';
import { useState } from 'react';
const FilterTable = () => {
// store input data
const [text, setText] = useState('')
console.log(text);
const products = [
{ id: 1, brand: "Samsung", model: "a50", category: "Smartphone", availability: "Available" },
{ id: 2, brand: "Samsung", model: "s21", category: "Smartphone", availability: "Available" },
{ id: 3, brand: "Apple", model: "13pro", category: "Smartphone", availability: "Available" },
{ id: 4, brand: "Apple", model: "12pro", category: "Smartphone", availability: "Available" },
{ id: 5, brand: "Apple", model: "xe", category: "Smartphone", availability: "Available" },
{ id: 6, brand: "Redmi", model: "note 8 pro", category: "Smartphone", availability: "Available" },
{ id: 7, brand: "Redmi", model: "note8", category: "Smartphone", availability: "Available" },
{ id: 8, brand: "Oppo", model: "a21", category: "Smartphone", availability: "Available" },
{ id: 9, brand: "Oppo", model: "a22", category: "Smartphone", availability: "Available" },
{ id: 10, brand: "Oppo", model: "", category: "Smartphone", availability: "Available" },
{ id: 11, brand: "HP", model: "15-ay", category: "Laptop", availability: "Available" },
{ id: 12, brand: "HP", model: "pavilion", category: "Laptop", availability: "Available" },
{ id: 13, brand: "Dell", model: "aspirion", category: "Laptop", availability: "Available" },
{ id: 14, brand: "Acer", model: "nitro", category: "Laptop", availability: "Available" },
{ id: 15, brand: "Acer", model: "nitro", category: "Laptop", availability: "Available" },
];
const filter = products.filter(product => product.brand.toLowerCase().includes(text.toLowerCase()))
// console.log(filter)
return (
<div className='w-4/5 mx-auto mt-16'>
<div className='flex justify-between my-8'>
<div>
<label htmlFor="">Search By Brand</label>
<input onChange={(e) => setText(e.target.value)} type="text" placeholder="Type here" class="input input-bordered w-full max-w-xs" />
</div>
<div>
<label htmlFor="">Category</label>
<select class="select select-bordered w-full max-w-xs">
<option selected>All</option>
<option>Smartphone</option>
<option>Laptop</option>
</select>
</div>
</div>
<div class="overflow-x-auto">
<table class="table w-full text-center">
<thead>
<tr>
<th>ID</th>
<th>Brand</th>
<th>Model</th>
<th>Category</th>
<th>Avaiability</th>
</tr>
</thead>
<tbody>
{
filter.map(product =>
<tr>
<th>{product.id}</th>
<td>{product.brand}</td>
<td>{product.model}</td>
<td>{product.category}</td>
<td>{product.availability}</td>
</tr>
)
}
</tbody>
</table>
</div>
</div>
);
};
export default FilterTable;
At first, we were rendering the table based on the products array. But now we will render it based on the filtered value.
Implement filter in reactJS
- Declare a state to store the selected value from the dropdown selection
const [select, setSelect] = useState('')
- Add an
onChange()event to the dropdown selection
<select onChange={e => setSelect(e.target.value)} class="select select-bordered w-full max-w-xs">
<option disabled selected>Select Category</option>
<option>Smartphone</option>
<option>Laptop</option>
</select>
After selecting Smartphone, the state value will be set to Smartphone. The same goes for Laptop as well.
- Create dropdown filtering functionality
// store selection state variable
const [select, setSelect] = useState('')
const filteredProducts = products.filter(p => p.category === select)
- Render the
<tr>inside<tbody>based on thefilteredProductsvariable.
<tbody>
{
select === "All" ?
products.map(product =>
<tr>
<th>{product.id}</th>
<td>{product.brand}</td>
<td>{product.model}</td>
<td>{product.category}</td>
<td>{product.availability}</td>
</tr>
)
:
filteredProducts.map(product =>
<tr>
<th>{product.id}</th>
<td>{product.brand}</td>
<td>{product.model}</td>
<td>{product.category}</td>
<td>{product.availability}</td>
</tr>
)
}
</tbody>
Here, we have added a condition inside JSX. That, if the selection is set to All, then the table will render all the products (it will map the products array). Else, it will render only the selected categories (it will map the filteredProducts array).
import React from 'react';
import { useEffect } from 'react';
import { useState } from 'react';
const FilterTable = () => {
// store input data
const [text, setText] = useState('')
// console.log(text);
const products = [
{ id: 1, brand: "Samsung", model: "a50", category: "Smartphone", availability: "Available" },
{ id: 2, brand: "Samsung", model: "s21", category: "Smartphone", availability: "Available" },
{ id: 3, brand: "Apple", model: "13pro", category: "Smartphone", availability: "Available" },
{ id: 4, brand: "Apple", model: "12pro", category: "Smartphone", availability: "Available" },
{ id: 5, brand: "Apple", model: "xe", category: "Smartphone", availability: "Available" },
{ id: 6, brand: "Redmi", model: "note 8 pro", category: "Smartphone", availability: "Available" },
{ id: 7, brand: "Redmi", model: "note8", category: "Smartphone", availability: "Available" },
{ id: 8, brand: "Oppo", model: "a21", category: "Smartphone", availability: "Available" },
{ id: 9, brand: "Oppo", model: "a22", category: "Smartphone", availability: "Available" },
{ id: 10, brand: "Oppo", model: "", category: "Smartphone", availability: "Available" },
{ id: 11, brand: "HP", model: "15-ay", category: "Laptop", availability: "Available" },
{ id: 12, brand: "HP", model: "pavilion", category: "Laptop", availability: "Available" },
{ id: 13, brand: "Dell", model: "aspirion", category: "Laptop", availability: "Available" },
{ id: 14, brand: "Acer", model: "nitro", category: "Laptop", availability: "Available" },
{ id: 15, brand: "Acer", model: "nitro", category: "Laptop", availability: "Available" },
];
const filter = products.filter(product => product.brand.toLowerCase().includes(text.toLowerCase()))
// console.log(filter)
// store selection state variable
const [select, setSelect] = useState('')
const filteredProducts = products.filter(p => p.category === select)
// console.log(filtered)
return (
<div className='w-4/5 mx-auto mt-16'>
<div className='flex justify-between my-8'>
<div>
<label htmlFor="">Search By Brand</label>
<input onChange={(e) => setText(e.target.value)} type="text" placeholder="Type here" class="input input-bordered w-full max-w-xs" />
</div>
<div>
<label htmlFor="">Category</label>
<select onChange={e => setSelect(e.target.value)} class="select select-bordered w-full max-w-xs">
<option selected>All</option>
<option>Smartphone</option>
<option>Laptop</option>
</select>
</div>
</div>
<div class="overflow-x-auto">
<table class="table w-full text-center">
<thead>
<tr>
<th>ID</th>
<th>Brand</th>
<th>Model</th>
<th>Category</th>
<th>Avaiability</th>
</tr>
</thead>
<tbody>
{
select === "All" ?
products.map(product =>
<tr>
<th>{product.id}</th>
<td>{product.brand}</td>
<td>{product.model}</td>
<td>{product.category}</td>
<td>{product.availability}</td>
</tr>
)
:
filteredProducts.map(product =>
<tr>
<th>{product.id}</th>
<td>{product.brand}</td>
<td>{product.model}</td>
<td>{product.category}</td>
<td>{product.availability}</td>
</tr>
)
}
</tbody>
</table>
</div>
</div>
);
};
export default FilterTable;
After selecting, All,
After selecting, Laptop,
This is one of the ways that we can implement search and dropdown selection functionality to a data table in ReactJS without using any npm packages.
