React Table with Pagination

Building a table with pagination is a common requirement in web applications, especially when dealing with large datasets. This challenge asks you to implement a React component that displays data in a table format and allows users to navigate through pages of data using pagination controls. This is a fundamental skill for any React developer and demonstrates understanding of state management, component composition, and user interaction.

Problem Description

You are tasked with creating a React component called PaginatedTable that renders a table displaying data and provides pagination functionality. The component should accept an array of data objects as a prop and display them in a table. The table should be paginated, showing only a specified number of rows per page. Pagination controls (e.g., "Previous," "Next," page numbers) should be provided to allow users to navigate between pages.

Key Requirements:

• Data Display: The component must render the data in a tabular format. Assume each data object has properties that can be displayed as table cells.
• Pagination: The component must divide the data into pages and display only one page at a time.
• Pagination Controls: The component must provide controls (buttons or numbers) to navigate between pages.
• State Management: The component must manage the current page number and the number of rows per page using React's state.
• Dynamic Rendering: The table content should update dynamically as the user navigates between pages.
• Error Handling: Handle cases where the data array is empty.

Expected Behavior:

• When the component mounts, it should display the first page of data.
• Clicking the "Previous" button should move to the previous page (if available).
• Clicking the "Next" button should move to the next page (if available).
• Clicking a page number should navigate directly to that page.
• The component should display an appropriate message if the data array is empty.
• The number of rows per page should be configurable via a prop.

Edge Cases to Consider:

• Empty data array.
• Data array with fewer rows than the number of rows per page.
• Attempting to navigate to a page that is out of bounds (e.g., clicking "Previous" on the first page).

Examples

Example 1:

Input: data = [{id: 1, name: "Alice"}, {id: 2, name: "Bob"}, {id: 3, name: "Charlie"}, {id: 4, name: "David"}, {id: 5, name: "Eve"}], rowsPerPage = 2
Output: A table displaying Alice and Bob on the first page, Charlie and David on the second page, and Eve on the third page. Pagination controls should allow navigation between these pages.
Explanation: The data is split into pages of 2 rows each. The component renders the appropriate rows based on the current page.

Example 2:

Input: data = [{id: 1, name: "Alice"}], rowsPerPage = 3
Output: A table displaying Alice. Pagination controls should only show "Next" button disabled.
Explanation: The data array has only one element, which is displayed on the first (and only) page.

Example 3:

Input: data = [], rowsPerPage = 5
Output: A message indicating that there is no data to display.
Explanation: The data array is empty, so the component displays a message instead of a table.

Constraints

• Data Format: The data will be an array of objects. Each object will have at least one property suitable for display in a table cell.
• rowsPerPage: The rowsPerPage prop must be a positive integer. If it's not, default to 10.
• Performance: The component should render efficiently, even with large datasets. Avoid unnecessary re-renders.
• Dependencies: You are allowed to use standard React hooks (useState, useEffect). No external libraries are permitted for pagination or table rendering. You can use CSS for styling.

Notes

• Consider using the modulo operator (%) to calculate the current page number.
• Think about how to efficiently slice the data array to display only the rows for the current page.
• Pay attention to disabling the "Previous" and "Next" buttons when appropriate.
• Focus on creating a clean and well-structured component with clear separation of concerns.
• The styling of the table and pagination controls is not a primary focus of this challenge, but a basic, functional design is expected.