Pular para o conteúdo

TablePaginationUnstyled API

Documentação da API para o componente React TablePaginationUnstyled . Aprenda sobre as propriedades disponíveis e a API CSS.

Importação

import TablePaginationUnstyled from '@mui/base/TablePaginationUnstyled';
// ou
import { TablePaginationUnstyled } from '@mui/base';
Você pode aprender sobre a diferença lendo este guia sobre como minimizar o tamanho do pacote.

A pagination for tables.

Propriedades

Propriedades do componente nativo também estão disponíveis.

NomeTipoPadrãoDescrição
count*number
The total number of rows.
To enable server side pagination for an unknown number of items, provide -1.
onPageChange*func
Callback fired when the page is changed.

Signature:
function(event: React.MouseEvent<HTMLButtonElement> | null, page: number) => void
event: The event source of the callback.
page: The page selected.
page*integer
The zero-based index of the current page.
rowsPerPage*integer
The number of rows per page.
Set -1 to display all the rows.
componentelementType
The component used for the root node. Either a string to use a HTML element or a component.
getItemAriaLabelfuncfunction defaultGetAriaLabel(type: ItemAriaLabelType) { return `Go to ${type} page`; }
Accepts a function which returns a string value that provides a user-friendly name for the current page. This is important for screen reader users.
For localization purposes, you can use the provided translations.

Signature:
function(type: string) => string
type: The link or button type to format ('first' | 'last' | 'next' | 'previous').
labelDisplayedRowsfuncfunction defaultLabelDisplayedRows({ from, to, count }: LabelDisplayedRowsArgs) { return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`; }
Customize the displayed rows label. Invoked with a { from, to, count, page } object.
For localization purposes, you can use the provided translations.
labelIdstring
Id of the label element within the pagination.
labelRowsPerPagenode'Rows per page:'
Customize the rows per page label.
For localization purposes, you can use the provided translations.
onRowsPerPageChangefunc
Callback fired when the number of rows per page is changed.

Signature:
function(event: React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>) => void
event: The event source of the callback.
rowsPerPageOptionsArray<number
| { label: string, value: number }>
[10, 25, 50, 100]
Customizes the options of the rows per page select field. If less than two options are available, no select field will be displayed. Use -1 for the value with a custom label to show all the rows.
selectIdstring
Id of the select element within the pagination.
slotProps{ actions?: func
| object, displayedRows?: func
| object, menuItem?: func
| object, root?: func
| object, select?: func
| object, selectLabel?: func
| object, spacer?: func
| object, toolbar?: func
| object }
{}
slots{ actions?: elementType, displayedRows?: elementType, menuItem?: elementType, root?: elementType, select?: elementType, selectLabel?: elementType, spacer?: elementType, toolbar?: elementType }{}

O ref é encaminhado para o elemento raiz.

Demonstrações