Construindo um data-grid para produtos de contexto industrial

Introdução

Muitos dos produtos voltados para a área de metalurgia e mineração da Vetta e da SMS group, tem como elementos de UI centrais as tabelas e listas, já que o volume de dados é bem alto.

Com isso o time de design system identificou a necessidade de priorizar a construção de um componente de data-grid robusto e flexível, que pudesse ser utilizado em diversos produtos, com o objetivo de padronizar a experiência do usuário e facilitar a evolução da experiência
desse componente.

Desafio

O Desafio então era criar um componente de data-grid que atendesse as necessidades comuns dos produtos e que tambem tivesse escalabilidade para ser atender novos produtos.

O maior desafio ao projetar o componente foi equilibrar funcionalidade e usabilidade. Por um lado, o data-grid exigia várias funcionalidades integradas e um alto nível de personalização para visualização e edição de dados. Por outro lado, havia a necessidade de manter a interface intuitiva e acessível, mesmo para usuários sem conhecimentos técnicos avançados. Além disso, enfrentamos desafios relacionados ao desempenho do componente.

Pesquisa e Benchmarking

O primeiro passo foi realizar uma sessão com as partes interessadas para definir as funcionalidades e configurações que seriam implementadas, distinguindo entre aquelas exclusivas ao produto MES e as que fariam parte do componente integrado ao sistema de design.

Durante essa discussão estruturada, surgiram algumas funcionalidades que não haviam sido mencionadas em conversas anteriores, como a capacidade de salvar predefinições de configuração para o data-grid e a opção de fixar colunas. Em seguida, iniciamos uma análise de benchmarking de data-grids existentes no mercado, como o Ag-Grid e o Handsontable, avaliando seus pontos fortes e fracos. Entre os dois, o Ag-Grid tornou-se a principal referência para nossa primeira versão, especialmente para as funcionalidades de filtragem e agrupamento.

Prototipagem e Componentização

Com os requisitos em mãos, distribuímos as funcionalidades e determinamos sua posição em relação ao data-grid. Em seguida, partimos diretamente para a prototipagem, já que tínhamos um sistema de design com componentes básicos bem definidos e outros padrões. Prosseguimos com a prototipagem de alta fidelidade utilizando o sistema de design existente.

Começamos os protótipos definindo as interações mais básicas para as células da tabela, incluindo seleção de células e seleção de linhas. Também definimos as interações e funcionalidades possíveis para o cabeçalho da tabela e os modos de paginação da tabela.

Após definir essas funcionalidades básicas, passamos para recursos mais complexos, como filtragem, ordenação e agrupamento. Decidimos centralizar essas três funcionalidades em um painel de configuração do data-grid, juntamente com as configurações predefinidas.

Em paralelo, também definimos a construção dos componentes que comporiam o data-grid. Optamos por dividir o componente em subcomponentes menores, como a célula, o cabeçalho, o rodapé e os painéis de filtro, ordenação e agrupamento.

Com os protótipos prontos, realizamos outra reunião com as partes interessadas e fizemos alguns ajustes, principalmente no filtro, que agora precisava ser um filtro lógico e mais abrangente.

Resultados

Após o desenvolvimento, o componente data-grid foi integrado ao Plasma UI, o sistema de design da Vetta em colaboração com a SMS Digital. Outras equipes começaram a utilizar o componente, que inicialmente proporcionou uma padronização das interações básicas envolvendo tabelas. Atualmente, cerca de 70% dos produtos que utilizam o Plasma UI fazem uso do componente.

Também mantivemos uma comunicação aberta com os designers e desenvolvedores que utilizam o data-grid para adicionar novas funcionalidades e abordar possíveis correções.