👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Table with Page Navigation
Paginated data table with page navigation controls, rows per page selector, and showing entries info at the bottom
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Working with large datasets? This React paginated table breaks data into pages with navigation controls at the bottom. Built with shadcn/ui Table, Button, and Select components with Lucide React icons, it shows Previous/Next buttons, direct page number links, and a dropdown to change rows per page (10, 20, 50, 100). The status text displays which entries are visible like Showing 1-10 of 47—perfect for dashboards, admin panels, or any interface where displaying hundreds of rows at once would overwhelm users and hurt performance.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/table-pagination-01.jsonnpx shadcn@latest add https://www.shadcn.io/registry/table-pagination-01.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/table-pagination-01.jsonbunx shadcn@latest add https://www.shadcn.io/registry/table-pagination-01.jsonRelated blocks you will also like
Table with Sortable Columns
Column sorting with indicators
Table with Row Selection
Row checkboxes with bulk actions
Task Table with Actions
Action buttons per row
Searchable Filterable Data Table
Search with pagination
Table with Quick Filters
Filter with page navigation
Table with Sticky Header
Fixed header while scrolling