Pagination
Use Pagination to show a long data divided into several pages.
Example
Live Editor
function paginationFunc() { const total = 26; return ( <> <Pagination total={total} defaultCurrent={1} onPageChange={(page) => console.log({ page })} dataSetSize="small" pageLabel="Page" totalItemsInfoLabel={`of ${total} items`} /> <Pagination total={total} defaultCurrent={1} defaultPageSize={10} pageSizeOptions={[ { value: '10', label: '10' }, { value: '20', label: '20' }, { value: '30', label: '30' }, { value: '40', label: '40' }, { value: '50', label: '50' } ]} onPageSizeChange={(pageSize) => console.log({ pageSize })} onPageChange={(page) => console.log({ page })} dataSetSize="large" pageLabel="Page" totalItemsInfoLabel={`of ${total} items`} itemsPerPageLabel="Items per page" /> </> ); }
Result
Loading...
Usage Rules
Do:
- Use Pagination when you have a long list.
Don’t:
- Pass
defaultCurrent
a bigger number than last page number - Pass
defaultPageSize
out of defined pages sizes (10, 20, 30, 40, 50)
Variants
Controls
Pagination control button can be managed with prop controls
, and default is set to true
.
Live Editor
<> <Pagination total={20} dataSetSize="small" controls={false} /> <Pagination total={120} dataSetSize="large" controls={false} /> </>
Result
Loading...
DataSetSize
Pagination comes in two dataSetSize variants: small
and large
.
Use the large
size when you have large amount of items that requires more pages.
Live Editor
<> <Pagination total={20} dataSetSize="small" /> <Pagination total={120} dataSetSize="large" /> </>
Result
Loading...
Total
The total count of items needed to be paginated.
Live Editor
<Pagination total={34} />
Result
Loading...
Text Props
We have pageLabel
and totalItemsInfoLabel
as mandatory props.
Live Editor
<> <Pagination total={20} dataSetSize="small" pageLabel="Page" totalItemsInfoLabel={`of 20 items`} /> <Pagination total={120} dataSetSize="large" pageLabel="Page" totalItemsInfoLabel="of 120 items" itemsPerPageLabel="Items per page" /> </>
Result
Loading...
Props
Name | Type | Default |
---|---|---|
totalItemsInfoLabel * Total Items Info Label |
| — |
pageLabel * Page Label |
| — |
total * number of total items |
| — |
dataSetSize Size of the pagination data set |
| "small" |
defaultCurrent Default current page number |
| — |
defaultPageSize Default page size |
| — |
pageSizeOptions Available page size options |
| "[
{ value: '10', label: '10' },
{ value: '20', label: '20' },
{ value: '30', label: '30' },
{ value: '40', label: '40' },
{ value: '50', label: '50' }
]" |
onPageChange Callback fired when the page is changed |
| — |
onPageSizeChange Callback fired when the page size is changed |
| — |
menuPlacement Placement prop for dropdown |
| "auto" |
itemsPerPageLabel Items Per Page Label Text |
| — |
hasControls hasControls for pagination |
| true |
css Add custom styles to this component. Use with caution. Learn more here: Link |
| — |
inputFieldCss |
| — |
data-{foo} Data attributes can be used by testing libraries to retrieve components or assert their existence |
| — |
* - the prop is required. |