Pagination

UsageExamples
• Code

Import

import { Pagination } from '@resultadosdigitais/tangram-components'

Properties

pageSize 📍

Concerns	📍 Required
Type	number

Description

Sets the number of items per page.

total 📍

Concerns	📍 Required
Type	number

Description

Sets the total of items.

currentPage

Type	number
Default	1

Description

Sets current page. Starts from 1.

If receive a negative number, the value will be the first page (1).

If receive a number bigger than the number of pages, the value will be the last page available.

onChange

Type	func
Param	event React.SyntheticEvent - The event source of the callback.
Param	page number - The number of current page.
Param	infos object - Additional information about component status. infos.reason string - The reason for changes. Can be Pagination.reasonsForChange.currentPageChange or Pagination.reasonsForChange.pageSizeChange. infos.pageSize number - The number of items per page.

Description

Callback fired when the pagination changes.

renderSummary

Type

string | func

Param

args object - Object with information available for rendering the summary in case the attribute value is a function. args.total number - The total of items. args.pageSize number - The number of items per page. args.currentPage number - The actual current page. args.firstPageItemIndex number - The index to the first item of the current page. args.lastPageItemIndex number - The index to the last item of the current page. args.PageSizeSelect React.Component - The component to show a select to handle page size.

Description

Sets the content shown as a summary next to the navigation.

// Can be a string:
renderSummary="Showing {pageSize} of {total} itens"

// Or a function:
renderSummary={({ total, PageSizeSelect }) => <>Showing <PageSizeSelect /> of {total} itens</>}

pageSizeSelectOptions

Type	arrayOf(number)
Default	[10, 20, 50, 100]

Description

Sets all options displayed by the PageSizeSelect component.

pageSizeSelectLabel

Type	string
Default	Pagination.translations.en.pageSize

Description

Custom text for the label that identifies the page size select. This text is not displayed on the screen.

Preset values for English, Brazilian Portuguese and Spanish are available in Pagination.translations.en.pageSize, Pagination.translations.ptBR.pageSize and Pagination.translations.es.pageSize.

nextLabel

Type	string
Default	Pagination.translations.en.next

Description

Sets label for go to next button.

Preset values for English, Brazilian Portuguese and Spanish are available in Pagination.translations.en.next, Pagination.translations.ptBR.next and Pagination.translations.es.next.

previousLabel

Type	string
Default	Pagination.translations.en.previous

Description

Sets label for go to previous button.

Preset values for English, Brazilian Portuguese and Spanish are available in Pagination.translations.en.previous, Pagination.translations.ptBR.previous and Pagination.translations.es.previous.

hideNavigation

Type	bool
Default	false

Description

Sets if the navigation is hidden (not rendered).

nextButtonLabel 🗑️

Concerns	🗑️ Deprecated: Replace by `nextLabel` property.
Type	string

Description

Sets label for go to next button.

onChangePage 🗑️

Concerns	🗑️ Deprecated: Replace by `onChange` property.
Type	func

Description

Callback fired when the pagination changes.

prevButtonLabel 🗑️

Concerns	🗑️ Deprecated: Replace by `previousLabel` property.
Type	string

Description

Sets label for go to previous button.

rowsPerPage 🗑️

Concerns	🗑️ Deprecated: Replace by `pageSize` property.
Type	number

Description

Sets the number of items per page.

totalRows 🗑️

Concerns	🗑️ Deprecated: Replace by `total` property.
Type	number

Description

Sets the total of items.

Feedback