Logo
Chakra-UIReactJsNext.JS
Head

@codecraftkit

Documentation

Paginate

Description#

The Paginate is used to handle a page Change in an amount of data predefined.

It is recommended to use it with the DataTable.

Import#

it can be imported from the core.

Code Example

import { Paginate } from "@codecraftkit/core";

or alone.

Code Example

import Paginate from "@codecraftkit/paginate";

Usage#

because the total is set on 50 and the limit is set on 10, each page will have 10 items

Code Example

<Paginate
  total={50}
  limit={10}
  onPageChange={(page)=>console.log(page)}
/>

Extra options#

Code Example

<Paginate
  total={50}
  limit={10}
  onPageChange={(page)=>console.log(page)}
  justifyRight={false}
/>

Props#

name

type

required

default

description

total

Number

yes

The total of items in the data

limit

Number

yes

The number of items to show

onPageChange

Function

no

The function to handle a page change

loading

Boolean

no

false

Show a loading animation

legend

Boolean

no

true

Shows a legend along with a select

showNumbers

Boolean

no

false

Shows a numbers between arrows, ot only works on render

justifyRight

Boolean

no

true

Push items to the right

statePage

state

no

State that handles the paginate page, it must start at 1

setStatePage

setState

no

Let the paginate handle the setState logic, this disables onPageChange prop

isAtBottom

Boolean

no

false

Changes the orientation where the select page is displayed