Pagination

Pagination controls are groups of buttons that allow the user to navigate through long lists by organizing the content into multiple, shorter pages rather than a single, long page.

Props

currentPage

Number

required

ofLabel

String

"of"

onPageChange

Func

required

onPageSizeChange

Func

pageSize

Number

required

pageSizeLabel

String

sizeOptions

Array<number>

[25, 50, 100]

totalItems

Number

required

viewingLabel

String

"Viewing"

Examples

Default Usage

Viewing 1-25

of 200

<State initial={{ pageNum: 1 }}>
  {({ state, setState }) => (
    <Pagination
      currentPage={state.pageNum}
      pageSize={25}
      totalItems={200}
      onPageChange={pageNum => setState({ pageNum })}
    />
  )}
</State><State initial={{ pageNum: 1 }}>
  {({ state, setState }) => (
    <Pagination
      currentPage={state.pageNum}
      pageSize={25}
      totalItems={200}
      onPageChange={pageNum => setState({ pageNum })}
    />
  )}
</State>

With Page Size

of 200

<State initial={{ pageNum: 1, pageSize: 25 }}>
  {({ state, setState }) => (
    <Pagination
      currentPage={state.pageNum}
      pageSize={state.pageSize}
      totalItems={200}
      onPageChange={pageNum => setState({ pageNum })}
      onPageSizeChange={pageSize => setState({ pageSize, pageNum: 1 })}
    />
  )}
</State><State initial={{ pageNum: 1, pageSize: 25 }}>
  {({ state, setState }) => (
    <Pagination
      currentPage={state.pageNum}
      pageSize={state.pageSize}
      totalItems={200}
      onPageChange={pageNum => setState({ pageNum })}
      onPageSizeChange={pageSize => setState({ pageSize, pageNum: 1 })}
    />
  )}
</State>