AG Grid es un Data Grid de JavaScript altamente personalizable y con todas las funciones . Ofrece un rendimiento excepcional , no tiene dependencias de terceros y viene con soporte para 
reaccionar , 
angulares y 
Vista .
Cuadrícula de datos de JavaScript | Tabla de JavaScript
Soporte empresarial
Informes de errores
Preguntas
Contribuyendo
Herramientas y extensiones
Escaparate
Observadores de estrellas
Componentes personalizados
Temas
Temas personalizados
Instalación
Configuración
Proyectos Semillas
Características
Ejemplos
? Descripción general
⚡️ Inicio rápido
?️Personalizaciones
? Comunidad
? Apoyo
Licencia
AG Grid está disponible en dos versiones: Community y Enterprise.
ag-grid-community es gratuito, está disponible bajo la licencia MIT y viene con todas las funciones principales que se esperan de un Data Grid de JavaScript, incluidas clasificación, filtrado, paginación, edición, componentes personalizados, temáticas y más.
ag-grid-enterprise está disponible bajo una licencia comercial y viene con funciones avanzadas, como gráficos integrados, agrupación de filas, agregación, pivotación, maestro/detalle, modelo de filas del lado del servidor y exportación, además del soporte dedicado de nuestro equipo de ingeniería.
| Característica | Comunidad AG Grid | Empresa AG Grid |
|---|---|---|
| Filtración | ✅ | ✅ (Avanzado) |
| Clasificación | ✅ | ✅ |
| Edición de celdas | ✅ | ✅ |
| Exportación CSV | ✅ | ✅ |
| Arrastrar y soltar | ✅ | ✅ |
| Temas y estilo | ✅ | ✅ |
| Selección | ✅ | ✅ |
| Accesibilidad | ✅ | ✅ |
| Desplazamiento infinito | ✅ | ✅ |
| Paginación | ✅ | ✅ |
| Datos del lado del servidor | ✅ | ✅ (Avanzado) |
| Componentes personalizados | ✅ | ✅ |
| Gráficos integrados | ❌ | ✅ |
| Selección de rango | ❌ | ✅ |
| Agrupación y agregación de filas | ❌ | ✅ |
| Pivotando | ❌ | ✅ |
| Exportación de Excel | ❌ | ✅ |
| Operaciones del portapapeles | ❌ | ✅ |
| Maestro/Detalle | ❌ | ✅ |
| Datos del árbol | ❌ | ✅ |
| Menú de columnas | ❌ | ✅ |
| Menú contextual | ❌ | ✅ |
| Paneles de herramientas | ❌ | ✅ |
| Apoyo | ❌ | ✅ |
ℹ️ Nota:
Visite la página de precios para obtener una comparación completa.
Hemos creado varias demostraciones para mostrar el rico conjunto de funciones de AG Grid en diferentes casos de uso. Véalos en acción a continuación o interactúe con ellos en nuestra página de demostración.
Ejemplo de datos financieros con actualizaciones en vivo y minigráficos:
Demostración en vivo • Código fuente
Ejemplo de datos de inventario para ver y administrar productos:
Demostración en vivo • Código fuente
Ejemplo de datos de recursos humanos que muestra datos jerárquicos de empleados:
Demostración en vivo • Código fuente
AG Grid es fácil de configurar: todo lo que necesita hacer es proporcionar sus datos y definir su estructura de columnas. Continúe leyendo para obtener instrucciones de instalación de JavaScript estándar o consulte nuestras guías específicas del marco para obtener más información. reaccionar , angulares y Vista.
Instalación de $ npm --save ag-grid-community
1. Proporcione un contenedor
Cargue la biblioteca AG Grid y cree un div contenedor. El div debe tener una altura porque la cuadrícula de datos ocupará el tamaño del contenedor principal:
<html lang="en"> <head> <!-- Incluye todo JS y CSS para JavaScript Data Grid --> <script src="https://cdn.jsdelivr.net/npm/ag-grid-community /dist/ag-grid-community.min.js"></script> </head> <body> <!-- Su contenedor de Data Grid --> <div id="myGrid" style="height: 500px"></div></body></html>
2. Creación de instancias de la cuadrícula de datos de JavaScript
Cree la cuadrícula de datos dentro de su div contenedor usando createGrid .
// Opciones de cuadrícula: contiene todas las configuraciones de la cuadrícula de datosconst gridOptions = {};// Su código Javascript para crear la cuadrícula de datosconst myGridElement = document.querySelector('#myGrid');agGrid.createGrid(myGridElement, gridOptions);3. Definir filas y columnas
// Opciones de cuadrícula: contiene todas las configuraciones de la cuadrícula de datos const gridOptions = { // Datos de fila: los datos que se mostrarán. rowData: [ {marca: 'Tesla', modelo: 'Modelo Y', precio: 64950, eléctrico: verdadero }, {marca: 'Ford', modelo: 'F-Series', precio: 33850, eléctrico: falso }, { marca: 'Toyota', modelo: 'Corolla', precio: 29600, eléctrico: false }, ], // Definiciones de columnas: define las columnas que se mostrarán. columnDefs: [{ campo: 'marca' }, { campo: 'modelo' }, { campo: 'precio' }, { campo: 'eléctrico' }],};ℹ️ Nota:
Para obtener más información sobre la creación de Data Grids con AG Grid, consulte nuestra documentación.
También proporcionamos proyectos semilla para ayudarlo a comenzar con configuraciones comunes:
| Ambiente | Estructura | Paquetes | Módulos |
|---|---|---|---|
| Crear aplicación React (CRA) | | Paquetes | Módulos |
| vite | | Paquetes | Módulos |
| Vite - TypeScript |  | Paquetes | Módulos |
| Paquete web 5: mecanografiado | | Paquetes | Módulos |
| Paquete web 5: JavaScript |  | Paquetes | Módulos |
| CLI angular | | Paquetes | Módulos |
| Nuxt | | Paquetes | Módulos |
| vite | | Paquetes | Módulos |
AG Grid es totalmente personalizable, tanto en términos de apariencia como de funcionalidad. Hay muchas formas de personalizar la cuadrícula y proporcionamos una selección de herramientas para ayudar a crear esas personalizaciones.
Puede crear sus propios componentes personalizados para personalizar el comportamiento de la cuadrícula. Por ejemplo, puede personalizar cómo se representan las celdas, cómo se editan los valores y también crear sus propios filtros.
Hay varios tipos de componentes diferentes que puede proporcionar a la red, incluidos:
Componente de celda: para personalizar el contenido de una celda.
Componente de encabezado: para personalizar el encabezado de una columna y grupos de columnas.
Editar componente: para personalizar la edición de una celda.
Componente de filtro: para el filtro de columna personalizado que aparece dentro del menú de columnas.
Filtro flotante: para un filtro flotante de columna personalizado que aparece dentro del menú de columnas.
Componente de fecha: para personalizar el componente de selección de fecha en el filtro de fecha.
Componente de carga: para personalizar la fila de la celda de carga cuando se utiliza el modelo de fila del lado del servidor.
Componente de superposición: para personalizar la carga y los componentes de superposición sin filas.
Componente de barra de estado: para componentes de barra de estado personalizados.
Componente del panel de herramientas: para componentes del panel de herramientas personalizados.
Componente de información sobre herramientas: para componentes de información sobre herramientas de celda personalizados.
Componente de elemento de menú: para personalizar los elementos de menú que se muestran en los menús de columna y contexto.
Para proporcionar un procesador de celdas personalizado y componentes de filtro a Grid, cree una referencia directa a su componente dentro de la propiedad gridOptions.columnDefs :
gridOptions = { columnDefs: [ { field: 'country', // La columna para agregar el componente a cellRenderer: CountryCellRenderer, // Su filtro de componente de celda personalizado: CountryFilter, // Su componente de filtro personalizado }, ],}; AG Grid tiene 4 temas, cada uno disponible en modos light y dark :
| Cuarzo | Material |
|---|---|
 |  |
| alpino | Balham |
 |  |
Todos los temas de AG Grid se pueden personalizar utilizando Theming API, o puede crear un nuevo tema desde cero con la ayuda de nuestro Theme Builder o Figma Design System.
AG Grid tiene una comunidad grande y activa que ha creado un ecosistema de herramientas, extensiones y utilidades de terceros para ayudarlo a construir su próximo proyecto con AG Grid, sin importar qué lenguaje o marco utilice:
Reaccionar • 
angulares • Mecanografiado • 
Vista • 
Pitón • 
Esbelto • 
SólidoJS • 
.NETO • 
Óxido • 
Laravel
AG Grid es utilizado por cientos de miles de desarrolladores en todo el mundo, de casi todas las industrias. Si bien la mayoría de estos proyectos son privados, hemos seleccionado una selección de proyectos de código abierto de diferentes industrias donde nombres conocidos utilizan AG Grid, incluidos JPMorgan , MongoDB y NASA . Visite nuestra página de exhibición comunitaria para obtener más información.
Fundada en 2016, AG Grid ha experimentado un aumento constante en popularidad y ahora es el líder del mercado de Data Grids:
Los clientes de AG Grid Enterprise tienen acceso a soporte dedicado a través de ZenDesk, que es monitoreado por nuestros equipos de ingeniería.
Si ha encontrado un error, infórmelo en la sección de problemas de este repositorio.
Busque problemas similares en StackOverflow usando la etiqueta ag-grid . Si nada parece relacionado, publique un mensaje nuevo allí. No utilice los problemas de GitHub para hacer preguntas.
AG Grid es desarrollado por un equipo de desarrolladores ubicados conjuntamente en Londres. Si quieres unirte al equipo envía tu solicitud a [email protected].
ag-grid-community tiene la licencia MIT .
ag-grid-enterprise tiene una licencia comercial .
Consulte el archivo de LICENCIA para obtener más información.
Gráficos AGSi ha llegado hasta aquí, es posible que le interese nuestro último proyecto: AG Charts: la mejor biblioteca de gráficos JavaScript del mundo.
Inicialmente construido para impulsar los gráficos integrados en AG Grid, abrimos este proyecto en 2018. Habiendo visto el aumento constante de su popularidad desde entonces, hemos decidido invertir en AG Charts con una versión empresarial dedicada ( ag-charts-enterprise ) en Además de nuestro continuo apoyo a ag-charts-community .
Síguenos para mantenerte al día con las últimas novedades de AG Grid:
