Oihana Next UI

Basic Pagination

Current Page: 1Offset: 0

const [ offset, setOffset ] = useState( 0 ) ;

<Pagination

    limit    = { 10 }

    offset   = { offset }

    total    = { 100 }

    onChange = { (offset, page) => setOffset(offset) }

/>

With Label

<Pagination

    limit    = { 12 }

    offset   = { offset }

    total    = { 250 }

    onChange = { handleChange }

    label    // Show default label

/>

Custom Label Format

const labelFormat = ( current, total, offset, totalItems ) => {

    const start = offset + 1 ;

    const end = Math.min( offset + limit, totalItems ) ;

    return `$${start}–$${end} of $${totalItems} items` ;

} ;

<Pagination labelFormat={ labelFormat } label />

Pagination with Data Table

ID	Name	Status
1	Item 1	Pending
2	Item 2	Inactive
3	Item 3	Active
4	Item 4	Pending
5	Item 5	Inactive

Different Sizes

size="xs"

size="sm" (default)

size="md"

size="lg"

Different Colors

Minimal Pagination (No First/Last Buttons)

<Pagination

    showFirst = { false }

    showLast  = { false }

/>

Custom Navigation Icons

import { MdFirstPage, ... } from 'react-icons/md' ;

<Pagination

    FirstIcon = { MdFirstPage }

    LastIcon  = { MdLastPage }

    NextIcon  = { MdNavigateNext }

    PrevIcon  = { MdNavigateBefore }

/>

Edge Cases

Few Pages (Only 2 pages)

Many Pages (100 pages total)

Single Page (Hidden)

Pagination with 10 items and limit=20 won't display (only 1 page)

↑ Nothing renders when there's only 1 page

Disabled State

<Pagination disabled />

Advanced: With Reset Button

Horizontal Alignment

justify-start (default)

justify-center

justify-end

Wrapper with flex justify-center

Centered without label

// Left aligned (default)

<Pagination className="justify-start" />

// Center aligned

<Pagination className="justify-center" />

// Right aligned

<Pagination className="justify-end" />

// Centered in wrapper (recommended)

<div className="flex justify-center">

    <Pagination />

</div>

Compact (mobile-safe)

The default layout never pushes the page into a horizontal scroll: the button strip scrolls inside its own row on narrow widths. The opt-in compact mode collapses the strip to ‹ page control › with a jump-to-page control. Resize the window below md to see compactBelow switch.

compactBelow="md" (full ≥ md, compact below)

compact jumpMode="input"

compact jumpMode="modal"

// Auto compact below the md breakpoint

<Pagination compactBelow="md" />

// Always compact, with a jump-to-page modal

<Pagination compact jumpMode="modal" />

Range Summary & Page Size

showRange shows the item range (« 1–48 of 10269 ») instead of the page number, and pageSizes renders an items-per-page selector (onLimitChange fires on change). Both are opt-in and independent.

showRange + pageSizes

showRange only

compact + showRange + pageSizes

<Pagination

    limit         = { limit }

    offset        = { offset }

    total         = { 10269 }

    onChange      = { ( offset ) => setOffset( offset ) }

    showRange

    pageSizes     = { [ 24, 48, 96, 200 ] }

    onLimitChange = { ( limit ) => { setLimit( limit ) ; setOffset( 0 ) } }

/>

Label Position

labelPosition="right" (default)

labelPosition="left"

labelPosition="top" labelAlign="center"

labelPosition="top" labelAlign="start"

labelPosition="top" labelAlign="end"

labelPosition="bottom" labelAlign="center"

labelPosition="bottom" labelAlign="start"

labelPosition="bottom" labelAlign="end"

// Label on right (default)

<Pagination label labelPosition="right" />

// Label on left

<Pagination label labelPosition="left" />

// Label on top (centered)

<Pagination

    label

    labelPosition = "top"

    labelAlign    = "center"

/>

// Label on bottom (left aligned)

<Pagination

    label

    labelPosition = "bottom"

    labelAlign    = "start"

/>

Pagination Component

Pagination Examples