The Employee Pagination App is a ReactJS application that displays employee data fetched from a remote API in a paginated table format.
It allows users to navigate through the data seamlessly using Previous and Next buttons while maintaining an intuitive and responsive user interface — all built without any external UI libraries.
✅ Fetches employee data from a public API
✅ Displays records in a table (10 rows per page)
✅ Pagination using Previous and Next buttons
✅ Disables navigation when on the first or last page
✅ Error handling for failed API requests
✅ Clean UI built using only HTML, CSS, and React
The data is fetched from the following endpoint:
https://geektrust.s3-ap-southeast-1.amazonaws.com/adminui-problem/members.json
The app displays:
A table of 10 employee records
A Previous and Next button for pagination
A page indicator showing the current page number
ID Name Email Role
1 John Doe john@abc.com
Admin
2 Jane Smith jane@abc.com
Member
... ... ... ...
When on the first page, clicking Previous does nothing.
On any other page, clicking Previous takes the user to the previous page and updates the page number accordingly.
When on the last page, clicking Next does nothing.
On any other page, clicking Next takes the user to the next page and updates the page number accordingly.
10 rows are displayed on each page.
The last page may contain fewer than 10 rows depending on the total data count.
The pagination state updates dynamically with user interaction.
If the API request fails, an alert box is displayed with the message:
failed to fetch data
Additionally, the error is logged to the console using:
console.error("Error fetching data:", error);
Built using React Functional Components
Used useState() and useEffect() hooks for data management and lifecycle handling
Pagination logic implemented manually — no external libraries
Buttons created using the standard element
Data displayed using the HTML
element with semantic structureTechnology Purpose
ReactJS Component-based UI development
HTML5 Table and structure
CSS3 Styling and layout
JavaScript (ES6+) Pagination and data fetching
Fetch API To retrieve remote employee data
Follow the steps below to run the application locally:
Clone the Repository
git clone https://github.com/dhamodharanECE/Build-the-XPagination-Implementation.git
cd project
Install Dependencies
npm install
Start the Application
npm start
Open in Browser
http://localhost:3000
Implementing manual pagination logic in React
Efficient use of React state to manage pages
API fetching and error handling best practices
Handling conditional rendering of buttons and table data
Creating a fully functional UI without external libraries
https://github.com/dhamodharanECE/Build-the-XPagination-Implementation.git