Comienza con AG Grid Angular Data Grid

Rate this content
Bookmark

Comienza con AG Grid Angular Data Grid con un tutorial práctico del equipo principal que te guiará a través de los pasos para crear tu primera cuadrícula, incluyendo cómo configurar la cuadrícula con propiedades simples y componentes personalizados. La edición de la comunidad de AG Grid es completamente gratuita para usar en aplicaciones comerciales, por lo que aprenderás una herramienta poderosa que puedes agregar de inmediato a tus proyectos. También descubrirás cómo cargar datos en la cuadrícula y diferentes formas de agregar representación personalizada a la cuadrícula. Al final del masterclass, habrás creado y personalizado una cuadrícula de datos AG Grid Angular.


Contenido:

- comenzando e instalando AG Grid

- configurando ordenamiento, filtrado, paginación

- cargando datos en la cuadrícula

- la API de la cuadrícula

- agregar tus propios componentes a la cuadrícula para representación y edición

- capacidades de la edición de la comunidad gratuita de AG Grid

This workshop has been presented at JSNation 2022, check out the latest edition of this JavaScript Conference.

FAQ

AG Grid es una cuadrícula de JavaScript que se utiliza para trabajar con tablas y características asociadas como clasificación, filtrado, y más. Es ampliamente utilizado en entornos financieros, aunque su uso no se limita a estos.

Para comenzar con AG Grid en Angular, primero crea una nueva aplicación usando Angular CLI con 'ng new MyApp'. Luego, instala los paquetes AG Grid Community y AG Grid Angular. Finalmente, añade el módulo AG Grid en tu módulo Angular para importar todas las características.

Después de crear tu aplicación Angular, debes instalar los paquetes AG Grid Community y AG Grid Angular. Luego, importa el módulo AG Grid en tu módulo Angular y usa el componente ag-grid-angular en tus componentes Angular.

AG Grid viene con varios temas, como AgThemeAlpine. Puedes vincular un tema a tu cuadrícula y establecer su estilo. También es posible cambiar dinámicamente a un tema oscuro actualizando el archivo CSS correspondiente.

AG Grid ofrece características avanzadas como filtrado avanzado, clasificación, exportación de datos, visualización de transmisiones en vivo y gráficos. Estas características son especialmente útiles en entornos que requieren alto rendimiento y actualizaciones en tiempo real.

AG Grid admite Angular hasta la versión 8 y garantiza compatibilidad y soporte incluso para las versiones más recientes, como Angular 14 mencionado en el contexto.

AG Grid permite manejar grandes conjuntos de datos utilizando características como la paginación, el filtrado eficiente y la posibilidad de interactuar con datos a través de APIs de backend, facilitando la gestión de grandes volúmenes de datos de manera eficiente.

Sí, puedes personalizar las celdas en AG Grid utilizando componentes Angular personalizados como renderizadores de celda, lo que te permite integrar funcionalidades complejas y personalizadas directamente en las celdas de la cuadrícula.

Stephen Cooper
Stephen Cooper
116 min
04 Jul, 2022

Comments

Sign in or register to post your comment.
Video Summary and Transcription
El masterclass introduce AG Grid y cubre temas como configurar datos de fila y definiciones de columna, habilitar el ordenamiento, configurar características de la cuadrícula e interacción del usuario, acceder a la API de la cuadrícula y agregar estilos. También explora renderizadores de celdas personalizados, filtros y características empresariales como gráficos, opciones de cuadrícula y funcionalidades de la barra lateral. El masterclass concluye con discusiones sobre características avanzadas de la cuadrícula, agregación, personalización del menú contextual y acceso y actualización de datos en la cuadrícula.

1. Introducción a AG Grid y Configuración

Short description:

Comenzaremos desde el nivel básico y luego avanzaremos hacia características más complicadas. Te mostraré cómo trabajar con la cuadrícula y proporcionaré un enlace al repositorio con instrucciones. Soy Stephen Cooper, un desarrollador en Easy Grid, y te guiaré en el uso de AG Grid en tus aplicaciones. Comencemos con Angular CLI para crear una nueva aplicación. Agregaremos AG Grid utilizando los paquetes AG Grid Community y AG Grid Angular. Una vez que importemos el módulo AG Grid, podemos iniciar nuestra aplicación y modificar el componente de la aplicación para incluir el código necesario para la cuadrícula.

Comenzaremos desde el nivel básico y luego avanzaremos a medida que avancemos en el taller hacia características más complicadas, supongo, para ambos servidores. así es como se usa AG Grid. Pero luego también si estás buscando hacer algo más complicado te mostraré cómo puedes hacer eso y trabajar con la cuadrícula.

Y luego, si planeas seguir el taller tengo un enlace en el chat al repositorio que tiene las instrucciones. Entonces, si vas a la rama principal, te dice puedes cambiar a través de las diferentes etapas del taller. Por ejemplo comenzaremos con el inicio rápido y Y estos serán los pasos en los que trabajaremos. Puedes comenzar desde cero como lo haré con el Angular CLI o puedes seguir estas instrucciones y cambiar de rama. Si revisas este repositorio, entonces en caso de que te quedes atascado en un paso, siempre puedes pasar al siguiente punto de partida y continuar con el taller. Y también espero que esto te sirva como una buena referencia. Definitivamente podrás ver de qué se trata AG Grid.

Y supongo que mientras estamos justo antes de comenzar a seguir los pasos y crear la aplicación. Así que probablemente me presente y tal vez te preguntes quién soy. Pero sí, mi nombre es Stephen Cooper y trabajo en Easy Grid en el equipo principal. Así que soy uno de los desarrolladores, supongo que ahora manteniendo la cuadrícula, agregando características, asegurándome de que nuestro sitio de documentación sea lo mejor posible para que las personas tengan éxito con nuestra cuadrícula. um pero sí, aj grid es una cuadrícula de javascript por lo que todo lo relacionado con tablas y características que podrías asociar con eso, clasificación, filtrado, um todas estas son las características que puedes esperar de aj grid y mucho más um definitivamente se usa mucho en entornos financieros um pero ese definitivamente no es el único lugar donde se usa, por lo que podemos tener actualizaciones de transmisión en vivo de muy buen rendimiento, algunos gráficos, así que tal vez toquemos estos temas al final del taller, pero comenzaremos desde el principio um y te mostraré cómo podrías comenzar a usar AG grid en tus propias um aplicaciones, así que creo que comenzaremos desde aquí y solo para que lo sepas, siéntete libre de detenerme hacer preguntas mientras avanzamos, si hay algo que no tiene sentido o si deseas más información al respecto, porque entonces puedo entrar en más detalles y asegurarme de que esté claro. Para comenzar, vamos a usar el angular CLI solo para crear una nueva aplicación para nosotros. Así que vamos a hacer eso con ng-new. Llamémoslo MyApp. Y luego vamos a establecer algunos valores predeterminados aquí. Estableceremos el estilo en SPSS. No necesitamos enrutamiento para esta aplicación. y vamos a establecer los estilos y plantillas en línea para que sea más fácil de ver durante este taller, pero eso depende completamente de ti cómo prefieras configurar tu propia aplicación o cómo se hace en tu proyecto actual así que una vez que se haya creado esta aplicación, te mostraré los pasos que necesitamos seguir para agregar AG Grid en ella, y esto se hace con Angular 14, ya que ahora es la versión más reciente, pero en términos de características de AG Grid, vamos a admitirlo hasta la versión 8 en este momento, y definitivamente a partir de la versión 9, aún tendrás soporte, por lo que si tu proyecto ya se creó en una versión anterior, sabes, vamos a ayudar y mantener esa compatibilidad. Entonces, si entramos en nuestra aplicación, tenemos que ejecutar start, deberíamos poder ver que tendremos una aplicación de plantilla. Echemos un vistazo. Lo tenemos. Es interesante que cuando lo haces con estilos en línea o plantilla, obtienes la antigua aplicación en lugar de la nueva. Pero detendremos eso. Y ahora vamos a agregar AG Grid. Hay dos paquetes que vas a querer usar para AG Grid. Tenemos nuestro AG Grid Community. Y estas son todas las características gratuitas de la cuadrícula. Y también tenemos AG Grid. Angular, que es un envoltorio de Angular, que proporciona el tipo, que proporciona el componente Angular que te permite interactuar con él de una manera específica de Angular. Entonces, tenemos nuestro código Angular y tenemos AG Grid Angular y community. Esos son los dos paquetes que necesitaremos para comenzar con AG Grid. Ahora, antes de poder avanzar, deberemos agregar el módulo AG Grid en nuestro módulo para importar todas las características. Así que ese es el módulo azgrid. Con eso, se importa el componente. Ahora vamos a iniciar nuestra aplicación. Y vamos a ir al componente de nuestra aplicación y vamos a cambiar esto. Entonces, nos desharemos del código generado. Nos dará una pizarra en blanco. Bien. Ahora nos preguntamos por qué no funciona. De acuerdo. Entonces, vamos a hacer eso. El componente que vamos a usar es ag-grid-angular. Así que lo agregaremos. Y lo principal que necesitas para una cuadrícula es, por supuesto, datos y definiciones de columnas. Así que voy a copiar algunos datos y también las definiciones de columnas para ahorrarme tener que escribirlos.

2. Configuración de datos de fila y definiciones de columna

Short description:

Hemos configurado los datos de fila y las definiciones de columna para nuestra cuadrícula. También hemos agregado los archivos CSS necesarios, incluyendo el CSS principal de la cuadrícula y el archivo de tema para AgThemeAlpine. Al vincular el tema con AG ALPINE y establecer el estilo en 100%, tenemos nuestra primera cuadrícula mostrada con los datos de fila y las definiciones de columna proporcionadas. Esta es la configuración básica para comenzar con AG Grid. Hay diferentes temas disponibles, incluida una opción de modo oscuro.

Así que los he copiado del repositorio de GitHub que publiqué en el chat. y vamos a revisar esto, así que lo que tenemos aquí es para nuestros datos de filadata vamos a ver algunos ganadores de medallas olímpicas, así que tenemos atletas, sus nombres, edad, países, de dónde son y también cuántas medallas ganaron en cada una de estas competiciones, y verás que nuestras definiciones de columna para la cuadrícula coinciden con las propiedades de nuestros datos de filadata, así que tienes el campo atleta que apuntará a este campo edad es esa propiedad y así sucesivamente. Así que necesitamos pasar estos a nuestros componentes. Así que tenemos entradas de datos de filadata. Así que pasamos eso a la fila datos de filadata y las definiciones de columna. Ahora, en este punto, estás pensando, ¿está AG Grid completamente roto, pero nos falta otra etapa de configuración que es darle todo el siguiente CSS... Así que lo que tenemos aquí, AGGrid.css. Este es el CSS principal de la cuadrícula, por lo que siempre deberás importarlo porque eso realmente gobierna cómo está estructurada la cuadrícula. Y luego el segundo archivo aquí es un tema. Así que AG Grid viene con algunos temas diferentes. Y este es el archivo de tema para AgThemeAlpine. Y si volvemos a nuestra cuadrícula Angular aquí, vamos a vincular el tema con AG ALPINE, y también vamos a establecer el estilo en esto para que ocupe la altura de nuestra aplicación de demostración. Digamos simplemente 100%. Y ahí lo tenemos. Tenemos nuestra primera cuadrícula. Y así puedes ver ahora nuestros datos de filadata, las tres filas que tenemos se muestran y se utilizan las definiciones de columna que proporcionamos. Así que eso es lo básico, el mínimo indispensable que necesitas hacer para comenzar con una cuadrícula g, y como dije hay diferentes temas, por lo que podríamos cambiar la clase para que sea oscura y si actualizamos el archivo css también para que sea el tema oscuro, verás que puedes tener la cuadrícula en modo oscuro también así que podrías hacerlo dinámico porque sé que eso es muy popular para que los usuarios puedan cambiar el estilo. Pero sí, hay varios temas diferentes, que puedes ver en nuestro sitio web, dependiendo de lo que estés buscando. Así que ese es el paso inicial.

Watch more workshops on topic

Monitoreo 101 para Desarrolladores de React
React Summit US 2023React Summit US 2023
107 min
Monitoreo 101 para Desarrolladores de React
Top Content
WorkshopFree
Lazar Nikolov
Sarah Guthals
2 authors
Si encontrar errores en tu proyecto frontend es como buscar una aguja en un pajar de código, entonces el monitoreo de errores de Sentry puede ser tu detector de metales. Aprende los conceptos básicos del monitoreo de errores con Sentry. Ya sea que estés ejecutando un proyecto de React, Angular, Vue, o simplemente JavaScript “vainilla”, mira cómo Sentry puede ayudarte a encontrar el quién, qué, cuándo y dónde detrás de los errores en tu proyecto frontend.
Nivel de la masterclass: Intermedio
Construye un potente DataGrid en pocas horas con Ag Grid
React Summit US 2023React Summit US 2023
96 min
Construye un potente DataGrid en pocas horas con Ag Grid
Top Content
WorkshopFree
Mike Ryan
Mike Ryan
¿Tu aplicación React necesita mostrar eficientemente muchos (y muchos) datos en una cuadrícula? ¿Tus usuarios quieren poder buscar, ordenar, filtrar y editar datos? AG Grid es la mejor cuadrícula de JavaScript en el mundo y está llena de características, es altamente eficiente y extensible. En esta masterclass, aprenderás cómo empezar con AG Grid, cómo podemos habilitar la ordenación y el filtrado de datos en la cuadrícula, la representación de celdas y más. Saldrás de esta masterclass gratuita de 3 horas equipado con el conocimiento para implementar AG Grid en tu aplicación React.
Todos sabemos que crear nuestra propia solución de cuadrícula no es fácil, y seamos honestos, no es algo en lo que deberíamos estar trabajando. Estamos enfocados en construir un producto e impulsar la innovación. En esta masterclass, verás lo fácil que es empezar con AG Grid.
Prerrequisitos: React y JavaScript básicos
Nivel de la masterclass: Principiante
Construye una Potente Rejilla de Datos con AG Grid
React Summit 2024React Summit 2024
168 min
Construye una Potente Rejilla de Datos con AG Grid
WorkshopFree
Brian Love
Brian Love
¿Tu aplicación React necesita mostrar eficientemente una gran cantidad de datos en una rejilla? ¿Tus usuarios quieren poder buscar, ordenar, filtrar y editar datos? AG Grid es la mejor rejilla JavaScript del mundo y está repleta de funciones, altamente eficiente y extensible. En este masterclass, aprenderás cómo empezar con AG Grid, cómo habilitar la ordenación y filtrado de datos en la rejilla, la personalización y renderización de celdas, y más. Saldrás de este masterclass gratuito de 3 horas equipado con los conocimientos para implementar AG Grid en tu aplicación React.
Microfrontends con Module Federation y Angular
JSNation Live 2021JSNation Live 2021
113 min
Microfrontends con Module Federation y Angular
Workshop
Manfred Steyer
Manfred Steyer
Cada vez más empresas eligen Microfrontends. Sin embargo, no son fáciles de implementar. Afortunadamente, Module Federation introducido con webpack 5 ha iniciado un cambio crucial de dirección.
En este masterclass interactivo, aprenderás de Manfred Steyer, Angular GDE y Colaborador de Confianza en el equipo de Angular, cómo planificar e implementar arquitecturas de Microfrontend con Angular y el nuevo Module Federation de webpack. Hablaremos sobre compartir bibliotecas y conceptos avanzados como manejar desajustes de versión, Module Federation dinámico e integración en monorepos.
Después de los ejercicios individuales, tendrás un estudio de caso que podrás utilizar como plantilla para tus proyectos. Este masterclass te ayuda a evaluar las opciones individuales para tus proyectos.
Prerrequisitos:Debes tener algo de experiencia con Angular.
Masterclass de Codificación en Vivo para Configurar la Monitorización de Errores con Rollbar
TypeScript Congress 2023TypeScript Congress 2023
48 min
Masterclass de Codificación en Vivo para Configurar la Monitorización de Errores con Rollbar
WorkshopFree
Nico Krüger
Nico Krüger
Durante esta sesión aprenderás cómo crear una nueva cuenta de Rollbar e integrar el SDK de Rollbar con tu aplicación para monitorizar errores en tiempo real y responder y solucionar esos errores. También cubriremos cómo personalizar los datos de carga útil enviados a Rollbar para ampliar tus capacidades de monitorización.

Agenda:- Crear una cuenta de Rollbar (Cuenta gratuita)- Integra tu aplicación con el SDK de Rollbar- Enviar errores gestionados y no gestionados a Rollbar- Añadir datos de carga útil personalizados a tu configuración.
Construyendo una API GraphQL sin servidor para cualquier fuente de datos con StepZen
GraphQL Galaxy 2021GraphQL Galaxy 2021
75 min
Construyendo una API GraphQL sin servidor para cualquier fuente de datos con StepZen
WorkshopFree
Roy Derks
Roy Derks
¿Quieres empezar a construir un servidor GraphQL pero no tienes idea de por dónde empezar? Cada desarrollador (frontend) pide una API GraphQL pero a menudo carece del conocimiento backend para crear una que sea eficiente. Existen muchas formas diferentes de crear el servidor GraphQL perfecto, desde el enfoque de esquema primero hasta el enfoque de código primero o incluso soluciones generadas automáticamente.

En este masterclass interactivo, aprenderás a construir una API GraphQL sin servidor utilizando StepZen. Con StepZen, puedes crear un GraphQL para cualquier fuente de datos (SQL, NoSQL y REST) e incluso otras APIs GraphQL en cuestión de minutos. Incluso puedes manejar casos de uso más complicados como la autenticación y el despliegue. Con un poco de código, podrás combinar diferentes fuentes de datos en una API totalmente eficiente que podrás utilizar en tus aplicaciones desde el primer día.

Tabla de contenidos:
- ¿Qué es StepZen?
- Conexión a una fuente de datos (SQL, NoSQL y REST)
- Uso de directivas personalizadas
- Manejo de flujos de secuencia
- Despliegue

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

El Viento y las Olas: La formación de Olas de Framework desde el Epicentro
JSNation 2022JSNation 2022
19 min
El Viento y las Olas: La formación de Olas de Framework desde el Epicentro
Top Content
Our understanding of innovation is wrong. Innovations are not introduced by a single point of light. The story of who invented the computer is not linear. Many steps forward led to the development of the computer. Angular has shaped and influenced multiple JavaScript waves, and Angular v14 simplifies development with standalone components.
Momento Angular
JSNation 2023JSNation 2023
22 min
Momento Angular
Angular has experienced significant growth and is the second most popular framework after React. The latest release of Angular, called Angular Ivy, went through a major refactoring in 2021. Angular's reactivity model has been improved with the introduction of signals, which enable better integration with RxJS and support advanced reactivity patterns. Angular has made optimizations for performance, including improvements in load speed and lazy loading. The Angular team acknowledges the innovations in other frameworks and highlights the impact of introducing TypeScript in enabling the project's success.
Manejo Seguro de Datos Dinámicos con TypeScript
Node Congress 2021Node Congress 2021
29 min
Manejo Seguro de Datos Dinámicos con TypeScript
Top Content
This Talk discusses the safe handling of dynamic data with TypeScript using JSON Schema and TypeBox. Fastify, a web framework, allows developers to validate incoming data using JSON schema, providing type safety and error handling. TypeBox is a powerful library that allows developers to define JSON schemas and derive static types in TypeScript. The combination of JSON schema, TypeBox, and Fastify provides powerful tools for type safety and validation of dynamic data.
Apache Kafka Explicado Simplemente Con Ejemplos de TypeScript
JSNation 2023JSNation 2023
27 min
Apache Kafka Explicado Simplemente Con Ejemplos de TypeScript
Top Content
Apache Kafka is a distributed, scalable, and high-throughput event streaming platform that plays a key role in event-driven architecture. It allows for the division of monolithic applications into independent microservices for scalability and maintainability. Producers and consumers are the key components in Kafka, allowing for a decoupled system. Kafka's replication and persistent storage capabilities set it apart from alternatives like Redis and RabbitMQ. Kafka provides easy access to real-time data and simplifies real-time data handling.
El Arte de la Programación Funcional
React Summit 2022React Summit 2022
26 min
El Arte de la Programación Funcional
Functional programming is a beautiful paradigm that allows us to understand programs and how entities behave and interact. It has nice characteristics like predictability, which makes testing and debugging easier. We explore how functional programming handles side effects and generative art. We learn about drawing patterns and grids with recursive functions, handling state in functional programming, and creating fashion using functional programming techniques. We also discuss handling randomness in functional programming and how to introduce organic variation and randomness to art while maintaining predictability.
Modelado de Contenido para Desarrolladores de React
React Summit 2022React Summit 2022
7 min
Modelado de Contenido para Desarrolladores de React
Haushal, a Developer Advocate at Contentful, discusses content modeling and its importance in providing a great user experience. He uses his Cookbook web app as an example to explain how he structures and organizes content. The overall content model emphasizes reusability and considerations for content governance and platform selection. Content modeling is an iterative process, and Haushal provides resources for further learning and development.