React Paginação de Grade/Tabela
As interfaces do usuário da tabela de tabela são usadas comumente em muitos produtos da Web. Criar uma interface do usuário de tabela tabular do zero não é fácil, no entanto, Ignite UI for React grade, criar uma interface do usuário de tabela é simples e vincular grandes quantidades de dados locais ou remotos à grade React é fácil. Como a grade é virtualizada por padrão, você não precisa incluir paginação de tabela para mostrar grandes conjuntos de dados. É usado principalmente devido às suas formas mais eficientes de organizar dados complexos na interface do usuário. Com a paginação de tabela, os dados podem ser exibidos em um determinado número de linhas, permitindo que os usuários "rolem" por seus dados, sem realmente precisar de uma barra de rolagem. A interface do usuário para paginação de tabela geralmente inclui coisas como a página atual, o total de páginas e setas/botões clicáveis Anterior e Próximo que permitem que os usuários percorram as páginas, conforme demonstrado aqui:
A paginação de linhas é habilitada na Tabela de Dados/Grade de Dados do Ignite UI for React definindo a IsPagerVisible propriedade. Além disso, você pode limitar o número máximo de linhas visíveis por configuração pageSize.
React Row Paging Example
Visão geral
Do ponto de vista da experiência do usuário, a paginação de tabelas tem prós e contras. De acordo com um artigo recente no UX Matters, aqui está um detalhamento do bom e do ruim quando se trata de paginação de tabela.
Benefícios da paginação de tabelas:
- Limita a escolha do usuário
- Os cliques são mensuráveis
Negativos de paginação de tabela:
- Os usuários ainda precisam rolar
- Os pagers funcionam e se comportam de maneira diferente de site para site
- Muitos controles de interface do usuário podem ser confusos
- Os usuários percebem a paginação e lentidão e incômodo
- Os usuários podem não perceber os controles de paginação
- O carregamento da página pode ser lento
- Os usuários ficam confusos se as ações se aplicam à página ou a todo o conjunto de dados
Com a grade Ignite UI React, permitimos que o desenvolvedor adicione paginação, no entanto, como a grade tem rolagem infinita integrada por padrão, recomendamos rolagem infinita (ou virtual) em vez de adicionar um pager à grade. Com a rolagem infinita virtualizada como a experiência padrão do usuário, você obtém:
- Melhor desempenho enquanto ainda tem controle ou quantos dados são 'paginados' por meio da interação de rolagem
- Abordagem natural para rolar todo o conteúdo
- Todas as interações são claras para o usuário final
- Mapeia as interações naturais em uma experiência do usuário móvel
React Grid/Page Synchronization
Quando os usuários interagem com a Grade, como classificação e agrupamento, e você habilitou o Pager React na grade, você precisa usar as seguintes funções para garantir que os dados de Paginação React sejam sincronizados com a exibição da tabela React.
- applySorts
- applyGroups
- aplicar filtros