Our Code Editor is editable, and the preview is live.
The optional integer `defaultCurrent` prop is used as initial page on Mount.
The integer `total` prop is required
The optional object `paginationProps` prop accepts an object of styleProps passed to the wrapper.
The optional boolean or string `focusRing` prop adds focus rings to your pagination buttons.
Providing a string value sets that string as the color of the focus ring
The optional integer `pageNeighbours` prop determines the amount of pages on either side of the current page before the arrows
The optional boolean `defaultPageSize` prop sets the initial page size.
The optional boolean `pageSize` prop sets the controlled page size.
The optional integer `showSizeChanger` prop makes the sizechanger visible
You can set the pageSize options with the array pageSizeOptions prope.g. [10, 20, 50, 100]
You can set the detect pageSize changes with the function onShowSizeChange prop It provides the currentPage and pageSize parameters.
The optional boolean `showQuickJumper` prop displays the page jumper
The optional string `size` prop changes the Pagination Size
The optional boolean `simple` prop toggles the simplified mode.
The optional boolean `disabled` prop disables the pagination
The optional integer `current` prop controls the active page.
The optional function `onChange` prop provides 4 parameters to the function when the page changes: the current page number; the total number of pages; total number of data on the current page and the total number of data.
You can show the total number of data by setting showTotal.
The itemRender prop is a function that lets you modify the Pagination elements. It receives currentpage and type parameters, except when the type is pageSize, you receive the current pageSize.
The possible types are prev, next, backward, forward, pageSize, page.
You must use the forwardRef to avoid bugs.
The colorScheme prop modifies the color Theme
The rounded prop modifies the buttons&apos borderRadius
The baseStyles prop accepts styleProps for normal State
The activeStyles prop accepts styleProps for active State
The hoverStyles prop accepts styleProps for hover State. If not available, activeStyles works for hover
Pass the responsive prop to reduce the pagination elements on smaller screens.
You can display some elements by passing an object in the responsive prop setting them to true.
The possible keys for the responsive object are activePage, totalRender, fastBackward, fastForward, pageSize, pageJumper
Set the boolean hideOnSinglePage prop to false, to stop pagination dissapearing when there&aposs only one page.
Proudly developed in by Anuoluwapo Abraham