.finally(React)

English
Copyright © 2023-currentdotfinally, LLC

Pagination

When you have too much data and it takes forever to load

The Table component can be used by importing { Pagination } from "finallyreact".

Example

Total: 112

Page: 1

size: 10

1
2
3
4
5
12
Example

Size Dropdown

Total: 112

Page: 1

size: 10

1
2
3
4
5
12
10
Rows
Size Dropdown

Disabled

Total: 112

Page: 1

size: 10

1
2
3
4
5
12
10
Rows
Disabled

Simple

Total: 112

Page: 1

size: 10

1
2
3
4
5
12
Simple

Pagination Props

Prop NameProp TypeDescription
arrowPropsHTMLAttributesProps for both arrow buttons
disabledbooleanDisables user interaction
leftArrowPropsHTMLAttributesProps for the left arrow button
maxDisplayPagesnumberMaximum number of pages to display
onChangePage(page: number, size: number) => voidCallback for changing the page
pagenumberCurrent page number
pagePropsHTMLAttributesProps for each page button
rightArrowPropsHTMLAttributesProps for the right arrow button
showSizeDropdownbooleanWhether to show a dropdown for selecting the page size
simplebooleanSimple pagination with no styles
sizenumberNumber of items per page
sizeDropdownPropsHTMLAttributesProps for the size dropdown
sizesnumber[]Array of available page sizes
totalnumberTotal number of items