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>

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