Ui.Pagination

A component to handle page selecting on data which has many pages.

Interactive Demo

You can play around with a Ui.Pagination below using the controls.

Page (0)
Total (300)
Side Pages (1)
Per Page (10)
Size (16px)
Disabled
<Ui.Pagination
size={Ui.Size.Px(16)}
disabled={false}
sidePages={1}
perPage={10}
total={300}
page={0}/>
Page

The current page can be controlled with the page property.

The pagination is zero based which means that the first page is zero (0).
<Ui.Pagination total={30} page={1}/>
Per Page

The number of items per page can be set with the perPage property.

<>
<Ui.Pagination perPage={30} total={300} page={0}/>
<Ui.Pagination perPage={100} total={300} page={0}/>
<Ui.Pagination perPage={300} total={30} page={0}/>
</>
Total Pages

The total number of items can be set with the total property.

<>
<Ui.Pagination perPage={10} total={10} page={0}/>
<Ui.Pagination perPage={10} total={40} page={0}/>
<Ui.Pagination perPage={10} total={100} page={0}/>
</>
Side Pages

The number of pages displayed in either side of the current page can be changed with the sidePages property.

<>
<Ui.Pagination sidePages={1} total={90} page={5}/>
<Ui.Pagination sidePages={2} total={90} page={5}/>
<Ui.Pagination sidePages={3} total={90} page={5}/>
</>
Size

The size of the component can be set with the size property (in pixels).

<>
<Ui.Pagination size={Ui.Size.Px(12)} total={30} page={1}/>
<Ui.Pagination size={Ui.Size.Px(16)} total={30} page={1}/>
<Ui.Pagination size={Ui.Size.Px(20)} total={30} page={1}/>
</>
Disabled

The component can be disabled using the disabled property.

<>
<Ui.Pagination disabled={false} total={30} page={1}/>
<Ui.Pagination disabled={true} total={30} page={1}/>
</>
Change Event

The component calls the onChange property when clicking on one of its buttons.

<Ui.Pagination
total={30}
page={1}
onChange={
(page : Number) {
Ui.Notifications.notifyDefault(<>"Page selected: #{page}"</>)
}
}
/>
Mint UI

Mint UI is a design system and component library for building websites, web and desktop applications.

Copyright © 2018-2024 Szikszai Gusztáv. All rights reserved.