n-pagination

Name: n-pagination
Availability: InStock
Author: jiaiyan

Render pagination controls with page count, size picker, and quick jumper in Naive UI.

8|3|Updated Mar 13, 2026

Search Tags:#pagination #paginate #ui-component #naive-ui #page-count #page-size #quick-jumper

Ready to run

npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-pagination

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: n-pagination
Source: https://github.com/jiaiyan/naive-ui-skills/tree/main/components/n-pagination
Command: npx skills add https://github.com/jiaiyan/naive-ui-skills --skill n-pagination

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Paginate datasets and navigation controls within Naive UI to support efficient browsing of large data collections.

Core Features & Use Cases

Current page, total page count, and page size options enable precise navigation for data tables, search results, product lists, and content feeds.
Quick jumper, customizable slots, and page-size pickers allow UI customization to fit different layouts and UX requirements.
Use case: A dashboard showing thousands of items lets users jump to a specific page, adjust items per page, and observe updated page counts in real time.

Quick Start

Render a paginated UI by providing page-count, current page, and optional page-size options for a dataset.

Frequently Asked Questions about n-pagination

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add pagination to a data table using Naive UI?▼

Add pagination to a Naive UI data table by providing the current page, total page count, and page size controls. This renders a navigation bar that lets users browse large data collections efficiently.

Can I let users jump to a specific page and change the page size for search results?▼

Yes, you can implement a quick jumper and a page-size picker for search results. Users can jump to a specific page number and adjust the items displayed per page, updating the page count in real time.

How do I customize pagination slots and handle page change events?▼

You can customize pagination slots and handle page change events using provided event hooks. These allow you to tailor the UI layout to different UX requirements and trigger actions when the current page updates.

Does this pagination approach work for product catalogs and content feeds?▼

Yes, this pagination approach works for product catalogs and content feeds. It provides current page tracking and page size options to support efficient browsing of various large data list formats.

What is the best way to navigate large datasets without loading everything at once?▼

The best way to navigate large datasets is using page-count and page-size controls. By dividing data into pages, users can browse thousands of items without loading the entire dataset simultaneously.