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

    The Ignite UI for Angular Grid Lite is a lightweight, high-performance Angular data grid that’s free to use, open-source, and built for modern Angular applications.

    This free Angular data grid is open-source JavaScript data grid built as a Web Component, which means you can use it dependency-free with or without a web framework. It delivers essential data-display functionality with minimal overhead and the performance users expect. The Angular Grid Lite is designed for developers who need fast and lightweight data presentation.

    What You Get with our Free Angular Data Grid

    Our free, open-source Angular Grid Lite comes with the following column-based features: sorting, filtering, hiding, resizing and a variety of pre-defined data types. Blazing-fast performance is delivered with the use of row virtualization. In addition, the component supports keyboard navigation and theming through the 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 adicionar o Grid Lite ao seu aplicativo Angular, instale o pacote a partir do npm.

    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, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { IgcGridLite } from 'igniteui-grid-lite';

IgcGridLite.register();

@Component({
  ...
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
  template: `
    <main>
      <igc-grid-lite [data]="products">
        <igc-grid-lite-column field="id" header="ID" data-type="number"></igc-grid-lite-column>
        <igc-grid-lite-column field="name" header="Name"></igc-grid-lite-column>
        <!-- Additional columns -->
      </igc-grid-lite>
    </main>
  `
})
export class AppComponent {
  products: Products[] = [...];
}

    Características

    Performance Built In

    When you use our Angular data grid for free, you are enabled to implement row-level virtualization. This allows you to render unlimited amounts of data with smooth scrolling.

    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

    With our Angular data grid open-source control you can also deliver any type of UX with column templates. Anything you imagine can render in a grid column!

    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

    This free Angular data grid (Grid Lite) comes with built-in theme support for Bootstrap, Material & Fluent, plus endless branding options in color palettes, fonts, elevation, display density & more.

    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.

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

    Yes. Ignite UI Grid Lite is a free, open-source Angular data grid released under the MIT license. You can use it in commercial or personal projects with no licensing fees. It is part of our initiative to make Ignite UI more open, transparent, and accessible.

    • MIT-licensed

    • Free for commercial use

    • Community-driven development

    • No feature gating

    However, if your project scales and grows in complexity and functionality, and you require an enterprise-grade application, we have a seamless upgrade strategy. It will make the transitioning from the free Angular data grid (Grid Lite) to the full-featured and advanced Data Grid simpler and faster.

    Angular supports custom elements, so you can use Grid Lite with ease.