Novidades: Ignite UI for React versão 18.3.0

Novidades: Ignite UI for React versão 18.3.0

Temos o prazer de anunciar que a versão mais recente do Ignite UI for React 18.3.0 chega com uma nova grade de dados React e vários recursos interessantes. Leia mais.

15min read

Na Infragistics, sempre nos esforçamos para fornecer os melhores componentes para sua experiência de desenvolvimento. E o Ignite UI for React 18.3.0 de hoje inclui o novo React Data Grid. O React Data Grid faz parte da família Ignite UI e, assim como o Angular, o Web Components e o Blazor Data Grids, ele compartilha o mesmo design, comportamento, UX e recursos. Isso permite uma alternância perfeita entre Angular, Blazor, Web Components ou React para as equipes de desenvolvimento, permitindo que elas sejam mais ágeis às mudanças de requisitos em React.

É hora de obter uma visão de alto nível de todos os recursos do Data Grid que estamos lançando na versão 18.3.0 Ignite UI for React. Aqui estão os recursos do React Grid:

A grade de dados React

O novo componente React Data Grid é usado para exibir dados em um formato tabular de forma rápida e fácil. A Grade de Dados é um componente de grade moderno repleto de recursos como edição de dados, seleção, filtragem, classificação, agrupamento, fixação, paginação, modelagem, movimentação de colunas, exportação e muito mais. Em comparação com a grade anterior que lançamos em Ignite UI for React, a nova grade de dados tem significativamente mais recursos, uma API mais avançada e temas integrados.

Ignite UI React Visualização da Grade de Dados

Modelo de cabeçalho

O Modelo de cabeçalho permite que você personalize a aparência e o comportamento dos cabeçalhos de coluna em Ignite UI for React IgrGrid.

Modelo de célula

O Modelo de célula permite personalizar a aparência e o comportamento das células em Ignite UI for React IgrGrid.

Grupos de colunas recolhíveis

O recurso Grupos de Colunas Recolhíveis da Grade React no Ignite UI permite organizar e gerenciar vários níveis de colunas aninhadas e grupos de colunas na Grade React, agrupando-os e fornecendo a opção de recolher ou expandir esses grupos para melhorar a visualização e a navegação dos dados.

Ocultação de coluna

O Ignite UI for React tem uma interface do usuário interna de ocultação de coluna, que pode ser usada por meio da barra de ferramentas React Grid para alterar o estado visível das colunas. Os desenvolvedores têm a flexibilidade de definir a interface do usuário de ocultação de coluna em qualquer lugar da página, conforme necessário. O recurso React Ocultação de coluna de grade é especialmente útil quando se deseja diminuir o tamanho da grade e eliminar a necessidade de tabulação em campos redundantes.

Reordenação e Movimentação de Colunas

O recurso React Grid Column Moving no Ignite UI permite a reordenação rápida e fácil da coluna. Isso pode ser feito por meio da API de movimentação de colunas ou arrastando e soltando os cabeçalhos em outra posição por meio de gestos de mouse ou toque. Na grade React, você pode habilitar a movimentação de coluna para colunas fixadas e não fixadas e também para cabeçalhos de várias colunas.

Fixação de coluna

A fixação de coluna no Ignite UI for React permite que os usuários finais bloqueiem uma coluna em uma ordem de coluna específica. Como resultado, isso permitirá que eles o vejam enquanto rolam horizontalmente o IgrGrid. O React Grid tem uma interface de usuário de fixação de coluna interna, que pode ser usada por meio IgrGrid da barra de ferramentas para alterar o estado do pino das colunas. Além disso, você pode definir uma interface do usuário personalizada e alterar o estado do pino das colunas por meio do recurso Fixação de Coluna.

Redimensionamento de colunas

O recurso de redimensionamento de coluna de grade React no Ignite UI permite que os usuários ajustem facilmente a largura das colunas da grade. Por padrão, eles verão um indicador de redimensionamento temporário enquanto a operação de redimensionamento de arrastar estiver em vigor. Várias opções de redimensionamento estão disponíveis – Redimensionar colunas em pixels/porcentagens, Restringir redimensionamento de coluna, Dimensionar colunas automaticamente com clique duplo e Dimensionar colunas automaticamente na inicialização.

Tipos de coluna

​IgrGrid Ignite UI for React fornece um tratamento padrão de tipos de dados de coluna, com base no qual a aparência dos modelos padrão e de edição estará presente. Tipos de dados de coluna com suporte:

  • Number
  • Siring
  • Date
  • Boolean
  • Moeda
  • Percent 

Estilo condicional

O componente Grade React no Ignite UI permite o estilo personalizado em um nível de linha ou célula. A funcionalidade Estilo condicional de grade enfatiza ou destaca visualmente os dados que atendem a determinados critérios, tornando mais fácil para os usuários identificar informações ou tendências importantes na grade.

Densidade de exibição

A Densidade de Exibição da Grade React no Ignite UI permite que os usuários controlem o espaçamento e o layout dos dados dentro da Grade. Ao alterar a densidade, você pode melhorar significativamente a experiência do usuário ao interagir com grandes quantidades de conteúdo. Eles podem escolher entre três opções de densidade de exibição:

  • Aconchegante
  • Confortável
  • Compacto

Edição

O recurso de edição React Grid Cell no Ignite UI fornece uma maneira fácil de executar operações de manipulação de dados, como criar, atualizar e excluir registros. O React Grid fornece uma API pública poderosa que permite personalizar como essas operações são executadas. As fases de manipulação de dados são:

O recurso React Edição de Célula de Grade no Ignite UI fornece uma grande capacidade de manipulação de dados do conteúdo de células individuais dentro do componente React Grid e vem com uma API poderosa para operações CRUD React. É um recurso fundamental em aplicativos como planilhas, tabelas de dados e grades de dados, permitindo que os usuários adicionem, editem ou atualizem dados em células específicas. Por padrão, a Grade em Ignite UI for React é usada na edição de células. Devido ao modelo de edição de célula padrão, haverá editores diferentes com base no tipo de dados da coluna Superior do formulário. Além disso, você pode definir seus próprios modelos personalizados para ações de atualização de dados e substituir o comportamento padrão para confirmar e descartar quaisquer alterações.

Exemplo React edição de célula de grade

O recurso de edição no Ignite UI oferece a oportunidade de usar componentes Combobox em cascata. Ao selecionar o valor em qualquer Combobox anterior, os usuários receberão apenas os dados relevantes para sua seleção no próximo componente React Combobox.

O IgrGrid fornece uma maneira conveniente de realizar manipulações de dados por meio da adição de linha embutida e uma API poderosa para operações CRUD React. Adicione um IgrActionStrip componente com ações de edição habilitadas no modelo da grade, passe o mouse sobre uma linha e use o botão fornecido, pressione "ALT" +" +" para gerar a linha adicionando a interface do usuário.

O IgrGrid fornece uma maneira conveniente de realizar manipulações de dados por meio de edição em linha e uma API poderosa para operações CRUD React. Clique em uma linha e pressione a tecla Enter ou simplesmente clique duas vezes com o mouse na linha que precisa ser modificada.

Exemplo de adição e edição de React linha de grade
  • Edição em lote (em breve)

Export to Excel Service

O serviço Exportador do Excel de Grade do React no Ignite UI pode exportar dados para o Excel. A funcionalidade de exportação de dados é encapsulada ExcelExporterService na classe e os dados são exportados no formato de tabela do MS Excel. Esse formato permite recursos como filtragem, classificação, etc. Para fazer isso, você precisa invocar o Export método e ExcelExporterService passar o componente Grid como o primeiro argumento para exportar a grade facilmente.

Filtragem

A Filtragem de Grade React no Ignite UI é um recurso que permite exibir ou ocultar dados seletivamente com base em critérios ou condições específicas. Há um contêiner de dados vinculado por meio do qual o IgrGrid componente fornece API de filtragem avançada e todos os recursos de filtragem. Os tipos de filtragem disponíveis aqui são três:

A Filtragem Avançada de Grade React no Ignite UI permite manipular dados fornecendo uma caixa de diálogo na qual você pode criar diferentes grupos com condições de filtragem em todas as colunas da Grade React.

Exemplo de filtragem avançada de grade React

A Grade React expõe um recurso de filtragem no estilo do Excel que fornece uma interface do usuário de filtragem semelhante ao Excel. Ele simplifica o processo de trabalho com grandes conjuntos de dados. A ideia principal é ajudá-los a filtrar os dados mais relevantes e, ao mesmo tempo, eliminar entradas irrelevantes.

Exemplo de filtragem de estilo do Excel de filtro de React

Agrupar por

O comportamento Agrupar por Ignite UI for React em React Grid cria linhas de dados agrupadas com base nos valores da coluna. O Agrupar por no IgrGrid permite visualizar os grupos em uma estrutura hierárquica. As linhas de dados agrupadas podem ser expandidas ou recolhidas e a ordem de agrupamento pode ser alterada por meio da interface do usuário ou da API. Quando a Seleção de linha está ativada, um seletor de linha Agrupar por é renderizado na área mais à esquerda da linha do grupo. Caso a propriedade seja definida como única, as rowSelection caixas de seleção são desativadas e servem apenas como uma indicação para o grupo onde a seleção é colocada. Se a rowSelection propriedade estiver definida como múltipla, clicar no seletor de linha Agrupar por selecionará todos os registros pertencentes a esse grupo.

Dados ao vivo / atualizações em tempo real

O recurso Ignite UI for React Atualizações de dados em tempo real na grade é usado para permitir atualizações em tempo real ou quase em tempo real dos dados exibidos na grade. Isso é extremamente útil em aplicativos em que os dados estão em constante mudança, como rastreadores do mercado de ações, resultados esportivos ao vivo ou painéis de IoT (Internet das Coisas). Eles IgrGrid podem lidar com milhares de atualizações por segundo, mantendo-se responsivos às interações do usuário.

Master-Detail

O IgrGrid componente suporta a especificação de um modelo de detalhes que exibe detalhes adicionais para uma linha específica, expandindo/recolhendo seu conteúdo. Quando especificado, cada registro atua como um mestre, que, após a expansão, mostra um modelo de detalhes personalizável com dados contextuais para o registro atual.

Esse modo é útil quando você precisa exibir dados de estilo mestre-detalhe em uma estrutura hierárquica.

Navegação pelo teclado

O recurso Navegação de Teclado de Grade React no Ignite UI fornece uma grande variedade de interações de teclado para o usuário. Melhora a acessibilidade do IgrGrid e permite ao usuário navegar por qualquer tipo de elemento interno (célula, linha, cabeçalho de coluna, barra de ferramentas, rodapé, etc.). Essa funcionalidade é habilitada por padrão e o desenvolvedor tem a opção de substituir qualquer um dos comportamentos padrão de maneira fácil.

As tabulações do IgrGrid foram reduzidas para que a navegação esteja em conformidade com os padrões de acessibilidade do W3C e seja conveniente de usar.

Atualmente, o IgrGrid introduz as seguintes paradas de tabulação:

  • GroupBy ou Área da barra de ferramentas (se habilitado).
  • Grid header.
  • Grid body.
  • Column summaries (if enabled).
  • Paginador de grade (se habilitado).

Visão geral dos cabeçalhos de várias colunas

O recurso Cabeçalhos de várias colunas de grade React no Ignite UI permite agrupar colunas colocando-as em um cabeçalho múltiplo comum. Cada grupo de cabeçalhos de várias colunas no IgrGrid pode ser uma representação de combinações entre outros grupos ou colunas. Esse recurso é particularmente útil ao lidar com grandes conjuntos de dados em que a rolagem horizontal pode ser complicada

Multi-row Layout

O recurso Layout de várias linhas da React Grid no Ignite UI estende os recursos de renderização do IgrGrid. O recurso permite dividir um único registro de dados em várias linhas visíveis.

Pagination

O recurso Paginação de grade React no Ignite UI é usado para dividir um grande conjunto de dados em uma sequência de páginas com conteúdo semelhante. React paginação de grade melhora a experiência do usuário e a interação de dados. IgrGrid A paginação é configurável por meio de um componente separado projetado na árvore de grade, definindo uma IgrPaginator tag, semelhante à adição de uma coluna. Como em qualquer tabela React, a paginação na Grade React dá suporte ao modelo para páginas personalizadas.

Operações remotas de dados

Por padrão, IgrGrid usa sua própria lógica para executar operações de dados.

Você pode executar essas tarefas remotamente e alimentar os dados resultantes para o IgrGrid aproveitando certas entradas e eventos, que são expostos pelo IgrGrid.

Ações de linha

O IgrGrid componente em Ignite UI for React fornece a capacidade de usar IgrActionStrip e utilizar CRUD para componentes de linha/célula e fixação de linha. O componente Faixa de ação pode hospedar controles de interface do usuário predefinidos para essas operações.

Arrastar linha

​IgrGrid Ignite UI for React arrastar linha é inicializado no componente raiz IgrGrid e é configurável por meio da rowDraggable entrada. Habilitar o arrastar de linha fornece aos usuários uma alça de arrastar linha com a qual eles podem iniciar o arrastar de uma linha.

Fixação de linha

No React IgrGrid, você pode fixar uma ou várias linhas na parte superior ou inferior da grade. A fixação de linha permite que os usuários finais fixem linhas em uma ordem específica, duplicando-as em uma área especial que está sempre visível, mesmo quando rolam verticalmente IgrGrid. A Grade da interface do usuário do Material tem uma interface do usuário de fixação de linha integrada, que é ativada pela inicialização de um IgrActionStrip componente no contexto de IgrGrid. Além disso, você pode definir a interface do usuário personalizada e alterar o estado do pino das linhas por meio da API de fixação de linha.

Filtro de pesquisa

A Pesquisa em Grade React permite o processo de localização de valores na coleta de dados. Facilitamos a configuração dessa funcionalidade e ela pode ser implementada com uma caixa de entrada de pesquisa, botões, navegação por teclado e outros recursos úteis para uma experiência de usuário ainda melhor. Embora os navegadores forneçam nativamente a funcionalidade de pesquisa de conteúdo, na maioria das vezes, o virtualiza IgrGrid suas colunas e linhas que estão fora de vista. Nesses casos, a pesquisa em grade nativa não consegue pesquisar dados nas células virtualizadas, pois elas não fazem parte do DOM. Estendemos a grade baseada em tabela do Ignite UI for React Material com uma API de pesquisa que permite pesquisar o conteúdo virtualizado do IgrGrid.

Escolha

Com o Ignite UI for React IgrGrid você pode selecionar dados facilmente usando uma variedade de eventos, API avançada ou com interações simples do mouse, como seleção única.

Seleção de células 

A React Seleção de células de grade no Ignite UI permite recursos avançados de seleção de dados e oferece uma API poderosa no componente Grid. O React Grid suporta três modos de seleção:

–Seleção de Múltiplas Células de Grade

– Grid Single Selection

–Seleção de Nenhum de Grade

Seleção de coluna 

O recurso Seleção no Ignite UI oferece uma maneira simplificada e semelhante ao Excel de selecionar e destacar uma coluna inteira com um único clique. Ele pode ser habilitado por meio da columnSelection entrada. Graças à API avançada, o recurso permite fácil manipulação do estado de seleção, extração de dados das frações selecionadas, operações de análise de dados e visualizações.

Seleção de linha 

O recurso Seleção de linha no React Grid permite que os usuários selecionem, realcem ou desmarquem interativamente uma ou várias linhas de dados. Existem vários modos de seleção disponíveis no IgrGrid: Seleção Nenhuma, Seleção Múltipla, Seleção Única

Sizing

O recurso Dimensionamento no React Grid é um aspecto importante da criação de interfaces de grade responsivas e fáceis de usar. O recurso React Dimensionamento de grade permite que os usuários ajustem o width e height da grade para acomodar diferentes tamanhos de tela, conteúdo ou preferências do usuário. Em termos de tamanho de borda e preenchimento para o IgrGrid, eles são levados em seus cálculos de tamanho de largura/altura ou também conhecidos como dimensionamento de caixa de borda. É aplicado em todos os cenários.

Classificação

O recurso Classificação de dados em React Grid é habilitado em um nível por coluna, o que significa que pode IgrGrid ter uma combinação de colunas classificáveis e não classificáveis. A execução de ações de classificação React permite alterar a ordem de exibição dos registros com base em critérios especificados.

Resumos

O recurso Resumos em React Grid funciona em um nível por coluna como rodapé de grupo. React resumos de grade é um recurso poderoso que permite ao usuário ver as informações da coluna em um contêiner separado com um conjunto predefinido de itens de resumo padrão, dependendo do tipo de dados dentro da coluna ou implementando um modelo personalizado no IgrGrid.

Virtualização e desempenho

No Ignite UI for React, o IgrGrid controle virtualiza seu conteúdo vertical e horizontalmente.

Barra de ferramentas

A barra de ferramentas Ignite UI for React é um contêiner para operações de interface do usuário na grade React. A barra de ferramentas React está localizada na parte superior do componente React, ou seja, o e corresponde ao IgrGrid seu tamanho horizontal. O contêiner da barra de ferramentas pode hospedar qualquer conteúdo personalizado ou conjunto de controles de interface do usuário predefinidos. O conjunto padrão para a grade React inclui:

A barra de ferramentas e os componentes de interface do usuário predefinidos dão suporte a eventos React e expõem a API para desenvolvedores.

Temas

Nossa grade React pode ser facilmente personalizada para combinar com a identidade da sua marca. Além de temas e paletas predefinidos, você pode personalizar ainda mais a aparência da grade de dados usando um conjunto de propriedades personalizadas CSS.

Embrulhar

Continuamos a enviar novos recursos em um cronograma contínuo, para melhorar o desempenho e fornecer melhorias de estabilidade, pois estamos comprometidos em fornecer a você o melhor kit de ferramentas de interface do usuário React e insights relacionados para capacitá-lo com mais know-how.

Temos detalhes para cada parte deste lançamento, e você pode conferi-los aqui:

Se precisar de mais detalhes, recomendamos que você confira nosso:

Por fim, quando você construir algo legal com nossos controles, certifique-se de nos informar.

Angular
Solicite uma demonstração