Grid JavaScript de código abierto para cualquier proyecto

The Ignite UI for Angular Grid Lite component is part of Infragistics’ new open-source UI component set that will be actively supported and maintained. It 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. There are 50+ OSS controls now available under the MIT license across Angular, React, Blazor, and Web Components.

El Angular Grid Lite ofrece funcionalidades esenciales de visualización de datos con una sobrecarga mínima y el rendimiento que los usuarios esperan. Está diseñado para desarrolladores que necesitan una presentación rápida y ligera de datos sin la complejidad de una red empresarial.

Angular Características de Grid Lite:

Filtrado de columnas
Ocultación
Cambiar el tamaño
Clasificación
Row Virtualization
Accesibilidad
Temas y estilo
Tipos de datos de columna

Los controles Grid Lite son completamente gratuitos, con licencia del MIT, como parte de nuestra iniciativa para hacer Ignite UI más abiertos, transparentes y accesibles. Sin embargo, si tu proyecto escala y crece en complejidad y funcionalidad, y necesitas una aplicación de nivel empresarial, tenemos una estrategia de actualización para la transición de la Grid Lite a la avanzada y completa Data Grid.

Angular soporta elementos personalizados, así que puedes usar Grid Lite con facilidad.

Installation

Para añadir Grid Lite a tu aplicación Angular, instala el paquete desde npm.

npm install igniteui-grid-lite

Configuración

Antes de iniciar la aplicación, asegúrate de importar y pasar el esquema personalizado de elementos que se muestra a continuación.

// 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

La virtualización a nivel de fila te permite renderizar cantidades ilimitadas de datos con desplazamiento suave.

Automatic Column Types

Los tipos de columna se generan automáticamente en función de tu fuente de datos con filtrado integrado según el tipo de columna.

Custom Column Templates

Entrega cualquier tipo de experiencia de usuario con plantillas de columnas. ¡Cualquier cosa que imagines puede renderizarse en una columna de cuadrícula!

Interactive Features

Todas las funciones interactivas principales que tus usuarios esperan, como filtrado de columnas, ocultación de columnas, redimensionamiento de columnas, ordenación de columnas y más.

Beautiful UX & Branding

Soporte integrado de temas para Bootstrap, Material y Fluent, además de infinitas opciones de marca en paletas de colores, tipografías, elevación, densidad de pantalla y más.

La navegación completa de teclado al estilo Excel ofrece al usuario la experiencia que espera con una navegación de teclado de alto rendimiento en el clavado.