React Js Table with Pagination | Search and Pagination

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@babel/standalone@7.14.6/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <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" },
          { id: 15, name: "Andrew Thompson", category: "Full Stack Developer" },
          { id: 16, name: "Olivia Clark", category: "Backend Developer" },
          { id: 17, name: "William Chen", category: "Full Stack Developer" },
          { id: 18, name: "Sophia Lee", category: "Frontend Developer" },
          { id: 19, name: "Daniel Kim", category: "Frontend Developer" },
          { id: 20, name: "Mia Davis", category: "Backend Developer" },
          { id: 21, name: "Ethan Rodriguez", category: "Full Stack Developer" },
          { id: 22, name: "Ava Nguyen", category: "Backend Developer" },
          { id: 23, name: "Michael Smith", category: "Full Stack Developer" },
          { id: 24, name: "Isabella Patel", category: "Frontend Developer" },
          { id: 25, name: "Alexander Davis", category: "Frontend Developer" },
          { id: 26, name: "Sophie Hernandez", category: "Backend Developer" },
          { id: 27, name: "Matthew Wilson", category: "Full Stack 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>
    <style>
      .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        font-family: Arial, sans-serif;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      }

/* Main heading styles */
      .main-heading {
        font-size: 24px;
        font-weight: bold;
        margin-bottom: 20px;
      }

/* Filter and search container styles */
      .filter-search-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }

/* Filter container styles */
      .filter-container {
        flex: 1;
        margin-right: 10px;
      }

/* Search container styles */
      .search-container {
        flex: 1;
      }

/* Filter label styles */
      label {
        display: block;
        font-size: 18px;
        margin-bottom: 5px;
      }

/* Select dropdown styles */
      select {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-bottom: 20px;
      }

/* Search input styles */
      input[type="text"] {
        width: 100%;
        padding: 10px;
        font-size: 16px;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-bottom: 20px;
        box-sizing: border-box;
      }

/* Table styles */
      .data-table {
        width: 100%;
        border-collapse: collapse;
      }

/* Table header styles */
      .column-header {
        font-size: 18px;
        font-weight: bold;
        background-color: #f0f0f0;
        padding: 10px;
        text-align: left;
      }

/* Table data row styles */
      .data-row:nth-child(even) {
        background-color: #f9f9f9;
      }

/* Table data cell styles */
      .data-cell {
        padding: 10px;
        border-bottom: 1px solid #ccc;
      }

/* Pagination buttons styles */
      .pagination-buttons {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
      }

/* Pagination button styles */
      .pagination-button {
        padding: 10px 20px;
        font-size: 16px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        margin: 0 5px;
      }

/* Disabled pagination button styles */
      .pagination-button:disabled {
        background-color: #ccc;
        cursor: not-allowed;
      }
    </style>
  </body>
</html>