Grid JavaScript de código abierto para cualquier proyecto
El componente Ignite UI for Angular Grid Lite forma parte de Infragistics nuevo conjunto de componentes de interfaz de usuario de código abierto que será activamente soportado y mantenido. Es una red de datos JavaScript de código abierto construida como un Componente Web, lo que significa que puedes usarla sin dependencias con o sin un framework web. Actualmente hay 50+ controles OSS disponibles bajo la licencia MIT en Angular, React, Blazor y 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.
Rich Keyboard Navigation
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.
GitHub