Pular para o conteúdo
Ajude a traduzir esta página

TablePagination API

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

Importação

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

A TableCell based component for placing inside TableFooter for pagination.

Nome do componente

The name MuiTablePagination can be used when providing default props or style overrides in the theme.

Propriedades

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

NomeTipoPadrãoDescrição
count*integer
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: object, 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.
ActionsComponentelementTypeTablePaginationActions
The component used for displaying the actions. Either a string to use a HTML element or a component.
backIconButtonPropsobject
Props applied to the back arrow IconButton component.
classesobject
Sobrescreve ou extende os estilos aplicados para o componente. Veja a API CSS abaixo para maiores detalhes.
componentelementType
The component used for the root node. Either a string to use a HTML element or a component.
getItemAriaLabelfuncfunction defaultGetAriaLabel(type) { 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 }) { 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.
labelRowsPerPagenode'Rows per page:'
Customize the rows per page label.
For localization purposes, you can use the provided translations.
nextIconButtonPropsobject
Props applied to the next arrow IconButton element.
onRowsPerPageChangefunc
Callback fired when the number of rows per page is changed.

Signature:
function(event: object) => 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.
SelectPropsobject{}
Props applied to the rows per page Select element.
showFirstButtonboolfalse
If true, show the first-page button.
showLastButtonboolfalse
If true, show the last-page button.
sxArray<func
| object
| bool>
| func
| object
The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.

O ref é encaminhado para o elemento raiz.

Herança

Embora não explicitamente documentado acima, as propriedades do componente TableCell também estão disponíveis em TablePagination. Você pode tirar vantagem disso para manipular componentes aninhados.

CSS

Nome da regraClasse globalDescrição
root.MuiTablePagination-rootEstilos aplicados ao elemento raiz.
toolbar.MuiTablePagination-toolbarEstilos aplicados a the Toolbar component.
spacer.MuiTablePagination-spacerEstilos aplicados a the spacer element.
selectLabel.MuiTablePagination-selectLabelEstilos aplicados a the select label Typography element.
selectRoot.MuiTablePagination-selectRootEstilos aplicados a the Select component `root` element.
select.MuiTablePagination-selectEstilos aplicados a the Select component `select` class.
selectIcon.MuiTablePagination-selectIconEstilos aplicados a the Select component `icon` class.
input.MuiTablePagination-inputEstilos aplicados a the Select component `root` element.
menuItem.MuiTablePagination-menuItemEstilos aplicados a the MenuItem component.
displayedRows.MuiTablePagination-displayedRowsEstilos aplicados a the displayed rows Typography element.
actions.MuiTablePagination-actionsEstilos aplicados a the internal `TablePaginationActions` component.

Você pode sobrescrever o estilo do componente usando uma dessas opções de customização:

Demonstrações