Paginate

The paging function can also be used independently if tables are not needed.

import {Paginate} from '@acrool/react-table';


<Paginate
    meta={meta}
    info={info}
    onChangePage={onChangePage}
    pageLimitOptions={pageLimitOptions}

    nextText={<ArrowRightIcon/>}
    prevText={<ArrowRightIcon style={{transform: 'rotate(180deg)'}}/>}
/>

Show 11 - 20 itemTotal 100 item / 6 Page

8/Page40/Page72/Page150/Page

Props

Props Name	Type	Required	Default	Description
style	CSS.Properties
className	string
meta	Required<IPage>	✓		Currently specified page parameters
info	IPaginateInfo		{totalItems: 0,totalPages: 1}	Page count information
onChangePage	(paginateMeta: Required<IPage>) => void	✓		Method when changing page
pageLimitOptions	number[]		[8, 40, 72, 150]	Select the menu to display the number of items per page
nextText	ReactNode			Next page button text
prevText	ReactNode			Previous page button text

IPage

Props Name	Type	Required	Description
currentPage	number	✓	What page is currently
pageLimit	number		Display several pieces of information on one page

IPaginateInfo

Props Name	Type	Required	Description
totalItems	number	✓	Total number of data
totalPages	number	✓	Total pages