Você pode fazer isso com uma grade de dados JavaScript?

Este artigo foi gentilmente apoiado por nossos queridos amigos da Progress Kendo UI, que estão comprometidos em fornecer aos desenvolvedores as ferramentas necessárias para aproveitar e dominar a evolução tecnológica que molda nossa sociedade e o mundo. Obrigado!

As grades de dados, também conhecidas como tabelas de dados, são essenciais para apresentar grandes quantidades de dados aos usuários. Os usuários devem poder visualizar os dados de maneira fácil de entender, analisar e manipular. No entanto, construir exibições de grade de dados com desempenho, velocidade e experiência do usuário em mente pode ser uma tarefa particularmente assustadora. Isso é especialmente verdadeiro ao construí-los do zero ou ao usar bibliotecas com funcionalidade limitada e desempenho abaixo da média.

Não há escassez de bibliotecas que empacotam grades de dados. No entanto, a maioria oferece apenas um conjunto limitado de recursos de grade, comuns entre eles como paginação, filtragem, classificação e temas. Outras bibliotecas de grade de dados são construídas como wrappers que dependem de várias dependências. Esses tipos de bibliotecas afetam desfavoravelmente o desempenho de sua grade em comparação com suas contrapartes nativas. Eles não são construídos de novo para cada framework ou linguagem. Como tal, essas bibliotecas não nativas podem ser lentas, podem deixar de aproveitar os recursos superiores de uma estrutura/linguagem, carecer de funcionalidade crucial e exigir configuração adicional para funcionar.

Outra coisa pela qual essas bibliotecas são caracterizadas é a má experiência do usuário. Eles geralmente não conseguem implementar o design responsivo para diferentes tamanhos e orientações de tela, são incapazes de bloquear ou tornar partes de uma grade grudentas e tornam a acessibilidade uma reflexão tardia. Além disso, eles apenas fornecem edição em formulários separados da grade, o que muitas vezes envolve várias ações para concluir. Isso pode ser cansativo e repetitivo principalmente ao editar vários itens de dados. Outros nem oferecem edição. Para adicionar a isso, eles tendem a não ter a funcionalidade de exportação de dados e deixam os usuários confiando na impressão de páginas da Web para exportações.

Devido à sua funcionalidade e recursos limitados, você precisa complementá-los com bibliotecas separadas para construir uma grade adequada. Por exemplo, para dados de gráficos, você teria que usar uma biblioteca de gráficos diferente, pois a biblioteca de grades não a ofereceria. Além disso, você não pode incorporar esses componentes não relacionados à grade, pois o suporte a eles não é integrado.

Para resolver esses problemas, você teria que usar uma biblioteca que não é apenas criada para ser nativa, mas também incorpora uma variedade de componentes complementares e se concentra na excelente experiência e desempenho do usuário. Para demonstrar os recursos de uma grade de dados ideal, usaremos Kendo UI Data Grids como exemplo. Essas grades de dados são um dos mais de 100 componentes disponíveis em um pacote de biblioteca chamado Progress Kendo UI. O pacote consiste em quatro bibliotecas de componentes construídas nativamente para várias estruturas de front-end. Estes são Kendo UI para Angular, KendoReact, Kendo UI para Vue e Kendo UI para jQuery. Os exemplos dados ao longo desta peça apresentarão grades de todas essas quatro bibliotecas.

Design responsivo

Quando se trata de grades de dados, seus usuários devem ter uma visão completa dos dados com os quais estão trabalhando. Dados ocultos ou de difícil acesso são frustrantes de ler e desligam completamente os usuários da sua rede. Muitas bibliotecas de grades não tornam suas grades responsivas e cabe a você implementá-las usando estilo e alguma lógica. Isso pode ser especialmente complicado com dados contendo muitas colunas. Se você estiver construindo várias grades com diferentes tipos de dados com necessidades de representação variadas, isso aumentará ainda mais a complexidade. Você precisa descobrir rolagem, consultas de mídia, tamanhos de fonte, dimensionamento, se deve omitir algumas partes dos dados e assim por diante.

As tabelas de dados modernas devem ser capazes de responder a mudanças na orientação e exibir bem todos os dados em todos os tamanhos de tela. Por exemplo, as grades de dados da interface do usuário do Kendo ajustam seu tamanho dependendo do tamanho da janela de visualização e do número de linhas que ela acomoda. Por exemplo, na Grade Angular, você pode definir sua altura e a grade se tornará rolável se algum de seu conteúdo não couber. Definir a altura envolve apenas especificar um valor para a propriedade CSS height da grade e garantir que o elemento pai também tenha um conjunto de altura. Nenhuma outra configuração é necessária. Você pode ver como isso é feito nesta tabela de estoque de amostra aqui.

Além disso, você pode optar por alternar a visibilidade das colunas na grade enquanto ainda exibe todos os dados necessários. Você consegue isso criando diferentes colunas para diferentes intervalos de tamanho de tela e usando a propriedade de media em uma coluna para decidir onde mostrá-los. Por exemplo, nesta tabela de dados Angular, para tamanhos de tela maiores ( media="(min-width: 450px)" ), as colunas estão em exibição completa e se parecem com isso.

No entanto, você pode optar por ocultar as colunas preço, em estoque e descontinuadas em telas médias ( media="(min-width: 680px)" ). Isso deve ficar assim:

Em telas menores ( media="(max-width: 450px)" ), você pode criar uma única coluna personalizada para mostrar todos os dados semelhantes a este:

Kendo UI Data Grids também suportam identificadores de dispositivo Bootstrap 4 como xs, sm, md, lg e xl . Embora seja mais fácil de usar, não é tão versátil, pois limita o número de consultas que você pode incluir a uma. Por exemplo, com seus próprios pontos de interrupção, você pode ter algo como media="(min-width: 500px) and (max-width: 1200px)" . A combinação de vários identificadores não é possível com os identificadores de dispositivo do Bootstrap 4.

Conformidade de acessibilidade

Certificar-se de que sua rede atende aos padrões modernos de acessibilidade deve ser uma prioridade. Fazer isso garante que pessoas com deficiência possam se envolver com sua rede e garante que haja equidade entre seus usuários. Ainda assim, algumas bibliotecas não fazem nada para garantir que suas grades sejam acessíveis. Outros fazem apenas o mínimo, resultando em grades abaixo do padrão quando avaliadas quanto à acessibilidade. Aumentar essas grades para serem acessíveis envolve uma quantidade razoável de trabalho. Isso é ainda mais complicado por projetos de grade mais intrincados. Embora esse trabalho valha a pena mais tarde para você e seus usuários, essas bibliotecas deveriam ter tornado a acessibilidade uma parte essencial de seus produtos.

O Kendo UI Data Grids o prioriza ao oferecer suporte aos principais padrões de acessibilidade, como WAI-ARIA, Seção 508 e WCAG 2.1. Por exemplo, o KendoReact segue o padrão da Seção 508, garantindo que a maioria de seus componentes seja totalmente acessível e suporte a navegação pelo teclado. Ele segue a diretriz de acesso por teclado da WCAG, tornando a grade e todos os seus componentes incorporados operáveis ​​por teclado. Como resultado, o React Grid atinge o mais alto nível de conformidade WCAG de AAA. Sendo um componente da web, o KendoReact Data Grid cumpre a especificação WAI-RAI para garantir que usuários com deficiência possam interagir adequadamente com ele nas páginas da web. Nesta grade de dados React, por exemplo, você pode navegar para os diferentes componentes e linhas usando um teclado.

Rolagem virtual

Com a rolagem virtual, apenas um segmento de dados é renderizado na grade. Isso geralmente é definido como um número de registros a serem buscados. Quando um usuário passa por esse segmento, outro do mesmo tamanho é renderizado. Isso ajuda no desempenho, pois a renderização de um grande conjunto de dados ocupa muita memória e prejudica o desempenho e a velocidade de sua grade. A rolagem virtual dá a ilusão de renderizar todos os dados sem nenhuma das consequências de desempenho.

A rolagem virtual geralmente não é suportada por bibliotecas de grade. Em vez disso, eles incentivam a paginação, que pode não ser a melhor experiência para os usuários ao visualizar grandes quantidades de dados. Ao tentar renderizar enormes quantidades de dados, o desempenho da grade sofre ainda mais, contribuindo para uma experiência terrível do usuário. Para bibliotecas que suportam rolagem virtual, aplica-se apenas a registros nos dados e não a partes específicas dos registros. Isso é particularmente limitante quando os dados têm várias colunas.

Kendo UI suporta rolagem virtual para dados locais e remotos. Por exemplo, na Kendo UI para jQuery Grid, você a habilita definindo a propriedade scrollable.virtual de uma grade como true. Ao configurar isso, a grade carrega apenas o número de itens especificados pela propriedade pageSize da fonte de dados da grade. Você pode ver como isso funciona nesta grade de dados jQuery que usa dados locais.

 <!DOCTYPE html> <html> <head>...</head> <body> ... <div></div> <script> var dataSource = new kendo.data.DataSource({ pageSize: 20, ... }); $("#grid").kendoGrid({ dataSource: dataSource, scrollable: { virtual: true }, ... }); </script> </body> </html>

Essa mesma configuração funcionará para dados remotos, conforme visto nesta tabela de dados do jQuery. Além disso, você pode usar uma configuração semelhante para virtualizar as colunas de uma grade se os registros contiverem várias propriedades que podem ser caras para renderizar todas de uma vez. A propriedade scrollable.virtual precisa ser definida como true. No entanto, a virtualização de colunas não depende da propriedade pageSize . Este exemplo demonstra esse recurso.

Exportações PDF e Excel

Ter a capacidade de exportar dados da grade é fundamental. Os usuários podem precisar distribuí-lo ou manipulá-lo usando aplicativos como planilhas. Seus usuários devem ter a opção de compartilhar dados sem problemas, sem ficarem confinados à grade. Os dados da grade também podem precisar de processamento extra não oferecido pela sua grade, como em planilhas e softwares de apresentação.

Embora este seja um caso de uso essencial, ele não é atendido em muitas bibliotecas. Os usuários têm que recorrer à impressão de páginas inteiras da web para obter acesso aos dados em formatos PDF. Ao transferir dados para aplicativos externos, eles precisam copiá-los e colá-los várias vezes. Isso é compreensivelmente muito irritante.

As grades de dados da interface do usuário do Kendo fornecem exportações de dados da grade em dois formatos: PDF e Excel. Por exemplo, no Kendo UI para Vue Data Grid, para processar exportações de PDF, você usaria o componente GridPDFExport . Com o método save , você passaria os dados que gostaria de incluir na exportação do PDF. Os dados podem ser paginados ou o conjunto completo.

 <template> <button @click="exportPDF">Export PDF</button> <pdfexport ref="gridPdfExport"> <Grid :data-items="items"></Grid> </pdfexport> </template> <script> import { GridPdfExport } from '@progress/kendo-vue-pdf'; import { Grid } from '@progress/kendo-vue-grid'; export default { components: { 'Grid': Grid, 'pdfexport': GridPdfExport }, data: function () { return { products: [], ... }; }, methods: { exportPDF: function() { (this.$refs.gridPdfExport).save(this.products); }, ... }, ... }; </script>

O componente GridPDFExport permite especificar tamanhos de página para exportação, margens de página, como dimensionar a grade na página, etc. Isso é útil para personalizar grades maiores para caber nas páginas do PDF. Você os passaria como propriedades para o componente. Aqui está um exemplo:

 <pdfexport ref="exportPDF" :margin="'2cm'" :paper-size="'a4'" :scale="0.5"> <Grid :data-items="products"></Grid> </pdfexport>

Você pode optar por personalizar ainda mais a exportação usando um modelo. Dentro do modelo, você pode adicionar estilo, especificar cabeçalhos e rodapés, alterar o layout da página e adicionar novos elementos a ela. Você usaria CSS para estilizar. Depois de configurar o modelo, você deve especificá-lo usando a propriedade page-template do componente GridPDFExport.

Para exportar arquivos do Excel de um Kendo UI Vue Grid, você usaria o componente ExcelExport . Com seu método saveExcel , você passa o nome do arquivo, os dados da grade, as colunas a serem exibidas, etc. para ele e chama o método para gerar o arquivo. Esta grade de dados Vue é um ótimo exemplo de como você pode obter exportações do Excel com Kendo UI Vue Grid.

Colunas Fixas

Quando um usuário percorre uma grade horizontalmente, ele pode precisar ter algumas colunas congeladas ou constantemente visíveis. Essas colunas geralmente contêm informações cruciais, como IDs, nomes, etc. Colunas congeladas/fixas sempre permanecem visíveis, mas podem se mover para as bordas esquerda ou direita da grade, dependendo da direção de rolagem, ou não se mover. Por exemplo, nesta demonstração da grade de dados do Vue, o ID está congelado e a coluna Descontinuada é fixa.

Colunas fixas em bibliotecas de grade podem ser uma ocorrência rara. Se não estiver presente, implementá-lo do zero pode ser uma tarefa difícil. Isso exigirá um estilo significativo para ser realizado e pode não ser bem dimensionado se você precisar de várias grades.

A configuração de colunas fixas na interface do usuário do Kendo requer configuração mínima. Por exemplo, em um Kendo UI Vue Grid, você precisará definir a propriedade locked de uma coluna como true para torná-la aderente. Nesta tabela de dados Vue, as colunas ID e Descontinuado são tornadas fixas definindo a propriedade locked . No exemplo abaixo, o ID e a Idade estão bloqueados.

 <template> <grid :data-items="people" :columns = "columns"> </grid> </template> <script> import { Grid } from '@progress/kendo-vue-grid'; import { people } from './people' export default { components: { 'grid': Grid }, data: function () { return { people: this.getPeople(), columns: [ { field: 'ID', title: 'ID', locked: true}, { field: 'FirstName', title: 'FirstName' }, { field: 'LastName', title: 'LastName' }, { field: 'Age', title: 'Age', locked: true}, ] }; }, methods: { getPeople() { return people; } } }; </script>

Editando

O principal caso de uso de uma grade é visualizar grandes quantidades de dados. Algumas bibliotecas se limitam a isso e não consideram a possibilidade de que a edição seja necessária. Isso prejudica os usuários, pois a edição é um recurso bastante útil. Quando os usuários solicitam, os desenvolvedores são forçados a criar uma página separada para editar entradas individuais. Para adicionar a isso, os usuários só podem editar uma entrada após a outra em um formulário. Isso é cansativo e contribui para uma experiência ruim do usuário, especialmente ao lidar com grandes quantidades de dados.

Um caso de uso importante para edição de grade é facilitar a edição em lote. É útil para modificar grandes quantidades de dados de uma só vez. Isso pode envolver a exclusão, criação e atualização dos dados.

O Kendo UI Data Grids permite a edição de duas formas: inline e usando pop-ups. Com a edição em linha, todos os dados são editados na grade. Quando uma célula é clicada, ela se torna editável. Em um pop-up, um formulário pop-up é usado para editar cada entrada individualmente. Neste exemplo de tabela Kendo UI for jQuery, tornar uma grade editável envolve três etapas: definir a configuração editável da grade, estabelecer uma fonte de dados e configurar as operações CRUD na fonte de dados. Essas poucas etapas reduzem a complexidade envolvida na configuração da edição em lote. A configuração da edição pop-up segue as mesmas etapas, mas com opções diferentes no início.

Além de oferecer suporte a edições, a Kendo UI para jQuery Grid permite a validação de entrada. Por exemplo, você pode tornar as entradas obrigatórias ou impor um comprimento mínimo. Além disso, você pode criar controles de entrada personalizados. Os controles de entrada não se limitam apenas aos campos de texto. Você pode usar menus suspensos, caixas de seleção, seletores de datas, controles deslizantes de intervalo etc. Eles podem ser tanto em linha quanto em pop-ups. Nesta tabela de dados jQuery, o campo Categoria é uma lista suspensa. A validação também é demonstrada no mesmo exemplo. O campo preço unitário tem validação imposta, garantindo que seu valor mínimo seja 1.

Componentes Suplementares

A maioria das bibliotecas de grade tem um propósito singular: fornecer uma grade. Eles não são enviados com mais nada, apenas a grade. Você está limitado aos recursos que ele fornece. Se você precisar complementar a grade, pode ser complicado porque outras bibliotecas podem não ser compatíveis com ela. Então você só precisa ficar dentro dos limites da biblioteca ao construir uma grade.

O Kendo UI resolve isso porque a abordagem de seu criador é oferecer uma biblioteca abrangente de componentes que se integram facilmente entre si em vez de componentes únicos. A grade faz parte de uma biblioteca de vários componentes que permitem fazer tudo, desde gerenciamento de dados, navegação, gráficos, edição, apresentação de mídia, facilitação de bate-papo e assim por diante. Você pode optar por incorporar esses componentes na grade sem ter que realizar alguma configuração elaborada e possivelmente quebrá-la. A integração deles é perfeita e requer configuração mínima. Tomemos, por exemplo, esta tabela de dados Angular, sua coluna de 1 dia incorpora um gráfico totalmente interativo para cada linha perfeitamente. Você pode incorporar qualquer número de componentes em uma grade confiando que ela funcionará e que todos os seus recursos funcionem conforme o esperado.

Conclusão

As grades de dados precisam ser fáceis de entender, envolventes, responsivas e acessíveis. Eles precisam ter um bom desempenho e carregar dados rapidamente. No entanto, construir uma grade de dados que atenda a esses padrões do zero pode levar muito tempo e ser um grande empreendimento. Você pode optar por usar bibliotecas de grade de dados, mas geralmente elas não são otimizadas para desempenho, não são acessíveis e são fornecidas apenas com um único componente de grade.

A criação de uma grade de dados atraente e agradável de usar requer uma biblioteca que se concentre no desempenho. Ele pode fazer isso construindo nativamente e suportando a rolagem virtual. A grade de dados fornecida precisa ser responsiva e usar colunas fixas. Isso é para que os usuários possam visualizar facilmente os dados, independentemente do tamanho ou da orientação da tela. A acessibilidade deve ser uma preocupação central das redes. Isso garante que todos os usuários possam ter uma experiência igual ao usá-los.

As tabelas de dados devem expandir o que um usuário pode fazer com os dados. Isso pode ser alcançado por meio da edição e facilitação das exportações em vários formatos. Além disso, essas bibliotecas devem ser enviadas com outros componentes para complementar a grade. Ter componentes compatíveis em uma biblioteca elimina a necessidade de usar várias bibliotecas conflitantes diferentes em um aplicativo. Uma biblioteca de grade de dados que fornece esses recursos o ajudará a criar um ótimo produto para seus usuários sem muita complicação.