Skip to content

[FE-20] Build PaginationControls component #517

@mftee

Description

@mftee

Problem

Multiple list pages (documents, disputes, admin users) each need pagination but there is no reusable component. Without a shared component, every page would implement its own pagination logic inconsistently.

Proposed Solution

Create a reusable PaginationControls component inside frontend/module/components/pagination/.

Acceptance Criteria

  • Accepts currentPage, totalPages, and onPageChange(page: number) callback props
  • Renders Previous and Next buttons that are disabled at the first and last page respectively
  • Renders up to 7 page number buttons — shows ellipsis (...) for large page ranges to keep the control compact
  • Highlights the active page with a distinct visual style
  • Calls onPageChange with the new page number when a button is clicked
  • Does not render at all when totalPages is 1 or less
  • Is fully keyboard accessible — all buttons are reachable via Tab and activated via Enter or Space
  • All component files live inside frontend/module/components/pagination/

Metadata

Metadata

Labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions