#13Users List with Search, Filter and Pagination

Overview

Create a users list app with search, filter, and pagination functionality.

Requirements

• Display a list of users with pagination.
• Implement a search input to filter users by name or email.
• Implement a role filter to show users with a specific role.
• Implement an active checkbox to filter users by active status.
• Ensure pagination updates correctly:
  • Navigate to next and previous pages.
  • Reset to page 1 when any filter changes.
  • Do not navigate beyond the first or last page.
• Display the user’s role with a distinct background color.
• Show a message "No users found" if filters exclude all users.
• Hide pagination controls if there are no users or fewer users than a full page.

Notes

• You can centralize state and filtering logic in a custom hook or a parent component.
• Ensure combined filters work together (e.g., search + role + active status).
• Pagination can be client-side (using sliced arrays) or simulated server-side.
• Make sure the UI updates immediately when filters change.
• Consider accessibility and semantic HTML for inputs, checkboxes, and pagination buttons.
• Role background colors can be mapped according to your design system (e.g., admin = red, user = blue).

Tests

1. shows the first page of users
2. filters by search input
3. filters by role
4. filters by active checkbox
5. navigates to next and prev pages
6. applies combined filters correctly
7. resets page to 1 when filters change
8. renders role with correct background color
9. does not navigate beyond first or last page
10. shows 'No users found' when filters exclude all
11. hides pagination if there are no users or less than one page