Grade JavaScript de Código Aberto para Qualquer Projeto

    O componente Ignite UI for Angular Grid Lite faz parte do Infragistics novo conjunto de componentes de interface open-source que será ativamente suportado e mantido. É uma grade de dados JavaScript de código aberto construída como um Componente Web, o que significa que você pode usá-la sem dependências, com ou sem framework web. Existem 40+ controles OSS agora disponíveis sob a licença MIT em Angular, React, Blazor e Web Components.

    O Angular Grid Lite oferece funcionalidades essenciais de exibição de dados com sobrecarga mínima e o desempenho que os usuários esperam. Ele foi projetado para desenvolvedores que precisam de uma apresentação de dados rápida e leve, sem a complexidade de uma grade corporativa.

    Angular Recursos do Grid Lite:

    • Filtragem de coluna
    • Escondendo
    • Redimensionamento
    • Classificação
    • Row Virtualization
    • Acessibilidade
    • Temas e Estilo
    • Tipos de dados de coluna

    Os controles Grid Lite são totalmente gratuitos, licenciados pelo MIT, como parte da nossa iniciativa para tornar Ignite UI mais aberto, transparente e acessível. No entanto, se seu projeto crescer em complexidade e funcionalidade, e você precisar de uma aplicação de nível empresarial, temos uma estratégia de atualização para a transição do Grid Lite para o Data Grid avançado e completo.

    Angular suporta elementos personalizados, então você pode usar o Grid Lite com facilidade.

    Installation

    Para adicionar o Grid Lite ao seu aplicativo Angular, instale o pacote a partir do npm.

    npm install igniteui-grid-lite

    Configuração

    Antes de iniciar o aplicativo, certifique-se de importar e passar o esquema personalizado dos elementos conforme mostrado abaixo.

    // app.component.ts

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IgcGridLite, ColumnConfiguration } from 'igniteui-grid-lite';

IgcGridLite.register();

@Component({
  ...
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
  template: `
    <main>
      <igc-grid-lite [columns]="columns" [data]="products">
      </igc-grid-lite>
    </main>
  `
})
export class AppComponent {
  columns: ColumnConfiguration<Products> = [...];
  products: Products[] = [...];
}

    Performance Built In

    A virtualização em nível de linha permite renderizar quantidades ilimitadas de dados com rolagem suave.

    Automatic Column Types

    Os tipos de coluna são gerados automaticamente com base na sua fonte de dados, com filtragem embutida baseada no tipo de coluna.

    Custom Column Templates

    Entregue qualquer tipo de UX com templates de coluna. Qualquer coisa que você imaginar pode renderizar em uma coluna de grade!

    Interactive Features

    Todos os recursos interativos principais que seus usuários esperam, como filtragem de colunas, ocultação de colunas, redimensionamento de colunas, ordenação de colunas e muito mais!

    Beautiful UX & Branding

    Suporte a temas embutidos para Bootstrap, Material e Fluent, além de infinitas opções de branding em paletas de cores, fontes, elevação, densidade de exibição e muito mais.

    Rich Keyboard Navigation

    A navegação completa por teclado no estilo Excel oferece ao usuário a experiência que ele espera com uma navegação por teclado de alto desempenho.