Pular para o conteúdo principal

Pagination

Dica

O Pagination é totalmente controlado. É possível definir os estados necessários para manipular as interações, como alterar página atual e quantidade de itens por página.

Básico​

O Pagination pode ser usado apenas com os botões de navegação entre páginas.

Com resumo​

Use a propriedade renderSummary para mostrar um resumo dos itens junto à navegação. Essa propriedade pode receber uma string contendo chaves específicas, que serão substituídas pelo valor final de cada uma delas.

As chaves disponíveis são:

  • {total}: Total de itens paginados
  • {pageSize}: Número de itens por página
  • {currentPage}: Página atual
  • {firstPageItemIndex}: Índice do primeiro item da página atual
  • {lastPageItemIndex}: Índice do último item da página atual

Por exemplo:

Seleção de tamanho de página​

Use a propriedade renderSummary declarando uma função para obter o subcomponente PageSizeSelect e informações sobre a paginação através dos parâmetros disponíveis. Para mais detalhes acesse nossa aba de API do componente.

É possível também passar opções customizadas para o PageSizeSelect através da propriedade pageSizeSelectOptions.

Evento onChange​

Para gerenciar os eventos de mudança do componente, a propriedade onChange espera um callback que suporta os seguintes parâmetros nesta ordem:

  1. O objeto do evento disparado
  2. O valor da página atual
  3. Informações gerais sobre o componente, como número de itens por página e motivo de uma mudança

Para mais detalhes acesse nossa aba de API do componente.

Navegação oculta​

Use a propriedade hideNavigation para ocultar a navegação e exibir apenas o resumo.

Internacionalização​

É possível passar valores customizados para os diferentes textos usados internamente pelo componente. São eles:

  • previousLabel: Texto para o botão de voltar à página anterior
  • nextLabel: Texto para o botão de avançar à próxima página
  • pageSizeSelectLabel: Texto para rotular o subcomponente PageSizeSelect. Este texto não é exibido, mas é importante para questões de acessibilidade

Para ajudar neste processo, constantes estão disponíveis com valores padrões para inglês, português e espanhol. Para mais detalhes acesse nossa aba de API do componente.

Exemplo de uso das constantes para português:

Usando junto com react-i18next​

Ao usar o renderSummary com o subcomponente PageSizeSelect, use o componente Trans.

Exemplo:

import { Trans } from 'react-i18next';

const ExampleUsingTrans = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  const handleChange = (_, page, { pageSize }) => {
    setPageSize(pageSize);
    setCurrentPage(page);
  };

  return (
    <Pagination
      total={100}
      pageSize={pageSize}
      currentPage={currentPage}
      onChange={handleChange}
      renderSummary={({ pageSize, total, PageSizeSelect }) => (
        <Trans
          i18nKey="myKey"
          values={{ pageSize, total }}
          components={{ select: <PageSizeSelect /> }}
        />
      )}
    />
  );
};

Ao usar o renderSummary apenas como texto, use a função t do hook useTranslation, passando as variáveis.

import { useTranslation } from 'react-i18next';

const ExampleUsingT = () => {
  const { t } = useTranslation();
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  const handleChange = (_, page, { pageSize }) => {
    setPageSize(pageSize);
    setCurrentPage(page);
  };

  return (
    <Pagination
      total={100}
      pageSize={pageSize}
      currentPage={currentPage}
      onChange={handleChange}
      renderSummary={({ pageSize, total }) => t('myKey', { pageSize, total })}
    />
  );
};

Feedback​