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 data = [
          { id: 1, name: "John", age: 25, email: "john@example.com" },
          { id: 2, name: "Jane", age: 30, email: "jane@example.com" },
          { id: 3, name: "Michael", age: 28, email: "michael@example.com" },
          { id: 4, name: "Emily", age: 22, email: "emily@example.com" },
          { id: 5, name: "David", age: 33, email: "david@example.com" },
          { id: 6, name: "Sophia", age: 27, email: "sophia@example.com" },
          { id: 7, name: "Daniel", age: 29, email: "daniel@example.com" },
          { id: 8, name: "Olivia", age: 31, email: "olivia@example.com" },
          { id: 9, name: "William", age: 24, email: "william@example.com" },
          { id: 10, name: "Isabella", age: 26, email: "isabella@example.com" },
          { id: 11, name: "James", age: 29, email: "james@example.com" },
          { id: 12, name: "Sophie", age: 25, email: "sophie@example.com" },
          {
            id: 13,
            name: "Alexander",
            age: 32,
            email: "alexander@example.com",
          },
          { id: 14, name: "Emma", age: 28, email: "emma@example.com" },
          { id: 15, name: "Oliver", age: 27, email: "oliver@example.com" },
          { id: 16, name: "Ava", age: 30, email: "ava@example.com" },
          { id: 17, name: "Benjamin", age: 23, email: "benjamin@example.com" },
          { id: 18, name: "Mia", age: 29, email: "mia@example.com" },
          { id: 19, name: "Ethan", age: 26, email: "ethan@example.com" },
          {
            id: 20,
            name: "Charlotte",
            age: 24,
            email: "charlotte@example.com",
          },
          { id: 21, name: "Mason", age: 31, email: "mason@example.com" },
          { id: 22, name: "Amelia", age: 28, email: "amelia@example.com" },
          {
            id: 23,
            name: "Sebastian",
            age: 27,
            email: "sebastian@example.com",
          },
          { id: 24, name: "Harper", age: 33, email: "harper@example.com" },
          { id: 25, name: "Matthew", age: 29, email: "matthew@example.com" },
          { id: 26, name: "Evelyn", age: 25, email: "evelyn@example.com" },
          { id: 27, name: "Jackson", age: 32, email: "jackson@example.com" },
          { id: 28, name: "Abigail", age: 30, email: "abigail@example.com" },
          { id: 29, name: "Aiden", age: 23, email: "aiden@example.com" },
          {
            id: 30,
            name: "Elizabeth",
            age: 28,
            email: "elizabeth@example.com",
          },
          { id: 31, name: "Elijah", age: 26, email: "elijah@example.com" },
          { id: 32, name: "Sofia", age: 24, email: "sofia@example.com" },
          { id: 33, name: "Carter", age: 31, email: "carter@example.com" },
          { id: 34, name: "Ella", age: 27, email: "ella@example.com" },
          { id: 35, name: "Grayson", age: 30, email: "grayson@example.com" },
          { id: 36, name: "Scarlett", age: 29, email: "scarlett@example.com" },
          { id: 37, name: "Lucas", age: 25, email: "lucas@example.com" },
          { id: 38, name: "Grace", age: 32, email: "grace@example.com" },
          { id: 39, name: "Gabriel", age: 26, email: "gabriel@example.com" },
          { id: 40, name: "Chloe", age: 23, email: "chloe@example.com" },
          { id: 41, name: "Jayden", age: 28, email: "jayden@example.com" },
          { id: 42, name: "Hannah", age: 27, email: "hannah@example.com" },
          { id: 43, name: "Dylan", age: 30, email: "dylan@example.com" },
          { id: 44, name: "Liam", age: 31, email: "liam@example.com" },
          { id: 45, name: "Lily", age: 25, email: "lily@example.com" },
          { id: 46, name: "Luke", age: 29, email: "luke@example.com" },
          { id: 47, name: "Layla", age: 26, email: "layla@example.com" },
          {
            id: 48,
            name: "Christopher",
            age: 28,
            email: "christopher@example.com",
          },
          { id: 49, name: "Addison", age: 27, email: "addison@example.com" },
          { id: 50, name: "Wyatt", age: 24, email: "wyatt@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" ? <>&uarr;</> : <>&darr;</>}
                        </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>
    <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);
      }
      h3 {
        margin-top: 0;
        text-align: center;
        color: #333;
      }

.search-input {
        width: 100%;
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        box-sizing: border-box;
      }

.data-table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 20px;
      }

.data-table th,
      .data-table td {
        padding: 10px;
        text-align: left;
      }

.data-table th {
        background-color: #f2f2f2;
        cursor: pointer;
      }

.data-table th span {
        margin-left: 5px;
      }

.data-cell {
        border-bottom: 1px solid #ddd;
      }

.pagination-buttons {
        display: flex;
        align-items: center;
        justify-content: center;
      }

.page-button {
        padding: 5px 10px;
        margin: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        cursor: pointer;
        background-color: #fff;
      }

.page-button:hover {
        background-color: #f2f2f2;
      }

.page-button[disabled] {
        cursor: not-allowed;
        opacity: 0.6;
      }

.items-per-page-select {
        margin-left: 10px;
        padding: 5px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: #fff;
      }

.pagination-buttons label {
        margin-left: 20px;
      }

/* Optional: Add hover effect on table rows */
      .data-table tbody tr:hover {
        background-color: #f2f2f2;
      }
    </style>
  </body>
</html>