Pagination

A comprehensive pagination component that provides intuitive navigation through large datasets. The component offers flexible configuration options and consistent styling across different use cases.

Source

View source code

LLM docs

LLM documentation

Package

@platform-blocks/react-ui-library

Examples

⁽⁵⁾

Properties

⁽⁴⁰⁾

Playground

Basic

Provide current, total, and an onChange handler to keep numbered pagination in sync with surrounding state.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
 
import
 
{
 
Block
,
 
Pagination
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
currentPage
,
 setCurrentPage
]
 
=
 
useState
(
1
)
;
  
const
 totalPages 
=
 
10
;
 
  
return
 
(
    
<Block
>
      
<Pagination
 
current
=
{
currentPage
}
 
total
=
{
totalPages
}
 
onChange
=
{
setCurrentPage
}
 
/>
      
<Text
 
size
=
"xs"
 
color
=
"secondary"
>
        
Page
 
{
currentPage
}
 of 
{
totalPages
}
      
</Text
>
    
</Block
>
  
)
;
}

Variants

Switch the variant prop between default, outline, and subtle to align pagination with the surrounding surface treatment.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
 
import
 
{
 
Block
,
 
Pagination
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
defaultPage
,
 setDefaultPage
]
 
=
 
useState
(
5
)
;
  
const
 
[
outlinePage
,
 setOutlinePage
]
 
=
 
useState
(
5
)
;
  
const
 
[
subtlePage
,
 setSubtlePage
]
 
=
 
useState
(
5
)
;
 
  
return
 
(
    
<Block
>
      
<Block
>
        
<Pagination
 
current
=
{
defaultPage
}
 
total
=
{
15
}
 
onChange
=
{
setDefaultPage
}
 
variant
=
"default"
 
/>
        
<Text
 
size
=
"xs"
 
color
=
"secondary"
>
          
Default
 variant keeps the control fully filled
.
 
Page
 
{
defaultPage
}
 of 
15
.
        
</Text
>
      
</Block
>
 
      
<Block
>
        
<Pagination
 
current
=
{
outlinePage
}
 
total
=
{
15
}
 
onChange
=
{
setOutlinePage
}
 
variant
=
"outline"
 
/>
        
<Text
 
size
=
"xs"
 
color
=
"secondary"
>
          
Outline
 keeps the surface quiet 
while
 the active page gets a stroke
.
 
Page
 
{
outlinePage
}
 of 
15
.
        
</Text
>
      
</Block
>
 
      
<Block
>
        
<Pagination
 
current
=
{
subtlePage
}
 
total
=
{
15
}
 
onChange
=
{
setSubtlePage
}
 
variant
=
"subtle"
 
/>
        
<Text
 
size
=
"xs"
 
color
=
"secondary"
>
          
Subtle
 removes backgrounds 
for
 tinted surfaces
.
 
Page
 
{
subtlePage
}
 of 
15
.
        
</Text
>
      
</Block
>
    
</Block
>
  
)
;
}

Sizes

Use the size prop (xs through 3xl) to match pagination density to its container without changing behavior.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
import
 
{
 
Block
,
 
Pagination
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
const
 
SIZES
 
=
 
[
'xs'
,
 
'sm'
,
 
'md'
,
 
'lg'
,
 
'xl'
,
 
'2xl'
,
 
'3xl'
]
 as 
const
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
page
,
 setPage
]
 
=
 
useState
(
3
)
;
 
  
return
 
(
    
<Block
>
      
{
SIZES
.
map
(
(
size
)
 
=>
 
(
        
<Block
 
key
=
{
size
}
>
          
<Text
 
variant
=
"small"
 
color
=
"secondary"
>
{
size
}
</Text
>
          
<Pagination
 
current
=
{
page
}
 
total
=
{
8
}
 
onChange
=
{
setPage
}
 
size
=
{
size
}
 
/>
        
</Block
>
      
)
)
}
    
</Block
>
  
)
;
}

Advanced

Combine showFirst, showPrevNext, siblings, and boundaries to reveal the right amount of context for long result sets.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
 
import
 
{
 
Block
,
 
Pagination
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 
[
page1
,
 setPage1
]
 
=
 
useState
(
10
)
;
  
const
 
[
page2
,
 setPage2
]
 
=
 
useState
(
15
)
;
  
const
 
[
page3
,
 setPage3
]
 
=
 
useState
(
25
)
;
 
  
return
 
(
    
<Block
>
      
<Block
>
        
<Pagination
          
current
=
{
page1
}
          
total
=
{
30
}
          
onChange
=
{
setPage1
}
          showFirst
          showPrevNext
          
siblings
=
{
2
}
          
boundaries
=
{
2
}
        
/>
        
<Text
 
size
=
"xs"
 
color
=
"secondary"
>
          
Includes
 first and last buttons
.
 
Page
 
{
page1
}
 of 
30
.
        
</Text
>
      
</Block
>
 
      
<Block
>
        
<Pagination
          
current
=
{
page2
}
          
total
=
{
40
}
          
onChange
=
{
setPage2
}
          showPrevNext
          
siblings
=
{
1
}
          
boundaries
=
{
1
}
        
/>
        
<Text
 
size
=
"xs"
 
color
=
"secondary"
>
          
Minimal
 navigation with prev
/
next only
.
 
Page
 
{
page2
}
 of 
40
.
        
</Text
>
      
</Block
>
 
      
<Block
>
        
<Pagination
          
current
=
{
page3
}
          
total
=
{
50
}
          
onChange
=
{
setPage3
}
          showPrevNext
          
siblings
=
{
0
}
          
boundaries
=
{
1
}
          
size
=
"sm"
        
/>
        
<Text
 
size
=
"xs"
 
color
=
"secondary"
>
          
Compact
 layout with tight siblings
.
 
Page
 
{
page3
}
 of 
50
.
        
</Text
>
      
</Block
>
    
</Block
>
  
)
;
}

Total & size changer

Set showTotal with totalItems to render an "X-Y of N" summary, and showSizeChanger with pageSizeOptions / onPageSizeChange to let users change the rows-per-page. This is the same footer the DataTable renders internally.

Loading demo…

import
 
{
 useState 
}
 
from
 
'react'
;
 
import
 
{
 
Block
,
 
Pagination
,
 
Text
 
}
 
from
 
'@platform-blocks/react-ui-library'
;
 
export
 
function
 
Demo
(
)
 
{
  
const
 totalItems 
=
 
248
;
  
const
 
[
pageSize
,
 setPageSize
]
 
=
 
useState
(
10
)
;
  
const
 
[
current
,
 setCurrent
]
 
=
 
useState
(
1
)
;
 
  
const
 total 
=
 
Math
.
max
(
1
,
 
Math
.
ceil
(
totalItems 
/
 pageSize
)
)
;
 
  
return
 
(
    
<Block
>
      
<Pagination
        
current
=
{
current
}
        
total
=
{
total
}
        
onChange
=
{
setCurrent
}
        showTotal
        
totalItems
=
{
totalItems
}
        
pageSize
=
{
pageSize
}
        showSizeChanger
        
pageSizeOptions
=
{
[
10
,
 
20
,
 
50
,
 
100
]
}
        
onPageSizeChange
=
{
(
size
)
 
=>
 
{
          
setPageSize
(
size
)
;
          
setCurrent
(
1
)
;
        
}
}
      
/>
      
<Text
 
size
=
"xs"
 
color
=
"secondary"
>
        
Page
 
{
current
}
 of 
{
total
}
 · 
{
pageSize
}
 rows per page
      
</Text
>
    
</Block
>
  
)
;
}

Scan to open this page on your phonereact-ui-library.com/components/Pagination

</>

react-ui-library

100+ accessible, themeable components that work seamlessly across iOS, Android, and Web.

A Platform Blocks product.

Quick Links

Components Charts Hooks

Docs

Getting Started Localization llms.txt

Resources

FAQ Changelog Accessibility Sitemap