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 Template de Cabeçalho permite personalizar a aparência e o comportamento dos cabeçalhos de coluna em Ignite UI for ReactIgrGrid.

Modelo de célula

O Template de Célula permite personalizar a aparência e o comportamento das células em Ignite UI for ReactIgrGrid.

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

O Pine-fixação de colunas em Ignite UI for React permite que os usuários finais bloqueem uma coluna em uma ordem específica de colunas. Como resultado, isso permitirá que eles vejam enquanto rolam horizontalmenteIgrGrid. A React Grade possui uma interface de fixação de colunas embutida, que pode ser usada atravésIgrGrid da barra de ferramentas para alterar o estado dos pinos das colunas. Além disso, você pode definir uma interface personalizada e alterar o estado dos pinos das colunas via recurso de Pinear Colunas.

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

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

  • 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.

EleIgrGrid oferece uma forma conveniente de realizar manipulações de dados por meio da adição de linhas inline e uma API poderosa para operações de React CRUD. Adicione umIgrActionStrip componente com ações de edição ativadas no template da grade, passe o mouse por uma linha e use o botão fornecido, pressione "ALT" +" +" para gerar a linha adicionando interface.

EleIgrGrid oferece uma forma conveniente de realizar manipulações de dados por meio de edição inline e uma API poderosa para operações React CRUD. 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 React Grid Excel Exporter em Ignite UI pode exportar dados para o Excel. A funcionalidade de exportação de dados está encapsulada naExcelExporterService classe e os dados são exportados no formato de tabela do MS Excel. Esse formato permite recursos como filtragem, ordenação, etc. Para isso, você precisa invocar oExport método deExcelExporterService e passar o componente Grid como primeiro argumento para exportar a grade facilmente.

Filtragem

O React Grid Filtering em 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 através do qual oIgrGrid Componente fornece API de filtragem rica e todas as capacidades 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 Ignite UI for React Agrupar por Grade em React Grid cria linhas de dados agrupadas com base nos valores das colunas. O Grupo By em permiteIgrGrid visualizar os grupos em uma estrutura hierárquica. As linhas de dados agrupadas podem ser expandidas ou colapsadas, e a ordem de agrupamento pode ser alterada pela interface ou API. Quando a Seleção de Linha está ativada, um seletor de Agrupar por Linha é renderizado na área mais à esquerda da linha de grupo. Caso arowSelection propriedade esteja definida como simples, as caixas de seleção são desativadas e servem apenas como indicação para o grupo onde a seleção é colocada. Se arowSelection propriedade estiver definida como múltipla, ao clicar no seletor Agrupar por linha, 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 ao Vivo na Grade é usado para permitir atualizações em tempo real ou quase em tempo real dos dados exibidos dentro da grade. Isso é extremamente útil em aplicativos onde os dados estão em constante mudança, como rastreadores de bolsa, placar esportivo ao vivo ou dashboards de IoT (Internet das Coisas). ElesIgrGrid conseguem lidar com milhares de atualizações por segundo, mantendo-se responsivos às interações do usuário.

Master-Detail

OIgrGrid componente suporta a especificação de um modelo de detalhes que exibe detalhes adicionais para uma linha específica, expandindo/colapsando seu conteúdo. Quando especificado, cada registro atua como um mestre que, ao expandir, 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 React Grid Keyboard Navigation em Ignite UI oferece uma grande variedade de interações com o teclado para o usuário. Ele melhora a acessibilidade doIgrGrid 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 é ativada por padrão, e o desenvolvedor tem a opção de sobrescrever qualquer um dos comportamentos padrão de forma fácil.

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

Atualmente, introduzIgrGrid os seguintes paradas de aba:

  • 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 React Grid Multi-Column Headers em Ignite UI permite agrupar colunas colocando-as sob um multi-cabeçalho comum. Cada grupo de cabeçalhos multi-colunas em oIgrGrid pode ser uma representação de combinações entre outros grupos ou colunas. Esse recurso é particularmente útil ao lidar com grandes conjuntos de dados, onde rolar horizontalmente pode ser complicado

Multi-row Layout

O recurso The React Grid Multi-row Layout em Ignite UI amplia as capacidades de renderização doIgrGrid. O recurso permite dividir um único registro de dados em várias linhas visíveis.

Pagination

O recurso React Grid Pagination em Ignite UI é usado para dividir um grande conjunto de dados em uma sequência de páginas com conteúdo semelhante. React paginação em grade melhora a experiência do usuário e a interação com dados.IgrGrid A paginação pode ser configurada por meio de um componente separado projetado na árvore da grade definindo umaIgrPaginator tag, semelhante à adição de uma coluna. Como em qualquer tabela React, a paginação na Grade React suporta templates para páginas personalizadas.

Operações remotas de dados

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

Você pode realizar essas tarefas remotamente e alimentar os dados resultantes para oIgrGrid aproveitando certos inputs e eventos, que são expostos peloIgrGrid.

Ações de linha

OIgrGrid componente em Ignite UI for React oferece a capacidade de usarIgrActionStrip e utilizar CRUD para componentes de linha/célula e fixação de linha. O componente Action Strip pode hospedar controles de interface pré-definidos para essas operações.

Arrastar linha

Ignite UI for ReactIgrGrid arrastar de linha é inicializado no componente raizIgrGrid e pode ser configurado via entradarowDraggable. Ativar o arrastar de linha oferece aos usuários uma alça de arrastar de linha com a qual podem iniciar o arrastar de uma linha.

Fixação de linha

No ReactIgrGrid, você pode fixar uma ou várias linhas no topo ou na parte inferior da grade. O Fixar Linhas permite que os usuários finais fixem as linhas em uma ordem específica, duplicando-as em uma área especial que está sempre visível mesmo quando eles rolam verticalmenteIgrGrid. A Grade da Interface Material possui uma interface de fixação de linhas embutida, que é ativada inicializando umIgrActionStrip componente no contexto deIgrGrid. Além disso, você pode definir uma interface personalizada e alterar o estado dos pinos das linhas via a API de Pineamento de Linhas.

Filtro de pesquisa

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

Escolha

Com o Ignite UI for ReactIgrGrid você pode facilmente selecionar dados usando uma variedade de eventos, API rica ou com interações simples com o mouse, como a 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 de Seleção em Ignite UI oferece uma forma simplificada e semelhante ao Excel de selecionar e destacar uma coluna inteira com um único clique. Ele pode ser ativado através dacolumnSelection entrada. Graças à API avançada, o recurso permite a manipulação fácil 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 de Seleção de Linhas no React Grid permite que os usuários selecionem, destaquem ou desselecionem interativamente uma ou várias linhas de dados. Existem vários modos de seleção disponíveis:IgrGrid Nenhuma Seleção, Seleção Múltipla, Seleção Única

Sizing

O recurso de Dimensionamento no React Grid é um aspecto importante para criar interfaces de grade responsivas e amigáveis ao usuário. O recurso React Grade Sizing permite que os usuários ajustem owidth eheight da grade para acomodar diferentes tamanhos de tela, conteúdo ou preferências do usuário. Em termos de tamanhoIgrGrid de borda e acolchoamento, eles são considerados em seus cálculos de largura/altura e tamanho, também conhecidos como dimensionamento de caixas de borda. Ele é aplicado em todos os cenários.

Classificação

O recurso de Ordenação de Dados em React Grid é ativado em nível por coluna, o que significa que podemIgrGrid ter uma mistura de colunas ordenáveis e não ordenáveis. Realizar React ações de ordenação permite que você mude a ordem de exibição dos registros com base em critérios especificados.

Resumos

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

Virtualização e desempenho

Em Ignite UI for React, oIgrGrid controle virtualiza seu conteúdo tanto vertical quanto horizontalmente.

Barra de ferramentas

A barra de ferramentas Ignite UI for React é um contêiner para operações de interface na React Grade. A barra de ferramentas React está localizada no topo do componente React, ou seja, oIgrGrid e ela corresponde ao seu tamanho horizontal. O contêiner da barra de ferramentas pode hospedar qualquer conteúdo personalizado ou conjunto de controles pré-definidos da interface. O conjunto padrão para a React Grade 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