Get started with AG Grid Angular Data Grid

Rate this content
Bookmark

Get started with AG Grid Angular Data Grid with a hands-on tutorial from the core team that will take you through the steps of creating your first grid, including how to configure the grid with simple properties and custom components. AG Grid community edition is completely free to use in commercial applications, so you’ll learn a powerful tool that you can immediately add to your projects. You’ll also discover how to load data into the grid and different ways to add custom rendering to the grid. By the end of the workshop, you will have created and customized an AG Grid Angular Data Grid.


Contents:

- getting started and installing AG Grid

- configuring sorting, filtering, pagination

- loading data into the grid

- the grid API

- add your own components to the Grid for rendering and editing

- capabilities of the free community edition of AG Grid

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

FAQ

AG Grid is a JavaScript grid library that supports features like sorting, filtering, and charting. It is designed to work efficiently in financial settings among others, providing high performance for live streaming updates. AG Grid offers a variety of themes and is customizable for different application needs.

To use AG Grid in an Angular application, start by installing the AG Grid Community package and the AG Grid Angular package. Then, import the AGGridModule into your Angular module to access all the grid features. Initialize your application using Angular CLI, create a new project, and integrate AG Grid as described in the workshop instructions.

To follow the workshop, access the provided GitHub repo link from the chat, check out the main branch, and follow the instructions to switch through different stages of the workshop. This setup allows you to start from scratch or follow specific steps to implement AG Grid features in your application.

The integration of AG Grid into an existing project requires a basic understanding of JavaScript and familiarity with the Angular framework if using Angular. Ensure your project is compatible with AG Grid versions supported, which currently extends back to version 8, with active support starting from version 9.

Yes, AG Grid is highly customizable. You can choose from different themes, adjust row and column behaviors, and utilize custom cell renderers. AG Grid also allows the configuration of grid properties to match specific requirements, like enabling or disabling animations, sorting, and filtering capabilities.

Data updates and interactions in AG Grid can be managed using Angular's HTTP client to fetch data, which can then be displayed and updated in the grid. AG Grid supports observable data sources, and you can use Angular's async pipe for efficient data handling. Additionally, AG Grid events allow for responsive updates to user interactions such as row selection or data editing.

AG Grid provides comprehensive documentation and a dedicated support team to assist users. The documentation includes detailed guides, API references, and example projects to help users implement and customize the grid. Support is also available through community forums and direct contact with the AG Grid support team.

AG Grid is optimized for performance, making it suitable for large-scale applications, including those in financial sectors where real-time data processing is crucial. It handles large datasets efficiently, supports live data streaming, and offers features like on-the-fly filtering and sorting to enhance performance.

Stephen Cooper
Stephen Cooper
116 min
04 Jul, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

The Workshop introduces AG Grid and covers topics such as setting up row data and column definitions, enabling sorting, configuring grid features and user interaction, accessing the grid API, and adding styling. It also explores custom cell renderers, filters, and enterprise features like charting, grid options, and sidebar functionalities. The Workshop concludes with discussions on advanced grid features, aggregation, customizing the context menu, and accessing and updating data in the grid.

1. Introduction to AG Grid and Setup

Short description:

We'll start off at the basic level and then build it up into more complicated features. I'll show you how to work with the grid and provide a link to the repo with instructions. I'm Stephen Cooper, a developer at Easy Grid, and I'll guide you through using AG Grid in your applications. Let's get started with the Angular CLI to create a new application. We'll add AG Grid using the AG Grid Community and AG Grid Angular packages. Once we import the AG Grid module, we can start our app and modify the app component to include the necessary code for the grid.

We'll start off at the basic level, and then we'll build it as we go through the workshop into more complicated features to, I guess, both servers. this is how you use AG Grid. But then also if you're looking to do something more complicated I'll show you how you can do that and work with the grid.

And then if you're planning on following along with the workshop I've put a link in the chat to the repo which has the instructions in. So if you go to the main branch it tells you you can switch through the different stages of the workshop. So for example we'll start with the quick start and And these will be the steps that we're working through. So you can either start from scratch like I'm going to do with the Angular CLI or you can follow along these instructions and switch branches. If you check out this repo, then in case you get stuck on one step, you can always get to the next starting point and carry on the workshop. And then also hopefully this will serve as a good reference for you. You'll definitely get to see what AG Grid is about.

And I guess while we're just before I actually start following the steps and creating the app. So this is our probably introduce myself and maybe wondering who I am. But, yeah, my name is Stephen Cooper and I work at Easy Grid on the core team. So I'm one of the developers, I guess now maintaining the grid, adding features, making sure our documentation site is the best it can be so people have good success with our grid. um but yeah aj grid is a javascript grid so anything to do with tables and features that you might associated with that sorting filtering um these are all the kind of features you can expect from aj grid and much much more um so we're definitely highly used in financial um settings um but that's definitely not the only place we're used and so we can have really good performance live streaming updates some charting so maybe touch on these things at the end of the workshop but we'll start from the beginning um and showing you how you might be able to start using AG grid in your own um applications so i think we'll get started from here and just so you know feel free to ask stop me ask any questions as we're going, if there's something which doesn't make sense or you want more information about it because then I can go into it in more detail and make sure it's clear.

So to get started we're going to use the angular CLI just to spin up a new workshop, or not a new workshop, a new application for us. So we're going to do that with ng-new. Let's call it MyApp. And then we're going to set some defaults for us here. We'll set the style to SPSS. We don't need routing for this app. and we're going to default the styles and templates to be in line so that makes it easier to see during this workshop but that's completely up to you how you would prefer to set up your own application or how it is done in your current project so once this app has been created I'll and show you the steps that we need to add AG Grid into it, and this is using Angular 14, seeing as that is now the newest version, but in terms of AG Grid features, we're going to be supporting it back to 8 at the moment, and definitely from 9, you'll still have support, so if your project has already been created on an older version, you know, we're going to help and maintain that compatibility. So if we come into our app, we've got run start, we should be able to see that we'll have a template app. Let's have a look. We do. This is interesting that when you do it with inline styles or template, you get the old application thing instead of the new one. But we'll stop that. And now we're going to add AG Grid. So there's two packages that you're going to want to use for AG Grid. We've got our AG Grid Community. And this is all the free features of the Grid. And then also we've got AG Grid. Angular, which is an Angular wrapper, which provides the type, which provides the Angular component, which enables you to interact with it in an Angular-specific way. So, we've got our Angular code and we've got AG Grid Angular and community. Those are the two packages that we will need to get started with AG Grid. Now, before we can get any further, we'll need to add the AG Grid module into our module to import all the features. So that's azgrid module. So with that, that brings in the component. Now let's start up our app. And we're going to go into our app component and let's change this. So, we'll get rid of the generated code. Give us a flat slate. Right. Now we wonder why it's not working. Okay. So, we're going to do that. The component that we're going to be using is ag-grid-angular. So we'll add that in. And the main thing you need for a grid is, of course, data and column definitions. So I'm just going to copy in some data and also the column definitions to save me typing them out.

2. Setting up Row Data and Column Definitions

Short description:

We've set up the row data and column definitions for our grid. We've also added the necessary CSS files, including the core grid CSS and the theme file for AgThemeAlpine. By tying the theme in with AG ALPINE and setting the style to 100%, we have our first grid displayed with the provided row data and column definitions. This is the basic setup to get started with AG Grid. There are different themes available, including a dark mode option.

So I've copied them from the GitHub repo that I posted in the chat. And let's go through this, so what we've got here is for our row data we're going to be looking at some Olympic medal winners, so we've got athletes, their names, age, countries, where they're from and then also you know how many medals they won at each of these competitions, and you'll see that our column definitions for the grid match the properties of our row data, so you've got field athlete that will be pointing at this field age is is that property and so on.

So we need to pass these to our components. So we've got inputs of row data. So pass that the row row data and column definitions. Now, at this point you're thinking, is AG Grid completely broken, but we're just missing another set up stage which is to give it all the The following CSS... So, what we've got here, AGGrid.css. So, this is the core grid CSS, so you're always going to need to import that because that actually governs how the grid is structured. And then the second file here is a theme. So AG Grid comes with a few different themes. And this is the theme file for AgThemeAlpine. And if we come back to our Angular grid here, we're going to tie the theme in with AG ALPINE, and also we're going to set the style on this so that it takes up the height of our demo application. Let's just say 100%. And there we go. We've got our first grid. And so you can see now our row data, the three rows we've got are displayed and using the column definitions that we provided. So that's the the basics of all the bare minimum that you need to do to get a g grid started um and as i said there are different themes so we could change the class of that to be dark and if we update the css file as well to be the dark theme you'll see you can have the grid in dark mode as well so you could make that dynamic because i know that's very popular for people to do be able to elect users, change the styling. But yeah, there's a few different themes, which you can see on our website, depending on what you're looking for. So that's the initial step.