React Bootstrap component to build pagination for array of items
npm install @vlsergey/react-bootstrap-array-pagination
npm i --save @vlsergey/react-bootstrap-array-pagination
`
or
`
npm i --save-dev @vlsergey/react-bootstrap-array-pagination
`
Usage
`jsx
import ArrayPagination from '@vlsergey/react-bootstrap-array-pagination';
const items = / array of some items /;
{ pageResult => <>
{/ JSX to render limited subarray of original items /}
}
{pageResult => <>
{pageResult.components}
{ This is a page ${pageResult.page + 1} of size ${pageResult.size} at offset ${pageResult.offset}}
{pageResult.pageItems.map( item =>
- {'This is a line for item: '}{JSON.stringify( item )}
)}
{pageResult.components}
}
`
Props
| Property | Default value | Description |
| --------------- |:-------------:| ----------- |
| items | required | Items to paginate. |
| children | required | Function that specify how to render single page. |
| defaultPage | 0 | Page to display by default (0-based). |
| defaultSize | 10 | Items to diplay on single page by default. _Should_ present in sizeProps.options array. |
| pageProps | {} | Properties passed to instance of @vlsergey/react-bootstrap-pagination |
| sizeProps | {} | Properties for page size select customization. So far supports only options property. |
children function argument structure
The argument of children function is a structure with following properties:
| Property | Description |
| --------------- |------------ |
| components | Single 100%-width line (DIV) with pagination and page size form controls.
| pageItems | Slice of original items array to display on current page.
| offset | Current offset for first current page item (0-based)
| page | Current page index (0-based)
| size | Current page size
Examples
`jsx
items={[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17 ]}>
{( { components, pageItems } ) => <>
{components}
{pageItems.map( item => -
{'This is a line of item #'}{item}
)}
{components}
}
`
`jsx
defaultSize={3}
items={[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17 ]}
pageProps={{ showFirstLast: false, showPrevNext: false }}
sizeProps={{ options: [ 1, 2, 3, 4, 5 ] }}>
{( { components, pageItems } ) => <>
{components}
{pageItems.map( item => -
{'This is a line of item #'}{item}
)}
{components}
}
``