React Js Table with Pagination | Search and Pagination | Filter, Sorting
React Table with Pagination | Reactjs table search and pagination | filter-:A React Table with Pagination is a web development component that enables efficient data organization and navigation. It allows users to search for specific information, filter data by categories, sort it based on various criteria, and view data in manageable chunks using pagination. This component is commonly used in Reactjs applications to handle large datasets and improve user experience.
The Reactjs Table with Search and Pagination Example demonstrates how to implement a table that allows users to search for specific data entries. Additionally, it provides pagination functionality, dividing the data into smaller, more manageable pages. The Reactjs Filter by Category and Pagination with Search allows users to filter data based on different categories or attributes, combined with search and pagination features. Lastly, the Reactjs Table with Pagination and Search and Sorting allows users to sort the data in ascending or descending order in addition to search and pagination functionalities.
Overall, these examples showcase how Reactjs can be used to create powerful and interactive data tables with enhanced functionality for better user interaction and data exploration.
written
reviewed
updated
Thanks for your feedback!
Your contributions will help us to improve service.
How can I implement a table with pagination using Reactjs?
This React JS code creates a table with pagination to display data fetched from an API endpoint or local data source. The table displays items with columns for ID, Title, Description, and Thumbnail. It fetches data using Axios, sets up pagination functionality, and displays a specified number of items per page. Users can navigate through pages using "Previous" and "Next" buttons, and the current page number is highlighted. The table updates dynamically based on the selected page.
React Js Table With Pagination Example
Copied to Clipboard
xxxxxxxxxx <script type="text/babel" data-presets="env,react"> const { useState, useEffect } = React; function App() { const [data, setData] = useState([]); const [currentPage, setCurrentPage] = useState(1); const itemsPerPage = 4; // Number of items per page const [loading, setLoading] = useState(true); useEffect(() => { fetchData(); }, []); const fetchData = async () => { try { // Replace this URL with your API endpoint or local data source const response = await axios.get("https://dummyjson.com/products"); setData(response.data.products); // Access the 'products' array from the response object setLoading(false); } catch (error) { console.error("Error fetching data:", error); setLoading(false); } }; const totalPages = Math.ceil(data.length / itemsPerPage); const indexOfLastItem = currentPage * itemsPerPage; const indexOfFirstItem = indexOfLastItem - itemsPerPage; const currentItems = loading ? [] : data.slice(indexOfFirstItem, indexOfLastItem); const handlePageChange = (pageNumber) => { setCurrentPage(pageNumber); }; const handleNextPage = () => { setCurrentPage((prevPage) => prevPage >= totalPages ? prevPage : prevPage + 1 ); }; const handlePrevPage = () => { setCurrentPage((prevPage) => prevPage <= 1 ? prevPage : prevPage - 1 ); }; return ( <div className="container"> <h1 className="main-heading">React Js Table with Pagination</h1> {loading ? ( <p className="loading-text">Loading...</p> ) : ( <> <table className="data-table"> <thead> <tr> <th className="column-header">ID</th> <th className="column-header">Title</th> <th className="column-header">Description</th> <th className="column-header">Thumbnail</th> {/* Add more table headers as needed */} </tr> </thead> <tbody> {currentItems.map((item) => ( <tr key={item.id} className="data-row"> <td className="data-cell">{item.id}</td> <td className="data-cell">{item.title}</td> <td className="data-cell">{item.description}</td> <td className="data-cell"> <img src={item.thumbnail} alt={item.title} width="50" height="50" className="thumbnail-image" /> </td> {/* Add more table data as needed */} </tr> ))} </tbody> </table> <div className="pagination-buttons"> <button onClick={handlePrevPage} disabled={currentPage <= 1} className="pagination-button" > Previous </button> {Array.from({ length: totalPages }, (_, index) => ( <button key={index + 1} onClick={() => handlePageChange(index + 1)} className={`pagination-button ${ index + 1 === currentPage ? "selected" : "" }`} > {index + 1} </button> ))} <button onClick={handleNextPage} disabled={currentPage >= totalPages} className="pagination-button" > Next </button> </div> </> )} </div> ); } ReactDOM.render(<App />, document.getElementById("app")); </script>Output of React Js Table with Pagination
How can I implement a Reactjs table with search functionality and pagination?
This Reactjs example demonstrates a table with search and pagination functionalities. It fetches data from an API and displays it in a table format with four items per page. Users can search for items by title or description, and the table dynamically updates based on the search query. Pagination buttons allow users to navigate through the data. The example uses React hooks such as useState and useEffect to manage state and lifecycle events. Additionally, Axios is used to handle API requests, and the table is rendered using ReactDOM.
React Js Table with Search and Pagination Example
Copied to Clipboard
xxxxxxxxxx<script type="text/babel" data-presets="env,react"> const { useState, useEffect } = React; function App() { const [data, setData] = useState([]); const [currentPage, setCurrentPage] = useState(1); const itemsPerPage = 4; const [loading, setLoading] = useState(true); const [searchQuery, setSearchQuery] = useState(""); useEffect(() => { fetchData(); }, []); const fetchData = async () => { try { const response = await axios.get("https://dummyjson.com/products"); setData(response.data.products); setLoading(false); } catch (error) { console.error("Error fetching data:", error); setLoading(false); } }; const filteredData = data.filter((item) => { return ( item.title.toLowerCase().includes(searchQuery.toLowerCase()) || item.description.toLowerCase().includes(searchQuery.toLowerCase()) ); }); const totalPages = Math.ceil(filteredData.length / itemsPerPage); const indexOfLastItem = currentPage * itemsPerPage; const indexOfFirstItem = indexOfLastItem - itemsPerPage; const currentItems = loading ? [] : filteredData.slice(indexOfFirstItem, indexOfLastItem); const handlePageChange = (pageNumber) => { setCurrentPage(pageNumber); }; const handleNextPage = () => { setCurrentPage((prevPage) => prevPage >= totalPages ? prevPage : prevPage + 1 ); }; const handlePrevPage = () => { setCurrentPage((prevPage) => prevPage <= 1 ? prevPage : prevPage - 1 ); }; const handleSearchChange = (event) => { setSearchQuery(event.target.value); setCurrentPage(1); }; return ( <div className="container"> <h1 className="main-heading">React Js Table with Search and Pagination</h1> <input type="text" value={searchQuery} onChange={handleSearchChange} placeholder="Search by title or description..." className="search-input" /> {loading ? ( <p className="loading-text">Loading...</p> ) : ( <> {currentItems.length === 0 ? ( <p>No items found.</p> ) : ( <> <table className="data-table"> <thead> <tr> <th className="column-header">ID</th> <th className="column-header">Title</th> <th className="column-header">Description</th> <th className="column-header">Thumbnail</th> </tr> </thead> <tbody> {currentItems.map((item) => ( <tr key={item.id} className="data-row"> <td className="data-cell">{item.id}</td> <td className="data-cell">{item.title}</td> <td className="data-cell">{item.description}</td> <td className="data-cell"> <img src={item.thumbnail} alt={item.title} width="50" height="50" className="thumbnail-image" /> </td> </tr> ))} </tbody> </table> <div className="pagination-buttons"> <button onClick={handlePrevPage} disabled={currentPage <= 1} className="pagination-button" > Previous </button> {Array.from({ length: totalPages }, (_, index) => ( <button key={index + 1} onClick={() => handlePageChange(index + 1)} className={`pagination-button ${ index + 1 === currentPage ? "selected" : "" }`} > {index + 1} </button> ))} <button onClick={handleNextPage} disabled={currentPage >= totalPages} className="pagination-button" > Next </button> </div> </> )} </> )} </div> ); } ReactDOM.render(<App />, document.getElementById("app")); </script>Output of React Js Table with Search and Pagination
How to achieve Reactjs Table data filtering by category, pagination, and search?
This React js code implements a table filter by category and pagination with a search feature. It uses React hooks such as useState to manage state. The user can select a category from a dropdown list, search for items by name, and navigate through paginated results using "Previous" and "Next" buttons. The code filters the items based on the selected category and search query and then displays the paginated results in a table. The table contains columns for "Id," "Developer Name," and "Category." The filtering and pagination logic is handled by the filterItems, nextPage, and prevPage functions.
React js Table Filter by Category and Pagination with Search
Copied to Clipboard
xxxxxxxxxx<script type="text/babel" data-type="module"> const { useState } = React; const App = () => { const [selectedCategory, setSelectedCategory] = useState("All"); const [searchQuery, setSearchQuery] = useState(""); const [currentPage, setCurrentPage] = useState(1); const itemsPerPage = 3; const categories = [ "All", "Frontend Developer", "Backend Developer", "Full Stack Developer", ]; const items = [ { id: 13, name: "Alex Johnson", category: "Frontend Developer" }, { id: 14, name: "Jessica Martinez", category: "Backend Developer" }, // ... (rest of the items) ]; // Function to filter items based on the selected category and search query const filterItems = (category, search) => { const lowerCaseSearchQuery = search.toLowerCase(); return items.filter((item) => { const lowerCaseName = item.name.toLowerCase(); return ( (category === "All" || item.category === category) && lowerCaseName.includes(lowerCaseSearchQuery) ); }); }; const handleCategoryChange = (e) => { setSelectedCategory(e.target.value); setCurrentPage(1); // Reset to first page when category changes }; const handleSearchChange = (e) => { setSearchQuery(e.target.value); setCurrentPage(1); // Reset to first page when search query changes }; const filteredItems = filterItems(selectedCategory, searchQuery); const totalPages = Math.ceil(filteredItems.length / itemsPerPage); const paginatedItems = filteredItems.slice( (currentPage - 1) * itemsPerPage, currentPage * itemsPerPage ); const nextPage = () => { if (currentPage < totalPages) { setCurrentPage(currentPage + 1); } }; const prevPage = () => { if (currentPage > 1) { setCurrentPage(currentPage - 1); } }; return ( <div className="container"> <h3 className="main-heading"> React js Filter by Category and Pagination with Search </h3> <div className="filter-search-container"> <div className="filter-container"> <label htmlFor="category-filter">Filter by category:</label> <select id="category-filter" value={selectedCategory} onChange={handleCategoryChange} > {categories.map((category) => ( <option key={category} value={category}> {category} </option> ))} </select> </div> <div className="search-container"> <label htmlFor="search-input">Search:</label> <input type="text" id="search-input" value={searchQuery} onChange={handleSearchChange} placeholder='Search by Name' /> </div> </div> <table className="data-table"> <thead> <tr> <th className="column-header">Id</th> <th className="column-header">Developer Name</th> <th className="column-header">Category</th> </tr> </thead> <tbody> {paginatedItems.map((item) => ( <tr key={item.id} className="data-row"> <td className="data-cell">{item.id}</td> <td className="data-cell">{item.name}</td> <td className="data-cell">{item.category}</td> </tr> ))} </tbody> </table> <div className="pagination-buttons"> <button className="pagination-button" disabled={currentPage === 1} onClick={prevPage} > Previous </button> <span> {currentPage} / {totalPages} </span> <button className="pagination-button" disabled={currentPage === totalPages} onClick={nextPage} > Next </button> </div> </div> ); }; ReactDOM.render(<App />, document.getElementById("app")); </script>Output of React js Table Filter by Category and Pagination with Search
How can I implement a Reactjs table with pagination, search functionality, and sorting?
The provided code snippet demonstrates a ReactJS table with pagination, search, and sorting functionalities. It utilizes React's useState hook to manage the state. The table contains data consisting of id, name, age, and email fields. Users can search for data based on the name, sort the table columns in ascending or descending order, and navigate through the paginated table. The number of items displayed per page can also be adjusted using a dropdown menu. The table dynamically updates based on the user's interactions.
React Js Table with pagination and search and sorting
Copied to Clipboard
xxxxxxxxxx <script type="text/babel" data-type="module"> const { useState } = React; const App = () => { const data = [ { id: 1, name: "John", age: 25, email: "john@example.com" }, { id: 2, name: "Jane", age: 30, email: "jane@example.com" }, ]; const columns = ["id", "name", "age", "email"]; const [searchTerm, setSearchTerm] = useState(""); const [currentPage, setCurrentPage] = useState(1); const [itemsPerPage, setItemsPerPage] = useState(5); const [sortColumn, setSortColumn] = useState(null); const [sortDirection, setSortDirection] = useState(null); // Function to handle sorting const handleSort = (column) => { if (sortColumn === column) { setSortDirection((prevDirection) => prevDirection === "asc" ? "desc" : "asc" ); } else { setSortColumn(column); setSortDirection("asc"); } }; // Helper function to filter the data based on the search term const filterData = (data) => { return data.filter((item) => Object.values(item).some((value) => value.toString().toLowerCase().includes(searchTerm.toLowerCase()) ) ); }; // Sort the filtered data const sortedData = sortColumn ? filterData(data).sort((a, b) => { const aValue = a[sortColumn]; const bValue = b[sortColumn]; if (aValue < bValue) return sortDirection === "asc" ? -1 : 1; if (aValue > bValue) return sortDirection === "asc" ? 1 : -1; return 0; }) : filterData(data); // Get total number of pages const totalPages = Math.ceil(sortedData.length / itemsPerPage); // Helper function to generate pagination buttons const generatePaginationButtons = () => { const visibleButtons = 5; // Number of visible buttons const totalButtons = Math.min(visibleButtons, totalPages); let startPage = Math.max( currentPage - Math.floor(totalButtons / 2), 1 ); const endPage = startPage + totalButtons - 1; if (endPage > totalPages) { startPage = Math.max(totalPages - totalButtons + 1, 1); } return Array.from( { length: totalButtons }, (_, index) => startPage + index ); }; // Get current items for pagination const indexOfLastItem = currentPage * itemsPerPage; const indexOfFirstItem = indexOfLastItem - itemsPerPage; const currentItems = sortedData.slice( indexOfFirstItem, indexOfLastItem ); // Change page const handlePageChange = (pageNumber) => { setCurrentPage(pageNumber); }; // Change items per page const handleItemsPerPageChange = (value) => { setItemsPerPage(value); setCurrentPage(1); // Reset to the first page when changing items per page }; return ( <div className="container"> <h3>React Js Table with pagination and search and sorting</h3> <input type="text" className="search-input" placeholder="Search by name" value={searchTerm} onChange={(e) => setSearchTerm(e.target.value)} /> <table className="data-table"> {" "} {/* Added className to table element */} <thead> <tr> {columns.map((column, index) => ( <th key={index} onClick={() => handleSort(column)}> {column} {sortColumn === column && ( <span> {sortDirection === "asc" ? <>↑</> : <>↓</>} </span> )} </th> ))} </tr> </thead> <tbody> {currentItems.map((row, rowIndex) => ( <tr key={rowIndex}> {columns.map((column, colIndex) => ( <td key={colIndex} className="data-cell"> {row[column]} </td> ))} </tr> ))} </tbody> </table> <div className="pagination-buttons"> <button disabled={currentPage === 1} onClick={() => handlePageChange(currentPage - 1)} className="page-button" > Previous </button> {generatePaginationButtons().map((page) => ( <button key={page} onClick={() => handlePageChange(page)} style={{ fontWeight: page === currentPage ? "bold" : "normal", }} className="page-button" // Added className to button element > {page} </button> ))} <button disabled={currentPage === totalPages} onClick={() => handlePageChange(currentPage + 1)} className="page-button" // Added className to button element > Next </button> <label> Items per page: <select value={itemsPerPage} onChange={(e) => handleItemsPerPageChange(parseInt(e.target.value)) } className="items-per-page-select" // Added className to select element > <option value={5}>5</option> <option value={10}>10</option> <option value={20}>20</option> </select> </label> </div> </div> ); }; ReactDOM.render(<App />, document.getElementById("app")); </script>Output of React Js Table with pagination and search and sorting
Ad