Desenvolvendo um Componente de Tabela Paginada Reutilizável com React

Criando um Componente de Tabela Paginada Reutilizável

Criar um componente de tabela paginada no React é uma maneira eficaz de apresentar dados de forma organizada. Neste tutorial, vamos desenvolver uma tabela que pode ser reutilizada em várias partes de sua aplicação.

Estrutura Básica do Componente

Primeiro, vamos estruturar nosso componente. Para isso, precisamos de um arquivo chamado PaginatedTable.js. Aqui está o código inicial:

import React, { useState } from 'react';

const PaginatedTable = ({ data, rowsPerPage }) => {
    const [currentPage, setCurrentPage] = useState(0);

    const handleNextPage = () => {
        setCurrentPage((prev) => prev + 1);
    };

    const handlePreviousPage = () => {
        setCurrentPage((prev) => Math.max(prev - 1, 0));
    };

    const startIndex = currentPage * rowsPerPage;
    const endIndex = startIndex + rowsPerPage;
    const currentData = data.slice(startIndex, endIndex);

    return (
        <div>
            <table>
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Nome</th>
                        <th>Email</th>
                    </tr>
                </thead>
                <tbody>
                    {currentData.map((item) => (
                        <tr key={item.id}>
                            <td>{item.id}</td>
                            <td>{item.name}</td>
                            <td>{item.email}</td>
                        </tr>
                    ))}
                </tbody>
            </table>
            <button onClick={handlePreviousPage} disabled={currentPage === 0}>Anterior</button>
            <button onClick={handleNextPage} disabled={endIndex >= data.length}>Próximo</button>
        </div>
    );
};

export default PaginatedTable;

Este código inicial cria um componente que recebe dados e o número de linhas por página como propriedades. Ele utiliza o estado do React para controlar a página atual e manipula os dados para exibir apenas as linhas necessárias.

Explicação do Código

Vamos entender melhor o que cada parte do código faz. O useState cria uma variável de estado chamada currentPage, que inicia em zero, representando a primeira página. Temos duas funções para navegar entre as páginas: handleNextPage e handlePreviousPage, que alteram o estado da página atual.

O startIndex e endIndex determinam quais dados devem ser exibidos na tabela, baseando-se na página atual e no número de linhas por página. O método slice é usado para pegar apenas os dados que precisamos exibir.

Usando o Componente

Para usar o PaginatedTable, você precisa passar os dados e o número de linhas que deseja exibir por página. Aqui está um exemplo de como utilizar o componente:

import React from 'react';
import PaginatedTable from './PaginatedTable';

const App = () => {
    const data = [
        { id: 1, name: 'João', email: 'joao@example.com' },
        { id: 2, name: 'Maria', email: 'maria@example.com' },
        { id: 3, name: 'José', email: 'jose@example.com' },
        // ... mais dados
    ];

    return <PaginatedTable data={data} rowsPerPage={2} />;
};

export default App;

Neste exemplo, estamos passando um array de dados fictícios e definindo que queremos exibir duas linhas por página. Você pode testar e ajustar o número de linhas para ver como o componente se comporta.

Melhorando a Usabilidade

Para melhorar a usabilidade, você pode adicionar informações como a quantidade total de dados e a página atual. Vamos modificar nosso componente para incluir essas informações:

return (
    <div>
        <table>
            {/* ... código da tabela ... */}
        </table>
        <p>Página {currentPage + 1} de {Math.ceil(data.length / rowsPerPage)}</p>
        <button onClick={handlePreviousPage} disabled={currentPage === 0}>Anterior</button>
        <button onClick={handleNextPage} disabled={endIndex >= data.length}>Próximo</button>
    </div>
);

Conclusão

Com este componente de tabela paginada, você pode exibir dados de forma organizada e reutilizável em sua aplicação React. Sinta-se à vontade para personalizar o estilo da tabela e adicionar mais funcionalidades, como a ordenação de dados ou a busca.

Considerações Finais

Criar componentes reutilizáveis é uma prática essencial em React, pois promove a manutenção e a escalabilidade do código. A tabela paginada que acabamos de desenvolver pode ser facilmente adaptada para diferentes conjuntos de dados e estilos, tornando-a uma ferramenta poderosa em seu arsenal de desenvolvimento.

A Importância dos Componentes Reutilizáveis em React

Os componentes reutilizáveis são fundamentais no desenvolvimento de aplicações React. Eles ajudam a manter o código organizado e facilitam a manutenção. Neste contexto, a tabela paginada é uma solução prática para lidar com grandes volumes de dados. Ao implementar um componente reutilizável, você assegura que seu código seja escalável e fácil de modificar, o que é crucial em um ambiente de desenvolvimento dinâmico. A reutilização de código não só economiza tempo, mas também melhora a qualidade do software, permitindo que os desenvolvedores se concentrem em resolver problemas complexos, em vez de reescrever soluções já existentes.

Algumas aplicações:

• Exibir listas de produtos em um e-commerce.
• Mostrar dados de usuários em um painel administrativo.
• Apresentar relatórios financeiros em aplicações empresariais.

Dicas para quem está começando

• Comece com um pequeno conjunto de dados para testar o componente.
• Explore diferentes estilos de tabela usando CSS.
• Pratique a manipulação de dados para entender como funciona a paginação.

Compartilhe este tutorial