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>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <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 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>
    <style>
      .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

.main-heading {
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 20px;
        color: #333;
      }

.loading-text {
        font-size: 18px;
        color: #777;
      }

.data-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

.column-header {
        padding: 10px 15px;
        background-color: #f0f0f0;
        color: #555;
        text-align: left;
      }

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

.data-cell {
        padding: 10px 15px;
        color: #333;
      }

.thumbnail-image {
        display: block;
        margin: 0 auto;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }

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

.pagination-button {
        padding: 10px 20px;
        margin: 5px;
        background-color: #007bff;
        color: #fff;
        border: none;
        border-radius: 4px;
        cursor: pointer;
        transition: background-color 0.3s ease;
      }

.pagination-button:hover {
        background-color: #0056b3;
      }

.pagination-button:disabled {
        opacity: 0.6;
        cursor: not-allowed;
      }

.pagination-button.selected {
        background-color: #0056b3;
      }
    </style>
  </body>
</html>