Uma grade de dados de reação temática com ótimos recursos focados em UX

KendoReagir pode economizar muito tempo porque oferece componentes pré-construídos que você pode usar em seu aplicativo imediatamente. Eles têm uma boa aparência, mas o mais importante é que são facilmente personalizáveis, então têm a aparência que você precisa. E eu diria que a aparência nem é a parte importante. Existem muitas bibliotecas de componentes que se concentram nos recursos visuais. Esses componentes resolvem os problemas de interatividade mais difíceis em UI/UX e fazem isso com elegância, velocidade e acessibilidade em mente.

Vamos dar uma olhada em seus Grade de dados de reação componente.

O ol' <table> elemento é a ferramenta certa para o trabalho de grades de dados, mas uma tabela não oferece a maioria dos recursos que compõem um Bom estado, com sinais de uso experiência de navegação de dados. Se usarmos o KendoReact <Grid /> componente (e amigos), obtemos uma tonelada de recursos extras, qualquer um dos quais não é trivial de executar bem, e todos juntos constituem uma solução extremamente atraente. Vamos examinar uma lista do que você recebe.

Colunas classificáveis

Você certamente escolherá uma ordem padrão para seus dados, mas se qualquer linha de dados tiver itens como IDs, datas ou nomes, é perfeitamente provável que um usuário queira classificar a coluna por esses dados. Talvez eles queiram visualizar os pedidos mais antigos ou os pedidos de maior valor total. HTML não ajuda na ordenação de tabelas, então isso é uma questão de tabela (entendeu?!) para uma biblioteca JavaScript para grades de dados, e é perfeitamente tratado aqui.

Paginação e Limites

Quando você tem mais do que, digamos, algumas dezenas de linhas de dados, é comum que você queira paginá-los. Dessa forma, os usuários não precisam rolar tanto e, igualmente importante, mantém a página rápida ao não tornar o DOM muito grande. Um dos problemas com a paginação é que ela dificulta a classificação! Você não pode simplesmente classificar as 20 linhas que pode ver; espera-se que todo o conjunto de dados seja classificado. É claro que isso é tratado no componente Data Grid do KendoReact.

Ou, se a paginação não for sua preferência, a grade de dados oferece rolagem virtualizada – nas direções de coluna e linha. Esse é um toque agradável, pois os dados são carregados rapidamente para uma rolagem suave e natural.

Linhas expansíveis

Uma grade de dados pode ter vários dados visíveis na própria linha, mas pode haver ainda mais dados que um usuário pode querer extrair de uma entrada assim que a encontrar. Talvez sejam dados que não precisam ser referenciados da mesma forma que os dados da coluna. Isso pode ser complicado devido à forma como as células da tabela são dispostas. Os dados ainda estão associados a uma única linha, mas muitas vezes você precisa de mais espaço do que a largura de uma célula oferece. Com o componente KendoReact Data Grid, você pode passar um detail prop com um componente React arbitrário para mostrar quando uma linha é expandida. Super flexível!

Design Responsivo

Talvez a coisa mais notoriamente difícil de realizar <table> designs é como exibi-los em telas pequenas. Diminuir o zoom não é uma experiência de usuário muito boa, nem reduzir a tabela em algo que não seja semelhante a uma tabela. O problema das grades de dados é que elas são todas diferentes e você saberá que os dados são mais importantes para seus usuários. O componente KendoReact Data Grid ajuda nisso, tornando sua grade de dados rolável/deslizável e também sendo capaz de bloquear colunas para garantir que continuem fáceis de encontrar e fazer referência cruzada.

Filtrando dados

Este é talvez meu recurso favorito apenas por ser focado em UX. Imagine que você está olhando para uma grade de pedidos de big data e pensa “Deixe-me ver todos os pedidos do White Clover Markets”. Com um recurso de filtragem, talvez você digite rapidamente “trevo” na entrada do filtro e, viola, todos esses pedidos estão ali. Isso é ainda mais complicado quando você também oferece suporte a ordenação e paginação - por isso é ótimo que todos esses recursos funcionem juntos.

Dados de agrupamento

Agora, esse recurso realmente me surpreende um pouco. Filtrar e classificar são muito úteis, mas em alguns casos deixam um pouco a desejar. Por exemplo, é fácil filtrar muito rapidamente, deixando os dados que você está vendo muito limitados. E com a classificação, você também pode tentar observar um subconjunto de dados, mas cabe ao seu cérebro descobrir onde esses dados começam e terminam. Com o agrupamento, você pode dizer à grade de dados para agrupar fortemente as coisas que são mais importantes para você, mas ainda aproveitar a filtragem e a classificação além disso. Isso torna instantaneamente a exploração de dados mais fácil e útil.

Localização

É aqui que você pode realmente dizer que o KendoReact ficou cheio. Seria muito lamentável escolher algum tipo de biblioteca de componentes e então perceber que você precisa de localização e perceber que ela não foi feita para ser um cidadão de primeira classe. Você evita tudo isso com KendoReact, que você pode ver neste componente Data Grid. Na demonstração, você pode trocar inglês por espanhol com um simples menu suspenso e ver todas as datas localizadas. Você consegue qualquer tipo de tradução e localização com o <LocalizationProvider> e <IntlProvider>, ambos conceitos confortáveis ​​do React.

Exportando para PDF ou Excel

Aqui está uma demonstração ao vivo disso:

Vamos agora! Isso é muito legal.

Isso não é tudo…

Confira a documentação do React Data Grid. Há muitos outros recursos que nem chegamos aqui (fixação de linha! edição de células!). E aqui está algo para tranquilizar sua mente: este componente, e todos os componentes do KendoReact, são compatíveis com o teclado e atendem aos padrões de acessibilidade da Seção 508. Isso nao é um feito pequeno. Quando os componentes são tão complexos e envolvem tanta interatividade, é difícil acertar a acessibilidade. Portanto, você não apenas obtém componentes bonitos que funcionam em qualquer lugar, mas também componentes ricamente interativos que oferecem uma experiência de usuário além do que você imagina, e tudo é feito de forma rápida e acessível. Isso é bastante irreal, na verdade.

Fonte: https://css-tricks.com/a-themeable-react-data-grid-with-great-ux-focused-features/