A grade de dados Angular mais rápida
Ignite UI for Angular fornece uma biblioteca completa de componentes de interface de usuário nativos Angular baseados em Material, incluindo a grade de dados Angular virtualizada mais rápida do mundo.
Angular Grid Example
Neste exemplo de grade angular, você pode ver como os usuários podem personalizar sua visualização de dados aproveitando os vários recursos incorporados à grade, como pesquisa e filtragem de dados, classificação de colunas, redimensionamento, fixação e ocultação, seleção de linha, exportação para Excel e CSV, rolagem horizontal e vertical. Fornecemos exemplos para modelagem de células que incluem componentes como indicador de barra de progresso linear e sparkline.
What is an Angular Data Grid?
Uma grade de dados Angular é um componente usado para exibir dados tabulares em uma série de linhas e colunas. Grades de dados, também conhecidas como tabelas, são bem conhecidas no mundo desktop com softwares populares como o Microsoft Excel. Embora as grades estejam disponíveis em plataformas desktop há muito tempo, elas recentemente se tornaram parte de UIs de aplicativos da web, como Angular UI. Grades modernas podem ser complexas e podem incluir uma variedade de funcionalidades, incluindo vinculação de dados, edição, filtragem semelhante ao Excel, classificação personalizada, agrupamento, reordenação de linhas, congelamento de linhas e colunas, agregação de linhas e exportação para formatos Excel, CSV e PDF.
Why Use an Angular Data Grid?
As grades de dados Angular são essenciais em casos de uso em que muitos dados devem ser armazenados e classificados rapidamente. Isso pode incluir setores como financeiro ou de seguros que usam dados de alto volume e alta velocidade com frequência. Muitas vezes, o sucesso dessas empresas depende da funcionalidade e do desempenho dessas grades de dados. Quando decisões de ações precisam ser tomadas em microssegundos, por exemplo, é fundamental que a grade de dados funcione sem tempo de atraso ou oscilação.
Key Features
O Ignite UI for Angular Data Grid não é apenas para dados de alto volume e em tempo real. É uma grade Angular rica em recursos que lhe dá capacidades que você nunca seria capaz de realizar com tão pouco código por conta própria. Este exemplo demonstra alguns dos principais recursos da grade de dados:
Linhas e colunas virtualizadas para que você possa carregar milhões de registros
Edição em linha com opções de atualização de célula, linha e lote
Filtragem no estilo Excel e capacidade completa de navegação pelo teclado do Excel
Resumos de colunas com base em quaisquer dados em uma célula ou coluna de grade
Exportar para Excel, incluindo visualização de dados
Tamanho para ajustar a altura e o tamanho das linhas
Modelos de coluna como Sparkline Column e Image Column
Data Virtualization and Performance
Role perfeitamente por linhas e colunas ilimitadas em sua grade Angular, com a virtualização de nível de coluna e linha da grade de dados. Com suporte para fontes de dados locais ou remotas, você obtém o melhor desempenho, não importa onde seus dados estejam. Seus usuários experimentarão a rolagem semelhante à do Excel, com velocidade empresarial — sem atraso, oscilação de tela ou atraso visual — proporcionando a você a melhor experiência do usuário (UX) sem comprometer o desempenho.
Rápido e fácil de personalizar, construir e implementar
O Ignite UI Angular Data Grid pode manipular linhas e colunas ilimitadas de dados, ao mesmo tempo em que fornece acesso a modelos personalizados e atualizações de dados em tempo real. Apresentando uma API intuitiva para fácil tematização e branding, você pode vincular rapidamente aos dados com código mínimo.
Angular Grid Paging, Sorting, Filtering, & Searching
Permita que os usuários naveguem em seu conjunto de dados com nosso pager padrão ou criem seu próprio modelo para dar sua própria experiência de paginação. Com suporte completo para classificação de coluna única e múltipla, pesquisa de texto completo na grade e várias opções de filtragem avançadas, incluindo filtragem baseada em tipo de dados no estilo Microsoft Excel.
Inline Angular Grid Editing
Nós fornecemos modelos de células padrão para colunas editáveis que são baseados no tipo de dados da coluna. Você pode definir seus próprios modelos personalizados para colunas editáveis e substituir o comportamento padrão para confirmar e descartar alterações no valor da célula.
Keyboard Navigation & Row/Cell Selection in the Angular Grid
Garanta a conformidade de acessibilidade e melhore a usabilidade, permitindo a navegação por teclado semelhante ao Excel na grade de dados Angular, usando as teclas para cima, para baixo, para a direita, para a esquerda, tab e Enter. Você pode alternar a seleção de uma ou várias linhas na grade Angular usando o mouse ou o teclado para selecionar ou desmarcar linhas inteiras, ou usar a caixa de seleção integrada selecionar tudo/desmarcar tudo na barra de ferramentas da grade para trabalhar com a seleção de linhas. Saiba mais sobre nossos aprimoramentos mais recentes para esse recurso.
Angular Grid Accessibility & ARIA Support
Cada um dos nossos componentes Angular no Ignite UI for Angular foi implementado de acordo com as últimas diretrizes e especificações de acessibilidade. Nossos componentes Angular foram testados usando tecnologia de acessibilidade fornecida pelo SO ou navegador – leitores de tela. Nossa equipe garante não apenas que as diretrizes sejam implementadas, mas também que o conteúdo real entregue a pessoas com deficiência visual ou cegas seja realmente consumível e fácil de usar para elas. A grade de dados Ignite UI for Angular é totalmente acessível com acessibilidade de teclado a11y, ARIA e paleta de cores acessível. Saiba mais.
Column Grouping, Pinning, Summaries, & Moving in the Angular Grid
Agrupe colunas ou grupos de colunas predefinidos por meio da interação do mouse, toque ou nossa API, com suporte para resumos de colunas integrados ou modelos de resumo personalizados. Permita que os usuários ocultem ou movam colunas interativamente, com suporte total para fixação interativa de colunas, durante as operações de mover, arrastar e reordenar.
Multi-Column Headers in the Angular Grid
Habilitar cabeçalhos multicolunas, permitindo que você agrupe colunas sob um cabeçalho comum. Cada grupo de colunas pode ser uma representação de combinações entre outros grupos ou colunas, com suporte total para fixação de colunas, movimentação interativa de colunas dentro de grupos, classificação e ocultação de grupos.
Theming, Styling, & Templating in the Angular Grid
Com Ignite UI for Angular você pode personalizar a aparência da célula com CSS ou refazer o template de qualquer célula com ng-template para dar a qualquer célula uma aparência de renderização. Com suporte total para Material Design, você pode personalizar sua experiência de marca com nosso mecanismo de tema simples de usar.
Excel Library for the Angular Grid
Suporte completo para exportar grades de dados para XLXS, XLS, TSV ou CSV. A biblioteca Ignite UI for Angular Excel inclui mais de 300 fórmulas, suporte a tabelas, formatação condicional, criação de gráficos e muito mais – tudo sem precisar do Microsoft Excel na máquina cliente.
Angular Grid Features
- Edição em linha
- Filtragem de linha e coluna
- Classificação de grade
- Agrupamento de colunas
- Resumos de colunas
- Colunas Fixas/Fixadas
- Colunas redimensionáveis
- Ocultação de coluna
Baixe o Angular Grid mais rápido hoje mesmo!
Faça o download agora30 dias de teste gratuito. Não é necessário cartão de crédito.
Ignite UI for Angular Supported Browsers
- Cromar
- Borda / Borda Chromium
- Raposa de fogo
- Safári
- Internet Explorer 11 com polyfills
Ignite UI for Angular Support Options
- Comece na página inicial do Suporte Angular
- Leia a documentação Angular e experimente com amostras Angular
- Leia os blogs Angular para se manter atualizado
- Enviar um caso de suporte
- Aprenda com os aplicativos de referência Angular
Ignite UI for Angular Trial License and Commercial
Ignite UI for Angular é um produto licenciado comercialmente disponível por meio de um modelo de assinatura. Você pode experimentar o produto Ignite UI for Angular gratuitamente ao se registrar para um teste de 30 dias. Quando terminar seu Período de Teste, você pode comprar uma licença em nosso site ou ligando para as vendas em sua região.
Frequently Asked Questions
- Linhas e colunas virtualizadas
- Edição em linha com opções de atualização de célula, linha e lote
- Filtragem no estilo Excel e capacidade completa de navegação pelo teclado do Excel
- Interactive Outlook-style Grouping
- Resumos de colunas com base em quaisquer dados em uma célula ou coluna de grade
- Exportar para Excel, incluindo visualização de dados
- Tamanho para ajustar a altura e o tamanho das linhas
- Column templates like Sparkline Column and Image Column
GitHub