Free & Open-Source Angular Data Grid (Grid Lite)

O Ignite UI for Angular Grid Lite é uma grade de dados Angular leve, de alto desempenho, gratuita para uso, de código aberto e construída para aplicações Angular modernas.

Essa grade de dados Angular gratuita é 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. Ela oferece funcionalidades essenciais de exibição de dados com sobrecarga mínima e o desempenho que os usuários esperam. O Angular Grid Lite foi projetado para desenvolvedores que precisam de uma apresentação de dados rápida e leve.

What You Get with our Free Angular Data Grid

Nosso Angular Grid Lite gratuito e de código aberto vem com os seguintes recursos baseados em colunas: ordenação, filtragem, ocultação, redimensionamento e uma variedade de tipos de dados pré-definidos. O desempenho extremamente rápido é oferecido com o uso de virtualização por linhas. Além disso, o componente suporta navegação por teclado e tematização por meio do Ignite UI Theming Framework.

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

Grid Lite in Action

Installation and Setup

Para usar o Grid Lite no seu aplicativo, você pode importá-lo diretamenteigniteui-angular por esse pontoigniteui-angular/grids/lite de entrada. Mas você também precisa instalar oigniteui-grid-lite pacote que alimenta a interface. IgxGridLiteComponent fornece Angular bindings (eventos, templates, DI, detecção de mudanças, pipes), enquanto a interface visual grid lite é renderizada porigniteui-grid-lite. Instalar ambos garante que o grid lite se comporte nativamente em Angular enquanto aproveita todaigniteui-grid-lite a interface.

npm install igniteui-grid-lite

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

// app.component.ts

import { Component } from '@angular/core';
import { IgxGridLiteComponent, IgxGridLiteColumnComponent } from 'igniteui-angular/grids/lite';

@Component({
  ...
  imports: [IgxGridLiteComponent, IgxGridLiteColumnComponent],
  template: `
    <div>
      <igx-grid-lite [data]="products">
        <igx-grid-lite-column field="id" header="ID" dataType="number"></igx-grid-lite-column>
        <igx-grid-lite-column field="name" header="Name"></igx-grid-lite-column>
        <!-- Additional columns -->
      </igx-grid-lite>
    </div>
  `
})
export class AppComponent {
  products: Products[] = [...];
}

Características

Performance Built In

Quando você usa nossa grade de dados Angular gratuitamente, você pode implementar virtualização em nível de linha. Isso 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

Com nosso controle open-source Angular data grid, você também pode entregar 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

Esta grade de dados Angular gratuita (Grid Lite) vem com 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.

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.

Is Grid Lite a Free & Open-Source Angular Data Grid?

Sim. Ignite UI Grid Lite é uma grade de Angular de dados gratuita, de código aberto, lançada sob a licença do MIT. Você pode usá-la em projetos comerciais ou pessoais sem taxas de licenciamento. Faz parte da nossa iniciativa para tornar Ignite UI mais aberto, transparente e acessível.

MIT-licensed
Livre para uso comercial
Community-driven development
Sem restrição de recursos

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 sem falhas. Isso tornará a transição da grade de dados Angular gratuita (Grid Lite) para a Data Grid avançada e completa mais simples e rápida.