HDS Pagination - Items per Page Filter

[abbybowman]

Feature name

Pagination - Items per Page Filter

Feature area

Component patterns (cards, search, archive layouts, etc.)

Describe the idea

The HDS Figma spec includes a rows-per-page filter alongside pagination — a dropdown labeled "ROWS" that lets users choose how many items appear per page (e.g., 10, 25, 50). This composed pattern pairs standard HDS pagination with a dropdown menu to give users control over content density, which ultimately increases or decreases the total number of pages.

This is deferred from the v1.0 Pagination component because it requires a Dropdown Menu component that doesn't exist yet in HDS Core.

Use case / user story

As a developer building a data table or search results page, I want to let users control how many results appear per page so that they can balance between scanning many items and reducing page loads.

Primary audience

Front-end developers

Is this already in the HDS Figma library?

✅ Yes — fully specced in HDS Figma

Figma reference

See the "With Filter" variant on the Pagination element page in HDS Figma

Implementation maturity

🔍 Seen elsewhere — exists in another design system or library (not NASA)

Prior art details

Unsure if this pagination pattern with items per page filter is live on NASA.gov or any other sites currently

Relationship to USWDS

Extends USWDS with something it doesn't provide

Potential breaking change?

No — purely additive

Alternatives considered

Could implement the filter as a standalone component that sits adjacent to pagination without being formally coupled to it. This would let teams compose the pattern themselves but wouldn't guarantee consistent layout or spacing. The Figma spec shows them as a single composed unit, so a formal pattern is preferred.

Additional context

Dependencies:

• Requires Dropdown Menu component (also Phase 2 — see Dropdown Menus in the Component Roadmap)
• The pagination component itself (§7) is complete and ships in v1.0
• Once Dropdown Menu exists, the filter variant is primarily a layout/composition pattern — the individual pieces (pagination + dropdown) each handle their own states

Would you contribute to this?

Partially — I could help with design/research/testing