#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
- shows the first page of users
- filters by search input
- filters by role
- filters by active checkbox
- navigates to next and prev pages
- applies combined filters correctly
- resets page to 1 when filters change
- renders role with correct background color
- does not navigate beyond first or last page
- shows 'No users found' when filters exclude all
- hides pagination if there are no users or less than one page