Powerful Data Visualisation with AG Grid & AG Charts

Let's go ahead and get started. First, I'd like to introduce myself. My name is Mike Ryan. I'm a Google developer expert in Angular and web technologies. I'm one of the creators of NGRX. It's one of the most popular state management libraries in the Angular ecosystem. But today we're here to talk about how to use Aggrid with React.

So first I'll start off with why Aggrid. Well, if you've been to Aggrid's website, they have this marketing headline of being the fastest JavaScript grid in the world. And I actually do believe that to be true. It's extremely high performance. It uses a lot of handy performance features underneath the hood, like virtualization and a lot of heavy caching to give users a really great experience when sorting, filtering and aggregating through huge datasets. Personally, I've used Aggrid with some of the biggest banking and financial companies in the United States and I've seen these companies put millions of records into Aggrid and users are still able to get through that data lightning fast.

But it's not just about speed and performance. Aggrid also has a lot of features built into it that I think are essential when trying to build out those Excel-like features into our applications. Like I've already mentioned, it does filtering and sorting. It also does aggregation, grouping and pivoting. It can export results out into Excel or other formats. You can attach really nice charts to it to visualize the data you put into Aggrid. And best of all, it works really well with React. So if you want to bring it into your React project, it's one of the best grids for that reason.

Today we're going to be using slides from the LiveLab App website. LiveLab App is my consultancy. Me, along with Brian Love, another Google developer expert in web technologies, we offer training, workshops and consulting services through LiveLab App. So if you want to see more about LiveLab App, you're welcome to join or look through our content. But for the slides, you can use this link. For all of the slides today, what we'll be doing is kind of going through this workshop and all of these sections will have different challenges rendered through StackBlitz. So as we get to exercises, you'll open them up in StackBlitz. It'll bring in a full React development environment for us to perform those challenges in. So with that, let's get started with Aggrid.

So if you are trying to bring Aggrid into your own project, you start off by running npm install dash save aggrid react. And that's going to bring in the community set of modules needed to start using Aggrid in your project. Additionally, you need to bring a couple of CSS files along for the ride. So there should be the base CSS file. And then Aggrid actually comes with a number of different themes. There's a material theme, a quartz theme. There's a brand new Aggrid theme they just worked on and released this past year that brings in a dark mode. You can kind of peruse through all the different themes on the Aggrid documentation to see if one of the built-in ones is to your liking. And if you don't like any of the built-in ones, it's really well documented as to how you create your own theme. So again, Aggrid's flexible. It's meant to be embedded into your application and meant to look and feel like your application. And their theming capabilities certainly support that feature.

We're going to start off with how to actually get data into Aggrid from our React project. And every Aggrid implementation starts off by defining the columns that are going to be shown in your grid. Each column is defined using this call def object. It's short for column definition. By default, columns are going to be positioned in the order that matches the column definition specified. So we're going to create an array of column definitions, and we're going to supply them to Aggrid. And that order in that array is going to dictate what order they get displayed inside of the grid. To do that, we're going to create that array, and then we're going to bind it to the column defs prop on the Aggrid React component. We're going to be importing that Aggrid React component from the Aggrid React package. Additionally, as you might notice, we're also going to have to put a few theme classes on a wrapper element. So here I have a div with a class name of ag-theme-quartz-auto-dark. That means that we're going to apply that quartz theme. It's going to automatically transition between light and dark, but it's going to start at dark, kind of based on the system preferences.

Next we need to define those column definitions. My favorite way to do this is to first define an interface for the actual data we're going to be binding into our grid. So I hope most of you are familiar with TypeScript. If not, we're going to try and keep the TypeScript somewhat light here in this workshop. But for our TypeScript developers, in this case, our row data here is going to be a collection of colors. Those colors are going to have a name, and of course, the associated color. Then for our column definitions, I'm going to use the use date hook. Why is this? Well, in future challenges, we're going to want to be able to update the columns that we're showing in our grid. And so putting them in a use date hook is going to allow us to first supply that initial value to AGGridReact component. And then whenever we want to change or update these column definitions, we'll have that set column defs callback function that we can call to change those out. And for the type of this, I'm going to import the call def interface directly from AGGridReact. And it accepts a generic type parameter, which is the type of data that we're actually binding. So you can see here that I'm going to be passing in an array of column definitions based on this row data interface that I defined above. For each of these, we're going to supply at a minimum two values. We're going to tell AGGrid what the name of this column is, and then what field on our row data interface it should use to render the cells for that particular column.

So in its simplest form, what is a column definition doing? Well, it's telling AGGrid, here's what name we should use for the column header. And here's how to look up data inside of our row data to actually populate those cells. You might have noticed that I use the string for that field. And I'm excited to let you know that it does support nesting or deep references. So you can use dot notation if you're trying to traverse complex objects. You can also, as we'll see later on in the workshop, use other means of actually populating those cells besides just like a string based field. So if you want to use the callback function, for example, stick around. We're going to get there. We're just going to start off with the simplest form of column definitions first.

Broadly, there are going to be two different row models provided by AGGrid. There's a client-side row model and a server-side row model. For this workshop, because we're using the community edition of AGGrid, we're going to be limited to using the client-side row model. What the client-side row model means is that it's up to us as the developers or implementers of AGGrid to actually go and fetch all the data that we want to go render inside of our AGGrid. The other row model listed here, server-side row model, is an AGGrid enterprise feature. But it allows AGGrid to know how to go fetch data. And it's really best for performance because as we start applying things like filters, sorts, aggregates, groups, pivots, things of that nature, we don't want to go load in millions of records just to go populate an initial view for AGGrid. And so the server-side row model does is it's going to intelligently ask our back-end how to get just the set of rows that are visible on the screen. And as the user pivots and scrolls and filters and does everything that they want to do with their AGGrid, it's going to then go fetch just the data it needs making it a lot more performant. But as you'll see, the client-side row model is still blazing fast. I think it's really sufficient for a lot of projects.

The other row model listed here, server-side row model, is an AGGrid enterprise feature. But it allows AGGrid to know how to go fetch data. And it's really best for performance because as we start applying things like filters, sorts, aggregates, groups, pivots, things of that nature, we don't want to go load in millions of records just to go populate an initial view for AGGrid. And so the server-side row model does is it's going to intelligently ask our back-end how to get just the set of rows that are visible on the screen. And as the user pivots and scrolls and filters and does everything that they want to do with their AGGrid, it's going to then go fetch just the data it needs making it a lot more performant. But as you'll see, the client-side row model is still blazing fast. I think it's really sufficient for a lot of projects.

I can tell you as a consultant, there are a number of times that I've stepped into a project, been told, hey, we really want to use server-side row model because we've heard it's faster. But then you dig into it and you realize that the client-side row model was plenty fast to begin with and there was no need for them to take on that complexity. So I just want to throw that little asterisk in there. That way you understand that, yeah, there are two of them. One's free, one's paid for, but the free one's really, really good. So generally, we'll be using the client-side row model in this course. I'll try and touch on the server-side row model. There's also a few other ones. There is an infinite scroll row model that's included in the Community Edition. So that's worth checking out as well.

So let's take a look now at what it would be like to start binding in some data. I'm going to go ahead and open this up on StackBlitz. That way we can start playing with it. So inside of here, I have my column definitions that we saw before for name and color. And then I'm also going to use a useState hook to bind my row data into this component. That way, again, as my row data might change, I can update that row data and have a ggrid-react response to it. With this running now, we can take a look and see what a basic AG grid implementation looks like. So we have all of our names and colors here. I can scroll through the list. We can see that we're getting really fantastic performance. If you're curious, you can always open up those developer tools. You can jump over into the rendering tab and figure out exactly the frame rate here. So for example, if we wanted to see how fast is this really with all this data, we can turn on the frame rendering stats here and power through it and see exactly what our frame rate is. So it's really fast, really efficient, and it doesn't take a lot of code to get started with it. So again, what's happening here? Well, we have our column definitions that we have supplied previously. And now we've set up our row data, the actual list of products that we want to bind into AG grid-react. We've updated our ag-grid-react component so that we're now binding both the column definitions that we were supplying previously and the row data. We don't need to specify the row model. By default, it's going to use the client-side row model. And so it's using that client-side row model to take all of that data and render it out into our grid. So data is provided to the grid using that row data prop. The data is bound to a column based on that column definitions field. And then we'll see more ways that we can actually bind data or connect data to cells later on in this course. But for now, why don't you give it a try?

You're going to go down to the row data section, and there is a stack-blitz exercise. And let's take a look at it. So this exercise, you're going to be first asked to specify the column definitions for this component. Again, take a look at that row data interface. We're going to want to use the name and color as our two different columns. So keep that in mind. And then for step two, you're going to set up the row data. We've already imported the data from a JSON file here. And so you're going to use data.products as the data that you want to bind to it. Once you've set both of these up, then you can pass them in to the column depths and row data props on the AG Grid React component.

We'll be doing a lot of these exercises, so I'm going to try and keep them quick. For this first one, I'll give you just a couple of minutes, and then I'll go through it and implement the exercise alongside you. So I guess I will give a few minutes to give you some time to work on this exercise. Also, if you have any questions at any point, please feel free to turn on your camera and microphone and ask me directly if you feel comfortable doing that. If you just want to use the chat feature, I'm monitoring chat the entire time. So feel free to drop questions in chat and I'll respond to them. Hopefully that challenge wasn't too terribly hard. If you're still working on it, don't worry. I'm just going to go through the solution and do the challenge as well. So you can follow along and see how I'm going to go ahead and tackle this. So for the first step, we need to specify the column definitions and then bind those to the AG Grid React component. As we saw in the slides, I'm going to use the useState hook for this. That way, in the future, if I need to make these column definitions dynamic or the row data dynamic, I have that available to me by just using the setState callback function to update those column definitions or that row data.

So now that I've done that, I should get some help from my IDE in terms of what actually goes here, so I'm going to create an object here. We can see all the various things that we might supply to a column definition. If I haven't mentioned it yet already, AG Grid is full of features. There's a lot of capabilities here around how these cells get rendered, how users can interact with them, how they might be styled. And so it's a nice preview to see all the different options that we can use to configure these column definitions. But for now, I'm going to be supplying the header name. So let's use name for the name of this header. And then for the field, I'm going to supply name. And as you might have seen already, if I supply a name here that doesn't make sense, like this, this is clearly not a property on my row data. I will get a type error here. So I know it looks like a string, but there is some actual type safety here and it's going to parse the string out and make sure that there is a property on our interface that actually matches these.

But for now, I'm going to be supplying the header name. So let's use name for the name of this header. And then for the field, I'm going to supply name. And as you might have seen already, if I supply a name here that doesn't make sense, like this, this is clearly not a property on my row data. I will get a type error here. So I know it looks like a string, but there is some actual type safety here and it's going to parse the string out and make sure that there is a property on our interface that actually matches these.

So we have really good type safety around this API. We do the same thing for color next. And supply color as the name of the field. So this is all I have to do to create the simplest version of column definitions for a G-Grid.

Next, I want to set the row data. And again, for that, I'm going to do row data here and I'm going to use the state hook. And this I'm going to use data.products, so this is an array of products we can actually jump in to this JSON file and take a look at it. There's a couple of things I want to show you. So I'm going to jump into this JSON file and take a look at it. There's lots of data in here. There's some customers that we might play with later, that accounts we might play with, but we're going to focus on products right now. And we can see that we have both a name and a color on these products. So going back to my grid, now that I have my column definitions and my row data, I can go ahead and bind these to the A-G-Grid component. So I can say columnDefs equals columnDefs, rowData equals my rowData. With that out of the way, I can hit save on this, reload the application, and now my grid is showing all of the products that are in that JSON with their name in the first column and their color in the second column.

Now that we have some data being shown on our grid, let's make it a little more interactive. And the first way we're going to make it interactive is we're going to let our users sort the rows. So we can enable row sorting using the sortable property on a column definition. We're going to go to those column defs, set sortable to true. And if it is true, then we can suddenly sort by that column. By default, that value is false. We're not going to allow, or aggrid does not allow users to sort any column without actually explicitly saying, yes, I want my columns to be sortable.

We can specify the multi sort key table option to override this behavior. So if we don't want the shift key to be the one that actually does multi sort, we can control which key in particular would do that. That's not something that we're going to put in a column definition, so it's actually going to be a grid level configuration option. So on our AG Grid React component, we have that multi sort key to be the control key instead, and that would let us control that behavior. So if we kind of jump over here and we make this sortable as well. Now I can sort by color or name, and if I wanted to sort by both, I'm going to hold that shift down and I can control the sort in that way.

We can supply a comparator property. So this is going to be the same kind of callback function you would supply to array.sort. If you don't like the built-in way that aggrid sorts. So if you have your own custom sorting logic, it is possible to customize how aggrid is actually going to compare different rows inside of our grid for sorting. So let's take a look at an example.

This is the same sample we've had going so far, but we've made one change and we've made sortable be true on the name column. Let's go ahead over here and let's just go ahead and try that out. So I'm going to set sortable to be true and let's see what happens. So with it being sortable, now, if I click on the name column, you can see that we now have a sorting direction and it has sorted all of our products based on that name. It started in an unsorted state and now it's become ascending, now descending and back to the original state. So it kind of lets the users toggle between the two. Comes also with a nice animation built-in, which I think is pretty cool.

The default sorting order is none, ascending, descending, and none again. We can change this order or specify the options allowed by specifying the sorting order column for each of the different options. This lets us change the default behavior, so we can control how the user cycles through different sorts. We can also specify the multi sort key table option to override the default behavior. If we don't want the shift key to be the one that actually does multi sort, we can specify a different key to control that behavior.

Let me actually go ahead and break this out into a couple of different lines, clean this up. So let's say that for our first order, we're going to pick one of our products, let's say that for our sort order, we wanted to do descending first and then ascending second. Now, if I rerun project, the first one, click on it, we're going to be in descending mode and then switch back to ascending on that second click. So that sorting order property lets you control sort of the cycles or what it's going to cycle through as the user interacts with this column header.

One of the cool things about AG Grid is that users can sort multiple columns by holding the shift key and clicking on the column headers. We can specify the multi sort key table option to override this behavior. So if we don't want the shift key to be the one that actually does multi sort, we can control which key in particular would do that. That's not something that we're going to put in a column definition, so it's actually going to be a grid level configuration option. So on our AG Grid React component, we have that multi sort key to be the control key instead, and that would let us control that behavior. Now I can sort by color or name, and if I wanted to sort by both, I'm going to hold that shift down and I can control the sort in that way. And so now we're sorting by both of them. And if I wanted to change that sort key again, we could use this multi sort key prop on our AG Grid React component.

And so now we're sorting by both of them. And if I wanted to change that sort key again, we could use this multi sort key prop on our AG Grid React component. So this one's a little hard to demo, so you can't see which key I'm actually pressing, but if I set this to control now, instead of using the shift key, I have to hit control to be able to sort through sort through these. So that is how that works.

Now I'm going to give it to you to take another try at it. So, again, if you've just joined us, we are going through the slides on the Level Up app website. Here's a link to the specific slide we're currently working on and there is a challenge you can open up in StackBlitz. So what do you have to do for this challenge? Well, for this challenge, we're going to ask you to add the sortable property to any of the column definitions. So we're going to open up a StackBlitz column definition. Add the sortable property to any of the column definitions, then override the default sorting order by specifying the sorting order property on that column definition that you chose. And then optionally override the default multi-column sorting key by specifying that multi-sort key prop on the AG Grid React component. So give you just a couple of minutes to familiarize yourself with how to enable sorting on these column definitions. Let's take a look at this challenge and see how we can go about solving it.

Default column definition, that is next, perfect. One of the things you're going to find out right away when you start integrating Agigrid into your project is that a lot of your columns, despite showing different data, are going to need a lot of the same behaviors for how we want to let users interact with them. And sorting is a great example of that. Agigrid lets us specify the defaults for all of our columns by providing it what's called a default column definition. This is going to let us avoid some unnecessary repetition, so we don't need to actually set sortable to be true for all of our columns that we want to make sortable. Additionally, these are just defaults, so every column definition can then go ahead and override the default values that we're supplying in these column definitions. So you can set sortable to be true for all of our columns, and then we can still set it to be false on an individual column definition to override that default value. Let's take a look at an example, this one is going to make all columns sortable by default. So we supply what's called this default column def, and I'm just going to assign it to a const here at the top. It's still going to implement this call def interface. And then once we have our default call def, we bind it to our Agigrid React component by supplying it to the default call def prop on that component. So if we go into here, I'm just going to create a quick default call def here. And let's go ahead and set sortable to be false by default. And then I'm going to supply this default call def in as a prop to the Agigrid React component. So now this works the way that I had anticipated it working from the beginning, where none of these columns are sortable right now because our default value is that these should not be sortable. And then I can go to the name one and set sortable to be true for this individual column. So now color can't be sorted but I can sort by name. So that default column def is letting us supply some of these default options.

This is going to let me control or cycle through now descending, ascending, and no sorting applied. That's how you control the sorting order. As I mentioned, there's a question, is it possible to display a sorting icon if sorting is enabled for a column? Yes, there is a way there's a way to actually control the way that these entire headers are rendered. So you can do a lot more than just show a custom icon. You could replace the entire header with your own React component that can render however you want to. We're not going to quite get it out in this workshop, a little more of an advanced topic. But I do want to just go ahead and say yes, that is totally possible.

As we mentioned, there's also multi sorting so I can sort by name and color by holding down the shift key. We could change that sort key down here. Or if we don't actually want to have multi-sort, this is another question that we were asked during the break. I can apply suppress multi-sort on this grid and set this to be true. So now that we've suppressed multi-sort. I will no longer be able to hold down that shift key and sort multiple columns at a time. So just a second to load in. So now holding the shift key doesn't actually put me in multi-sort mode. I can only sort by one column. So lots of configuring control with sorting. Another feature here that we mentioned that I do want to call out again is you can supply a comparator function. So if you wanted to control the way that the header is rendered, you can do that. If you wanted to control the exact way that Agigrid is comparing different items, you have that available to you through this comparator.

All right, let's keep going. Default column definition, that is next, perfect.

One of the things you're going to find out right away when you start integrating Agigrid into your project is that a lot of your columns, despite showing different data, are going to need a lot of the same behaviors for how we want to let users interact with them. And sorting is a great example of that. Agigrid lets us specify the defaults for all of our columns by providing it what's called a default column definition. This is going to let us avoid some unnecessary repetition, so we don't need to actually set sortable to be true for all of our columns that we want to make sortable. Additionally, these are just defaults, so every column definition can then go ahead and override the default values that we're supplying in these column definitions. So you can set sortable to be true for all of our columns, and then we can still set it to be false on an individual column definition to override that default value. Let's take a look at an example, this one is going to make all columns sortable by default. So we supply what's called this default column def, and I'm just going to assign it to a const here at the top. It's still going to implement this call def interface. And then once we have our default call def, we bind it to our Agigrid React component by supplying it to the default call def prop on that component.

We've done sorting. Now let's take a look at filtering. Agigrid lets us filter using our columns out of the box, and it ships with several provided filters. So in the Community Edition, for free, you can sort using text, numbers, or dates, and then in the Enterprise Edition, there is a set-based filter as well. By default, it's going to use the text filter, which is the one we can type in and it's going to compare what we've typed in to all of the values in the rows below and only shows the ones that contain the text inside of that text filter. To enable filtering, we're going to set the filter column definition property to be true. So for any column where we want filtering to be enabled, all we do is we set filter to be true for that particular column. Let's take a look at the text filter. Let me go into here, and on this Name one, I'm going to set filterable or filter to be true. So now that I've set filter to be true, I'm going to re-run the app here, and there's a new box that's appeared next to Name. I open this up, you can see that I've been given a filter control. So this text filter already supports some logic. I can filter based on things that contain the type that I text. So if I only want to see things that contain frozen, I can type in frozen and we have all the products that are frozen or has it. And let's just do combinations on our filters. So I could say, well, I want everything that contains frozen, everything that's a fish. And now I have that capability where it's supplying through. I can choose how it's combining these filters too. So I can choose between and or for that logic. So now I'm seeing all the products that either have frozen in the name or have fish in the name. And there are other types of controls that I can have. So if I don't want to see any of the fish, so now I have all the products that have frozen in the name, but don't contain fish in it. And you can see all the available options here, this contains, does not contain, equals, does not equal, begins with, ends with, blank and non-blank. So lots of capabilities right out of the box of that text filter that you don't have to build that come with AG Grid by default. And again, the only other thing that I needed to do to enable this was I set filter to be true on that name call up definition. If we want to, instead of just setting true, we can actually provide the name of the explicit filter we want to use. So as I mentioned, it comes with a couple out of the box for dates, numbers, and text. I can supply the specific name of the filter that I want to use in here.

Either way works for me. I'm looking at both.

We've done sorting. Now let's take a look at filtering. Agigrid lets us filter using our columns out of the box, and it ships with several provided filters. So in the Community Edition, for free, you can sort using text, numbers, or dates, and then in the Enterprise Edition, there is a set-based filter as well. By default, it's going to use the text filter, which is the one we can type in and it's going to compare what we've typed in to all of the values in the rows below and only shows the ones that contain the text inside of that text filter. To enable filtering, we're going to set the filter column definition property to be true. So for any column where we want filtering to be enabled, all we do is we set filter to be true for that particular column. So let's take a look at the text filter. Let me go into here, and on this Name one, I'm going to set filterable or filter to be true. So now that I've set filter to be true, I'm going to re-run the app here, and there's a new box that's appeared next to Name. I open this up, you can see that I've been given a filter control. So this text filter already supports some logic. I can filter based on things that contain the type that I text. So if I only want to see things that contain frozen, I can type in frozen and we have all the products that are frozen or has it. And let's just do combinations on our filters. So I could say, well, I want everything that contains frozen, everything that's a fish. And now I have that capability where it's supplying through. I can choose how it's combining these filters too. So I can choose between and or for that logic. So now I'm seeing all the products that either have frozen in the name or have fish in the name. And there are other types of controls that I can have. So if I don't want to see any of the fish, so now I have all the products that have frozen in the name, but don't contain fish in it. And you can see all the available options here, this contains, does not contain, equals, does not equal, begins with, ends with, blank and non-blank. So lots of capabilities right out of the box of that text filter that you don't have to build that come with AG Grid by default. And again, the only other thing that I needed to do to enable this was I set filter to be true on that name call up definition. If we want to, instead of just setting true, we can actually provide the name of the explicit filter we want to use. So as I mentioned, it comes with a couple out of the box for dates, numbers, and text. I can supply the specific name of the filter that I want to use in here.

If we wanted to, we could play with the number filter, and for that we're going to need to at least show some numbers inside of our grid. So I'm going to jump over to our example, and if I look at our data here and kind of jump down to products, there is a price column here, and so what I'm going to do is I'm going to go ahead and show that. So first I'm going to add price to my row data here, and then I'm going to create a column for it. Let's make sure that's working first. So we can see all of our prices are available here, and of course we could sort by them, but what we want to do is actually want to connect this AG number column filter to it. So I'm going to go back to the example, and I'm going to set sortable to be the name of this specific filter. Oh sorry, I need to make this be called filter. So now if I go over to the price column and kind of open this up, I can filter this based on numbers, and these are going to be different set of comparators. So instead of contains, does not contain, I've got equals, does not equal, greater than, less than, so on and so forth. So I can look for anything that is greater than 10, and that's going to control that in that way. So now I've only got prices for products that are above $10. If we sort in reverse, you can kind of see that applying there, or I could say is less than 10, and now we're seeing only the products that were less than or equal to 10. For the date filter, we can go back into our products here, and we can take a look at the date of the order. So let's kind of jump into our data for a second and make sure that we've actually got a date, and we don't. We're going to have to use a different set of data here for this. So I'll tweak it to an example that has some of the date data available to us for orders, and we'll take a look at how we can use that date filter. So let's give it to you to play with filtering here. We're going to open up this exercise on stacklets, and this one is going to have a richer set of data for us to play with. We're going to see that in this grid, we're looking at a set of customers, the account that is associated with that customer, and then any of the order items that are in the orders that we're looking at along with a total value. So this is a little more of a complex grid, but in these column definitions, you'll be able to apply some different filters to it. So for example, you can use a text filter for name or the number filter for account number or the date filter for the date of order. Once you've applied different filters to each of these, you're all done with the exercise. I'll give you a couple of minutes to work on this one, and let me go ahead and drop a link as well. So if you've just joined us, here's the link. You can find the stacklets at the bottom of that page. So I'm going to go ahead and open up the stacklets example, and what we want to do is we want to add filtering controls to all four of these column definitions. Now, it's like someone ran into a problem where they weren't seeing the data at first, and they suggested setting a width and a height on the AG grid or actually on the wrapper component around AG grid react. So if you weren't seeing the data, you might want to add a width and height to this div, and that should get it fixed up for you. Now, for this, what I'm going to do is for the customer name, I want to use that text-based filter. And so I'm going to actually set filter to be true because the text-based filter is the default filter. All I have to do is set this to be true, and now I hit save on this, rerun this app. Customer name, now let's be filter it based on name. So I can look for Mitchell, for example, and I'll find that specific customer. On account number, the exercise recommended using the number column filter. So we can't just set filter to be true. Again, that's going to use the text-based filter. To use the number filter, we're actually going to have to specify it. So I'm going to put here a string, ag number column filter, and that's going to let me filter this column using number-based controls.

To use the number filter, we're actually going to have to specify it. So I'm going to put here a string, ag number column filter, and that's going to let me filter this column using number-based controls. So for example, I'm just going to copy one of these real quick. And then I can kind of come in here, and I've got all these number-based filters. So I can type in an account number, and it should pop that one up, if I typed it in correctly. So that gives you that number-based control.

Let's do the date one next. So for the date order, again, can't just set filter to be true. That's going to be a text-based order. What I want to do is I want to give my users the ability to sort based on dates. So I'm going to put in ag date column filter. We weren't able to play around with this one earlier because our previous data set didn't have dates, but now this one does. And so if I open this one up, you can see that it is going to let us actually input an actual date and do an equality check on this column for it. So I could do 06-06-2019 here, and we'll find all the orders that were placed on that specific date. You might notice that now that I have a filter applied, it's kind of put this little icon here, letting your users know that a filter has been applied to this particular column. And again, there is a way to actually replace the way these entire column headers are rendered. So if you want to do something custom, that is available to you. For now, I'm just going to clear this out. And then finally for total, we're going to do the same thing that we did for that account number, and we're going to use a number based filter for it. So I'm going to do ag number column filter. And now in this total one, I can say, well, give me all the orders that were greater than a thousand dollars. And it'll filter out any orders that were not above that value. Just as we did before, if you wanted them to be filterable, filtered by default, you could put that filter true value inside your default column definition. That will make that so that all your column definitions are inherently filterable using that text-based control. And then there are ways to suppress multi-filter and things of that nature on the props for the actual grid itself. You might be wondering, well, for the date filtering, like, is there more that I can do here to control it? Like what if I wanted to filter based on timestamps instead of just actual fixed dates? And that's a great object or a great question. The date filter kind of works as is when using row data that has JavaScript date objects. But if that date is provided using another method, like let's say your data came back and all of your data, instead of having date objects, had ISO-formatted strings, then we'd need to use a comparer function to let AGRid know how to actually parse and compare dates inside of that. So that might look something like this where we set that ag date column filter to be the type of filter we want to use for the column. And then we're going to supply a new parameter that we've not seen yet called filter params. And inside of filter params, we can specify the comparator. So here, as the users type in the dates, we can actually instantiate a new data object, do any manipulation we want to to that data object, and then return whether or not it should be included in that filter.

OK. Let's jump next to cell rendering. So far, the way cells are being rendered inside of AGRid is we are telling AGGrid which field to pull values from from our row data. That's the simplest, and without any customization, it works great.

But there's a full cell rendering pipeline that AGGrid exposes to us through column definitions. And this pipeline is customizable. So the order of this pipeline is, first, it's going to run a value getter function. How do I actually get my value out of the data that's being provided to me? The second step in that pipeline is how I format that value. How do I take whatever its raw representation is in JavaScript, and then turn it into something that's going to be nice and visible for my user, or readable.

And then the final step in this rendering pipeline is a custom cell renderer function. The cell renderer function is the most powerful step in this entire pipeline, because we actually put an entire React component as the cell renderer.

And then the final step in this rendering pipeline is a custom cell renderer function. The cell renderer function is the most powerful step in this entire pipeline, because we actually put an entire React component as the cell renderer. So if we wanted to do something deep and customized for each individual cell, we could use React components to render that out inside of AGGrid.

So for each of those steps, we're going to kind of go through and play with some examples around it. And the first step in that pipeline is that value getter function. So we can use a value getter function to get the row data for columns where the use of the field property is either insufficient or not an option to us.

An example where it's not an option might be like, let's say we had a first name and a last name property on our data, but we don't want to show a first name column and a last name column. We just want to show a name column. So the value getter function might actually take a look at our data and concatenate those two strings together. We couldn't have done, or we couldn't have used the field property to do that kind of string manipulation, and so we're going to supply that value getter function instead.

We can also use the value getter function to mutate data prior providing it to the data grid. So as I mentioned in that date example previously, maybe we have ISO formatted strings in our data, but we want to turn those into JavaScript date objects first. We could use a value getter function to actually transform it from that string into a date object.

It's important to note that this entire cell rendering pipeline is going to execute for every cell that we're showing inside of our grid. And I want to highlight this because this is one of these ways in which you can take something that's really, really fast, a G grid, and make it really, really slow by introducing a lot of complexity into this cell rendering pipeline. Broadly speaking, whether it's a value getter, a value formatter, and most importantly a cell renderer, we want to make sure that whatever work we're doing here, we're doing it really quickly and efficiently. That way we're not slowing down how quick a G grid can render out our data.

The value getter function is a callback function. We're going to specify a callback function inside of our column definition, and it's going to send us or supply us with a value getter params object based on the row data that we are binding to our grid.

So now we know what we're going to get passed into our value getter, let's take a look at how we might actually write one out. So here I have a column for price, and I've written a value getter function. Note that there's no field this time, because I'm going to tell AGGrid how I'm actually getting the data back out.

One of the things we always have to guard against is on the params we're supplied, it gives us the row data that we want to look at. And because AGGrid has this expectation that data might be coming in asynchronously, we have to handle the fact that params.data might not be defined when this function actually gets called. So for all of our value getters, value formatters, and cell renderers, we're always going to want to start off by checking to see, hey, is params.data defined yet? If not, let's go ahead and return a sane and sensible default value. And then if it is defined, let's go ahead and apply whatever value getter we want to. So this example, the value getter is going to take the data, it's going to check if it's undefined, and if it is it's going to return zero for the price. And if it's not defined, or if it is defined, and we actually have data available to us, then we use math.round on that price so that way the values we're pumping into AGGrid have already been, you know, rounded down to the nearest dollar.

Finally, it's gonna give us the actual data that we're trying to render and how to get that value back out along with the node that we're rendering into.

So there's a question here, is there a unique format that formatter aligns to for dates or do you convert minority values in a minority agreed format based on the data? Okay, so that question, let me think about that for a second. Is there a unique format that the formatter aligns to? There's, so the formatter, there's not a value formatter by default. You have to supply your value formatter, and so there's no default in AJAGER that you have to contend with. If you're writing your own value formatter, it's up to you to figure out how you're going to handle minority values or whether or not you want to apply some broad formatting strategy here based on your individual data.

So AJAGER comes with no opinions. You kind of have to implement whatever formatting logic makes sense based on the data that you're providing to it. Good question.

Okay, so breaking this down, I've already done this, so it's kind of highlighting it again. We're getting the grid API and the column API. We're getting the current column definition and the column, the actual column instance we're rendering into. We're getting all the grid options that have been supplied in and then the actual data that we're trying to get at.

So thinking about these a little bit more, what is the grid API? Well, it's a programmatic interface for interacting with AGGrid. We can do it to add event listeners to the grid, or we can do it if we're trying to interact with the clipboard, or if we want to apply some broad sorting strategy or filtering strategy, the grid API is the right case for that. The column API is for interacting with a specific column. So if we wanted to programmatically move, pin, resize, or whatever we want to do to a specific column, we could use the column API for that. And then we've already mentioned that a row node is kind of what we're rendering into. Well, that's what it is. A row node represents a single row in the grid and it exposes a row selection API, which might be useful if we wanted to update all the data in that row or if we wanted to add individual event listeners to just that particular row.

So now we know what we're going to get passed into our value getter, let's take a look at how we might actually write one out. So here I have a column for price, and I've written a value getter function. Note that there's no field this time, because I'm going to tell AGGrid how I'm actually getting the data back out. One of the things we always have to guard against is on the params we're supplied, it gives us the row data that we want to look at. And because AGGrid has this expectation that data might be coming in asynchronously, we have to handle the fact that params.data might not be defined when this function actually gets called. So for all of our value getters, value formatters, and cell renderers, we're always going to want to start off by checking to see, hey, is params.data defined yet? If not, let's go ahead and return a sane and sensible default value. And then if it is defined, let's go ahead and apply whatever value getter we want to. So this example, the value getter is going to take the data, it's going to check if it's undefined, and if it is it's going to return zero for the price. And if it's not defined, or if it is defined, and we actually have data available to us, then we use math.round on that price so that way the values we're pumping into AGGrid have already been, you know, rounded down to the nearest dollar.

So let's give it to you to try. You're going to open this exercise on stack splits, and this one's a little bit more complex than some of the ones we've done before. And what you're going to do is you're going to write a value getter for the total. Like I said, this is a little bit more complicated because there's not a total property on the data that we're binding here. In fact, if we kind of go into the data that we're interacting with here, we can see that we have a list of order items. There's a quantity for each of them, and so what you're going to want to do here is you're going to actually want to kind of sum up or calculate what this is going to cost. So if I go into the data here and we kind of jump down into these customers, you can kind of get in here and kind of start taking a look at the data. There's a few more hints on this one that I want you to think about. So first, take a look at that row data interface. Like really get an understanding of what the data model is. An order is associated with the order items, which associates each item with a product. The product is the object that actually gets the order item. So you can actually it's the object that actually contains the price. And so there's lots of ways you can do it. These slides recommend using array.reduce. I think it's a fairly complicated or heavy way to solve this. You could also use a for loop, whichever way makes the most sense, to take a look at all those items that are in an order. Then you're going to take each product inside of that order, get that price out, and then sum it all up based on that quantity. Since this one is more complicated, I'm going to give you a handful of minutes to work on this, and then I'll go through the solution that you can follow along with. I'm going to go ahead and go through the solution. If you've not solved it yet, don't worry. I know this one's a little bit more complicated since you're kind of having to interact with data that you're not entirely familiar with. But if you follow along, hopefully this will make some sense as to what's going on.

So I'm going to go ahead and open this up inside of StackBlitz. What I want to do is I want to write a value getter for my total column here. So I'm going to first add my value getter. This is going to be a callback function that takes those value getter params. The first thing I want to check to see, you know, do I have any data here? If not, I'm just going to return null. You can return whatever value you wanted to. I think zero might be the same value as a default total. Whatever you want to do, you kind of have that available. Next thing I want to do is I want to take a look at those order items. So that's going to be by the parameters that data.orderItems. I'm going to do this with a for loop and then I'll refactor it and show it with array.reduce like the exercise suggested second. So let my total equal zero, and then for item of order items. What I want to do is I want to actually find the product from my list of products. So products and equal and again we kind of go to products is coming from my data. So if we kind of go back into the product here, go to the data, you might remember this from the earlier examples. We have all these products here. What I want to do is I want to go find the product associated with an order item based on this id. So I'm going to say, okay, my product is going to come from data.products. Find me a product whose id equals my order items product id. If I didn't find a product, we're just going to continue on to this array or through this list, keep iterating on, and if I did have a product then I want total to be increased by the products. Or actually we're going to do the products term. Rice, I want to say it was, times the items quantity. And then we return the total back out. So now that I've written out this value getter, if I come over to my grid, we can see that for all these orders, I now have a total value here that is being computed with this little bit of logic that I have supplied. Just kind of break it down again one more time. This value getter function is being called with the value getter params. There's a lot of different properties on it, but for this one we only care about the actual data for the row we're trying to render.

If we don't have the data yet, we're just going to return zero as that default value. And then once we do have data, we're going to iterate over all of the items, in this rows list of order items. And for each of them, for each order item, we're going to look up the product with the same ID as the product ID on that order item. If we didn't find a product, we're just going to continue iterating, and if we did we're going to cast the product's price to a number and then we're going to multiply it by the quantity inside of this order, adding it to the overall total. As mentioned, I'll show you the solution with the reduce method so if you want to do this for the RadarReduce that's in the slides, you're welcome to take a look. It's doing the same thing where we're going to filter out, make sure we actually have items that have an order ID on them. We're going to find the product that matches it and then we're going to reduce that down into a total.

Just like the value getter had the value getter params, a value formatter has the value formatter params. And the value formatter params are going to actually accept two different generic type parameters. The first is that data param. This is the interface for our row data that we've already been exposed to. But then the second one is going to be the value. So because there's that value getter thing that happens first, this second type parameter is going to be whatever the type is of that thing that our value getter has returned to us. Before we dive into using the value formatter, let's just take a look at this interface and see what's available to us here. So we can see that there's a number of properties again on this value formatter. Let's kind of break these down. The main difference here is that we already have our data is still here. It could be TData or undefined, but we have the value directly provided to us. So we don't have to worry about how to get that value because the value getter pipeline has already run. Otherwise, it's very similar to the value getter. We have the grid API, the column API, the column definitions, the actual columns, and the row node that we're rendering into.

The idea here is that we're going to write a value formatter using or for this total column, and my recommendation was to use the internationalization API to do this. The internationalization API lets you, as it might sound, internationalize the total number and render it based on the locale you provide it. So to write a value formatter, first I'm going to specify value formatter here, and that's going to give me the params for this particular value formatter. Just like with the value getter, I do need to check, you know, do I have a value right now? And if I don't have a value, then we just need to return something sensible or null or undefined, or whatever our default value should be in this particular situation. From there, I'm going to create a formatter using the number format class, and I'm going to specify in us here as my particular locale. You could put whatever locale you wanted to in here, and then the maximum fraction digits of two and the minimum fraction digits of two. This is a price, so I want to show a sentence here. And then, finally, I'm going to return formatter dot format params dot value. And I have broken this up pretty badly. Let's see. What did I do to break this here? So, oh, I need to cast it to a number. I forgot to do that part. Okay. Sorry about that. So, again, created a formatter here using the number format class.

Let's kind of break these down. The main difference here is that we already have our data is still here. It could be TData or undefined, but we have the value directly provided to us. So we don't have to worry about how to get that value because the value getter pipeline has already run. Otherwise, it's very similar to the value getter. We have the grid API, the column API, the column definitions, the actual columns, and the row node that we're rendering into.

As mentioned, the idea here is that we're going to write a value formatter using or for this total column, and my recommendation was to use the internationalization API to do this. The internationalization API lets you, as it might sound, internationalize the total number and render it based on the locale you provide it. So to write a value formatter, first I'm going to specify value formatter here, and that's going to give me the params for this particular value formatter. Just like with the value getter, I do need to check, you know, do I have a value right now? And if I don't have a value, then we just need to return something sensible or null or undefined, or whatever our default value should be in this particular situation. From there, I'm going to create a formatter using the number format class, and I'm going to specify in us here as my particular locale. You could put whatever locale you wanted to in here, and then the maximum fraction digits of two and the minimum fraction digits of two. This is a price, so I want to show a sentence here. And then, finally, I'm going to return formatter dot format params dot value. And I have broken this up pretty badly. Let's see. What did I do to break this here? So, oh, I need to cast it to a number. I forgot to do that part. Okay. Sorry about that. So, again, created a formatter here using the number format class.

The cell renderer function allows us to actually render each individual cell using a React component. This is going to be the last step in this cell rendering pipeline. After we've determined what the value is for the cell, after we've formatted it with whatever formatting we wanted to do, we then render it out using a cell renderer. The cell renderer for column definition accepts the following values. If it's undefined, if we don't supply a cell renderer, it's just going to render the cell's formatted value as the text content of the cell. We can register cell renderers in like a global context. So, we can give them names and share them across multiple AgGrid instances or column definitions. And so, cell renderer could point to a string that references one of those registered cell renderers or it can be a React component. We're going to be focusing on that third one here where we pass a React component in as a cell renderer.

I forgot to do that part. Okay. Sorry about that. So, again, created a formatter here using the number format class. I've specified in us as the locale that I want to format into. I've specified my minimum and maximum digits as two for each of these because I want to show dollar values here. If there are cents, I kind of want to have them displayed. And then, I'm checking to see if the value is undefined, then we're going to format zero. I think the bug here was that I was just doing if params dot value, which is basically if the value exists. Yep, I think Ruby got that right. I had this broken on this line here. But if we don't have a value, we'll return format zero. And if we do have a value, we're going to go ahead and format that number.

Are there any questions about the value formatter or the cell rendering pipeline up until this point before we get into cell renders? Then let's get into cell renders. I have to give you an upfront warning here that every time I've worked with a client on AgGrid they're running into performance problems because they've misused the cell renderer parameter. So, this is a very powerful piece of the API, but it's also a particularly dangerous one if you put some unoptimized React components here because the cell renderer function allows us to actually render each individual cell using a React component. So, this is going to be the last step in this cell rendering pipeline. After we've determined what the value is for the cell, after we've formatted it with whatever formatting we wanted to do, we then render it out using a cell renderer. I really want to stress that we should only use these when it's absolutely necessary. So, what we can do here is we can pass in an instance or a reference to a React component and it will use that component to actually render out the value after it's been formatted. This is really handy if we want to show like additional elements or icons or add some interactivity to our cells because we can put event listeners on them. This is kind of where we can start to do a lot of the customization work for how values might be displayed or interacted with.

The cell renderer for column definition accepts the following values. If it's undefined, if we don't supply a cell renderer, it's just going to render the cell's formatted value as the text content of the cell. We can register cell renderers in like a global context. So, we can give them names and share them across multiple aggrid instances or column definitions. And so, cell renderer could point to a string that references one of those registered cell renderers or it can be a React component. We're going to be focusing on that third one here where we pass a React component in as a cell renderer.

So, like I did before, I want to highlight that there are cell renderer params here. They're going to be almost identical to the value formatted params. It's just that the value now at this point is going to be actually formatted. So, let's take a look at what one of these might look like. This one should look familiar because what we're doing here is we're just taking that cell formatter we had before and actually breaking it out into a cell renderer. So, let's start with that. So, I'm going to change this to cell renderer. And again, this can now be a React component. And in fact, it's actually kind of working like React component or is being treated like React component up until this point. And with changing that value formatter to cell renderer, everything is working as expected. Because cell renderer happens last, we could actually use it to do some of the formatting. But what I want to do is I want to return sort of a little bit more HTML here to format the way that I want to display this. So, I'm going to say first I'm going to kind of change the way this is returning here. I'm going to say my formatted value is RAMSValue equals undefined. And if it does, we'll return the formatter format on a zero. Otherwise, we'll do formatter format number RAMSValue. And then inside of here, what I'm going to do is I'm going to return some JSX. I'm going to use a fragment here. And then I'm going to do a span. I'm going to put some styling on it to set the opacity to 0.54. And inside of the span, I'll put the USD currency symbol here. And then next to that, I'll put in the formatted value. Go back to my app and rerun it. And we can now see that the total column here is using our cell renderer. Because of the cell renderer, we were able to actually put some stylized HTML in here. We applied some formatting to it. Put that dollar sign in. Adjusted its opacity. Whatever we want to. This is a full React component, so we have the ability to do hooks. We can use other React components inside of it. Whatever we want to, we have the ability to do with that cell renderer. I'm going to give it to you to take a stab at. Here's a new exercise. Let me drop a link to it in the chat. In this exercise, you're going to use a cell renderer to change the way that we render the date of order column. First you're going to check to see if there's a value defined, and if not, then you return some JSX that includes a material icon next to that formatted date string. If you need the bit of HTML that renders the event icon, we've supplied it here to you. Give you just a couple of minutes to do this one. I don't think this one will take too much time. Then we will move on to the next part of AG Grid. For this one, we're going to be working on the date of order column. What I want to do is I just want to show a nice icon that lets the user know this is a date. I'm going to format the date as well as part of my cell renderer. I'm going to start off by specifying my cell renderer here, and I'm going to receive my grams. If I don't have a value, do this right this time, we're actually going to be even more explicit about it. If my value is undefined, I'm just going to return null for this. Next thing I want to do is I'm going to create a means of formatting this. I'm going to reach out for the internationalization API this time or again, but this time I'm going to new up an instance of the date time format class. Again, I'm going to specify NUS for my locale. Feel free to use whichever locale makes sense for you. Using this formatter, I'm then going to create my formatted value by calling formatter.format on params.value. Now I should have a nicely formatted date time string here. I'm going to return this back out. Again, since this is a cell renderer, this actually works just like a React component here, and so I can return JSX back at this spot. I'm going to return a div, and I'm going to apply some styling on it. I'm going to set the display mode to be flex for this. I don't have everything be centered up within this particular cell. I'm then going to render out an icon for this using material icons, and I'm going to use the event icon here for this one. Then finally, I'm going to spit out my formatted value. If we go back to the app, we go to the date of order, now you can see that we're formatting the date of order using the internationalization API and we're showing an icon beside that date. We were able to do that because this cell renderer accepts a React component, and this React component is able to render out more HTML than just the actual formatted value. One more warning. This is, again, the place where AgGrid gets slow. If you put unoptimized React components in here or React components that are doing a heavy amount of work, you need to think about the fact that AgGrid is actually rendering this component for every single cell in this particular column. We've just rendered it, let's say, 15 times. The tiny rows are on my screen. If this were an expensive to create React component, that would be a lot of upfront rendering time that we're spending on these cell renderers. The worst thing you can do is just have a bunch of cell renderers for this entire grid that are doing a lot of inefficient work and really slows down the overall performance of your data grid. So, please be careful as you start implementing cell renderers.

Are there any strategies done by AgGrid to optimize that? Yes. So, as part of this pipeline, we have that value getter piece of it, then the value formatter, and then the cell renderer. It's only going to call the cell renderer if all the steps before it have given a different value. In other words, it's going to be really efficient in only calling that cell renderer when AgGrid absolutely knows that a new value has been produced and needs to be re-rendered using that cell renderer. From there it's up to you on optimizing the React component. You can use the memo function around it to be really explicit about memoizing the function and then of course your internal optimization tricks still work here too, in terms of using the use state, use memo hooks, not creating new callback functions. Every render by using the use callback is kind of following those React best practices for keeping it nice and fast.

Does AgGrid use any dynamic rendering on that table? I'm not exactly sure what you mean by dynamic rendering, but I can take a guess that you might mean something like virtualization. And so one of the things that AgGrid does that's really smart is all the rows that are not actually in the viewport right now, it's not rendered those. So it is fully virtualized, it's only going to call that cell renderer as you scroll. In fact you can put a little console log in your cell renderer and you kind of scroll down and you'll see the console logs light up as you scroll through the table. So it will only render out the ones that are visible on screen.

Okay, final little chapter we're going to get into for AgGrid before we move on to AgCharts, and that is cell editing. In my experience, AgGrid is often looked for by financial companies or banks, because it lets you build an Excel-like experience. So far we've only been using AgGrid to actually show values, but if you want to build an Excel-like experience you can use AgGrid. So far we've only been using AgGrid to actually show values, but like an Excel table you can also let your users edit values directly inside of this grid.

To enable this, we're going to go to the column definition for whichever column we want to make editable and set that editable property to be true. If it's false, the user can't edit, and if it's true, they can edit. We can also set it to be a function to determine if editing is enabled, if we want to do some like custom lookup, or if we want to you know see if we're in some kind of state that might make that row read-only or whatever. So to enable cell editing, we're going to go into whatever column definition we want to make editable and set editable to be true for that particular column. We also do it via the Grid API, so we could say, you know, for a particular row or a column key, we can start editing the cell, and then if we want to programmatically stop editing we have that ability to do that using that Grid API object that we've been provided in some of these callbacks.

aggrid provides some built-in cell editors so that way you don't have to go build editors yourself. So if this set of editors works for you, that's really great. Of course we'll look at how to write or there is some content provided on how to write your own cell editor as well. Out of the box, aggrid provides the following. It provides a text editor for like short text fields, provides a large text editor for you know multi-line editing, there's a date editor and a select editor if you want to provide or constrain the user to a set of options. There's a more feature-rich select editor that is included in Enterprise. I just want to call that out, but there are a few more Enterprise-only editors in case you don't want to go build it yourself and you're okay paying a little bit of money for that.

By default, aggrid is going to pick the text cell editor. That should feel familiar because it was picking the text filter as the default filter. Again it just kind of assumes that we're showing text first. You can use a cell editor column definition property to specify a specific built-in cell editor or to provide a custom cell editor if you want to provide a react component that would handle the editing experience. You can do that using that cell editor column definition property. For example, if we wanted to use the large text cell editor, then we would set editable to be true on the column definition and then for the cell editor, we're going to supply aglargtext cell editor as a string as the cell editor we want to use here.

Here's the code we would use for the select cell editor. We would just pass that one on in. It's going to use all the values that it sees as the particular options and of course you could provide the options as well using cell editor programs. So with that I'm just going to give you an opportunity to get yourself acclimated with these and kind of play around with them. Give you just a minute to do this one but you're going to open up this exercise on stack blitz and drop the link back in the chat. You're going to enable cell editing for the customer name column. You're just going to set editable to be true and now you should be able to edit that customer name column as a text field and then set editable to be true for the account number column but set the cell editor to be the aglargtextcelleditor. That way you can see and play with the difference between the small and the large text editor. Again, I don't think this would take more than a minute so I'll give you two to kind of get through this one and then I'll go to the solution myself. I'm going to open up the stack blitz here and what I want to do is for the customer name column I want to make this editable so I'm just going to set editable to be true for customer name. Now that I've done that I can kind of double click in here and I can change the name to be whatever I want and enter to escape. So double click gets me into that editor. I also want to do the same for the account number but for the account number I want to try out the large text cell editor just to get myself familiar with it. So I'm going to set it to be true here and I'm going to set the cell editor to the aglargtextcelleditor. So now if I double click into account number you can see that we're put into a text area. One of the tricks that you might have noticed is that it's not very easy to use because it's only going to fill up the space of the cell. What could we do about that? Well, we could use a cell renderer to actually make the cell bigger when we're in an editing experience that'd be totally fine. AGGrid also has the ability to open the editor in a pop-up instead so if you want to play with this you could set cell editor pop-up to be true. Now the behavior of the editor is that instead of doing it inline like we were doing for this text field it's going to open it up in a pop-up for the account number. This is great because now I have the full large text editor available to me with all the multi lines visible. So that concludes what we're going to cover for AGGrid. I do want to highlight that the slides, and again these are available to you, you get to keep the slides, have a lot more information in them about AGGrid with React.

So what is AGCharts? Well I'm just going to kind of open this up real quick because they have some really cool demonstrations of it. AGCharts is a canvas based charting library. You can use it independently of AGGrid though it works really well with AGGrid if you want to give your users the ability to plot and graph data inside of their grid. And just like AGGrid has this big focus on FinTech or showing financial data, I would say that AGCharts is a perfect correlation for charting and visualizations. A lot of their charts are really FinTech focused. They're optimized for performance and speed. You can throw a huge amount of data at them and they keep chugging along and rendering really really well and they have a lot of tools or customizations really built into them compared to other charting libraries. So what I want to do is I want to give you some time to just get acclimated with the AGCharts API, kind of learn how to create a few of the basic chart types using AGCharts and we'll talk about some more advanced use cases. This is gonna be a different set of slides than the previous ones so I'll drop a fresh link to these particular slides. We'll kind of dive right on into it. So one of the things that's going to be different right off the bat is that we're going to be creating what's called chart options and integrating or interacting with an AGChart component. The way AGChart works is there's not like a AGLineChart or AGPyChart. Instead there's just the AGChart component and inside of the chart options we're going to give it both the data that it's meant to render or like graph or plot and we're also going to give it a list of series. Now a series here is going to tell AGCharts which visualization to use for this particular series of data that we're trying to display. So first let's take a look at how we might specify the data.

A lot of their charts are really FinTech focused. They're optimized for performance and speed. You can throw a huge amount of data at them and they keep chugging along and rendering really really well and they have a lot of tools or customizations really built into them compared to other charting libraries.

So what I want to do is I want to give you some time to just get acclimated with the AGCharts API, kind of learn how to create a few of the basic chart types using AGCharts and we'll talk about some more advanced use cases. This is gonna be a different set of slides than the previous ones so I'll drop a fresh link to these particular slides. We'll kind of dive right on into it.

So one of the things that's going to be different right off the bat is that we're going to be creating what's called chart options and integrating or interacting with an AGChart component. The way AGChart works is there's not like a AGLineChart or AGPyChart. Instead there's just the AGChart component and inside of the chart options we're going to give it both the data that it's meant to render or like graph or plot and we're also going to give it a list of series. Now a series here is going to tell AGCharts which visualization to use for this particular series of data that we're trying to display. So first let's take a look at how we might specify the data.

So here I've got an array of some example data. As you might guess we're going to probably feed this into a line chart at some point because this is values over time. So inside of each of our datums we have a date for when the value occurred and the value associated with that date. From there inside of the component that we actually want to show AGChart in we're going to instantiate an object called options of type AGChart options and we're going to provide the data as that first param in AGChart options. In most cases data is going to be an array of objects that represents each cartesian chart data point.

So the series defines the type of chart to render and then based on that it's then going to choose which or you're going to specify which property to use for the x key for your x axis and your y key for the y axis. The line chart would need to know how to plot data against both an x-axis and a y-axis. So given the data that we supplied here I'm going to go back to it where we have date and value in our series we're going to say okay for our line our x key is going to be date right we're going to be showing change over time across that bottom axis and then the y key is going to be the value so that y-axis will be how big or small that value is for those particular dates.

By default ag charts will automatically generate the axes for the chart. We can specify the type of axis to use for each dimension. There are three basic types of axes available to us when we're building out line charts or bar charts or other cartesian charts. So we use number for continuous numerical data. We can use category for discrete data where there's like maybe a discrete set. And then time we'd use for time-based data. Number axis is used to display continuous numerical values in the chart. A time axis is going to be used to format time-based data in a chart or to graph time-based data in a chart. The time values must either be date objects or numerical timestamp values.

The type on the series is instructing ag-grid what type of like visualization to use for this particular series and so here we're showing a line chart showing that value over time. So let's begin with the line chart. We're going to build a simple line chart using ag charts that displays flight data.

So our model is going to be based on the following interface. We're going to have an interface called a flight it's got a date and then the time is going to be the number of hours that we're actually flying the plane and this is going to be a number. To start off we're going to begin by building a basic line chart that displays this flight data. So how are we going to do this? Well we're going to get all of our data and supply it as the data property for our ag chart options then we're going to define a series that actually renders this out. In this case our series is going to be a line series. We're going to use the date of the flight as the x key and the time of the flight as the y key. Additionally we can provide both x name and y name as additional options to this particular line series. So here i'm going to say that the name of the y is flight time so that'll give us a nice label for that y-axis.

By default ag charts will automatically generate the axes for the chart. This is really handy. We don't think about what the min or max values are or you know how to actually render this all out. Ag charts will do that for us. We can specify the type of axis to use for each dimension. There are three basic types of axes available to us when we're building out line charts or bar charts or other cartesian charts. So we use number for continuous numerical data. We can use category for discrete data where there's like maybe a discrete set. You know if we were doing bar charts and we want you know had some like discrete categories that we're using for those bars we might use a category based axis. And then time we'd use for time-based data.

And then time we'd use for time-based data. So number axis as I mentioned is used to display continuous numerical values in the chart. So if we wanted to specify the specific axis we wanted to use for that y-axis we could do so inside of our series. So for that line series we'd go down to the axis here or actually this is on the options here. We just say okay we have the following axes. We have a number axis and it is going to be positioned on the left. The type is instructing ag which type of series to use again like the number category or date and the position left right bottom top is going to tell ag grid where to actually render that axis at.

A time axis is going to be used to format time-based data in a chart or to graph time-based data in a chart. The time axis is similar to the number axis but it's going to differ in the way that it's going to generate the number of ticks. It's going to try and pick you know if numbers are based in it's going to try and pick really nice tick increments that make sense for whether it be hours minutes days whatever kind of the diff is across our data set and it's going to differ in the way that labels are formatted. You know we're going to want to have a lot more control over how we actually render out those particular label formats or format those labels. The time values must either be date objects or numerical timestamp values. So you can use like second sense epoch or actual Javascript date objects when we're trying to use the time axis.

So if we were to update the line chart to use a time axis for the bottom what we would do is we'd go into the axes array underneath ag chart options and we would add a time axis to it. Again the position could be like left, right, top, or bottom. We're going to position this to be on the bottom and then we're going to tell ag charts what interval to use. This is something that's specific to the time axis is we're going to say you know for each step on the intervals we're generating optics let's use months as that step value. And then finally we could actually pass in a formatting function to format how those individual labels are going to be rendered out. So I think in this case it's going to be the short-handed month and then the full year.

This section is going to have some longer challenges that are going to take you through the full step of actually drafting out a chart and so I'll give you a couple of minutes to go through this challenge. What you're going to do is you're going to create a line chart to render out that flight time for each month. So first you're going to update the chart title to be flight time then you're going to create a series of type line. So you're going to go into the chart options you're going to go to series and you're going to add an object to that array and set the type to be line. You're going to set the x key to be date we're going to use date as the x-axis and then the y key to be time the number of hours that we were actually in the air. You're going to set the y name to be flight time that way we're labeling that axis.

Then by that point the chart should be working pretty nicely the next sets are just to really customize it further. So you're going to create an axis with type set to number and set the axis position to be left for that y-axis and create another axis with type set to time at the bottom to create that time axis. If you're feeling particularly challenged you can go for these bonus challenges here and you can set the step to be month for that interval and you can also configure the way that it is formatted. Feel free to reference the slides kind of as we go through this and then finally update the component to render the ag chart component finding our options the options prop of the component. This one should be a little bit longer so I'm going to give you some time to get through it and here is the link to the slides with the stack blitz challenge.

Okay so there's a lot we're trying to do here but broadly we're trying to build a chart that's going to show our flight time over time. Basically how many hours we spend in air per day. Fun fact my business partner and dear friend Brian Love who also works on these ag grid workshops with me this is his act i think some of this is his actual flight time he's learning to be a pilot right now so kind of a fun little source for that data right now.

Okay so jumping into this first I need to find a series and a series is going to instruct ag charts how to actually show the data that I'm trying to plot. So there's lots of different types here I've kind of hover over what type could be. There's area bar, box plot, bubble, bullet, candlestick, cord, donut. There's just so many different types of series that are available for you and all that's really well typed so once you supply one of these the rest of the series will sort of light up with all the ways you can customize or configure that particular series. So I'm going to choose line as my series here and then if I can open up sort of my preview you can see all the different ways in which we could customize the line series of charts. So first off I'm going to specify my x key and say that we're going to plot using date and then the y key is going to be I think it was flight time. With that let's go ahead and get to the part where we're rendering out the ag charts component that way we can kind of see it as we start configuring more of these options. So I'm going to render out ag charts here and I'm going to bind my options to the options on the chart. Okay so we don't have anything quite yet and part of that's because we're overwriting these axes but if I come out the axes and actually just kind of let it pick some axes for us you can see that right off the bat it's going to go ahead and show us some data over time with the flight time as our y-axis. But it's not very handy right like the way it's chosen to format this both the value axis and the data axis is not ideal and so that's why we want to go in and start configuring the two axes that we want to render out.

So to do that we're going to add objects to this axes array and the first one I want to do is type number and I'm going to position this to be on the left. So right off the bat by specifying that we're of type number we want to be on the left we've got a much nicer y-axis here that's interpolating from 0.8 to 1.8 hours in the air for these particular dates. As I said this could be positioned you know left right bottom top so I could put this on the right if we wanted to invert where that axis is displayed it's pretty easy to configure that. But for now we'll keep this on the left and then we're going to do type date for our x-axis and position this along the bottom. So again because the formatting is rough here these dates the built-in formatting it's really broken or made the chart not look particularly great but these data axis can be customized even further to let us specify both the interval of time it should use for the steps along with the format it should use to render out the actual data objects. So let's do the formatting first I'm going to set the label here and I'm going to say we're going to format the labels using and again I want to say this is the short month and the long year. So save that and refresh over here and then I think I also need to update the month because the way we're stepping right now it's not quite helpful to us. So we go into the interval and I'm going to change the step to be time dot month oh I see the type here is not supposed to be date this is supposed to be time. I'll type it on my end. All right. So now that I've done that I set that to be time I formatted it using the short month and the long year and I changed the interval to be month based intervals. We now have a really nice chart that shows us you know what the flight time was on any of these individual days. Are there any questions about the line chart I can answer before we move on to the next chart type? Can you make the line curved? Yes there is a way to do value interpolation. So if you go into the documentation for the line series there is a way to specify that interpolation value on it. So if I go up here it's okay how do I interpolate this well let's do a smooth line for example and now you can see it's going to try and draw some nice bezier curves through each data point and there's a couple of different types that are available let's see there's a linear which is I think the default smooth and then step is going to kind of give us that like stepwise function to go through it. Those are the built-in three ones. I think there's also a way to specify your own interpolator if you want to really customize the way that this gets drawn out. Yeah great question. Okay let's move on to the next chart type. So let's learn how to draw bar charts. So to build a basic bar chart that displays the flight data what we would do is we would use the bar series type. The bar series type is going to work very similar to the line series type we're going to specify an x key and a y key on the line series. Now what we're going to do work very similar to the line series type. We're going to specify an x key and a y key along with a y name to label that y axis. The thing that's going to be different is we're going to use that category axis that I mentioned before. Now category axis differs from a number axis which assumes that there's a continuous number of values between the min and max. It's going to differ from the date axis which assumes that there's you know a continuous step between two different dates. It's going to only render for the set number of categories that we specify or provide to ag charts. In this example we're going to be using the month property for the category axis. So since our data is by month we're going to categorize our data in this series by month to show those individual bars. So how's this going to work? Well we're still going to use a number axis on the left hand side. So it's still going to choose between those discrete values between like 0.8 and 1.6 hours of flight time. But then we're going to specify a category axis as the second axis this time. We're still going to position on the bottom and then we're going to choose a different way to actually format that label. So here in the data we have a label available to us and we're going to use this callback function to look up the particular label based on the index in the array and render that out.

So this time instead of drawing a line chart what I want to draw is a bar chart using the bar series instead of the line series. To do this, I'm going to need to do a couple different things. First I'm going to have to define the bar series and tell AgCharts how to actually plot out the data, and I'm going to find my axes that way it knows how to draw those axes and make them look really nice. So let's start off with the series here and I'm going to set the series this time to be of type bar. Again, if I use my editor I can see all the different ways in which I can customize or change the bar series. There's a lot of additional options for the bar series like error bars, and kind of control the fills of the bars, the strokes, things of that nature.

You're going to set that x key to be month, the y key to be time, and the y name to be flight time. What's going to differ is when we get down to the axes. You're still going to have a number based axis on the left hand side of the chart but across the bottom you're going to create a category axis and align it across the bottom of the chart. You're going to use a custom formatter function for the axis labels to display the label stored in the data set for each month. As you saw in this example before, the way that's going to work is you're going to get the params object back. It's going to give you the index of the particular datum that we're trying to render. So you're going to say okay I'm going to go into my array of data, I'm going to use that index to pull out the specific datum that I'm trying to chart, and then I'm going to look up that label on that datum to use on my axis. Hopefully this will feel pretty familiar. It won't take quite as long as the last one. I'll give you a few minutes and then I'll work through the challenge.

So this time instead of drawing a line chart what I want to draw is a bar chart using the bar series instead of the line series. To do this, I'm going to need to do a couple different things. First I'm going to have to define the bar series and tell AgCharts how to actually plot out the data, and I'm going to find my axes that way it knows how to draw those axes and make them look really nice. So let's start off with the series here and I'm going to set the series this time to be of type bar. Again, if I use my editor I can see all the different ways in which I can customize or change the bar series. There's a lot of additional options for the bar series like error bars, and kind of control the fills of the bars, the strokes, things of that nature. For this I'm going to set the x key to be month, so we're still going to be plotting this data out by month, and then the y key is going to be that time and I'm going to set the y name to be flight. Let's go ahead and just come out this axis for a second that way we can see what we look like without any additional customization. So that additional customization we can see that we're already getting some really nice bars here showing us the overall flight time per month, but it's just using like the number of the month rather than giving us a more useful bit of data or formatting here. And so if we want to customize the way that this axis is going to be rendered we're going to need to specify the axes. So I'm bringing the axis back in here, and I'm going to start off by first setting up our number axis and putting this on the left hand side of the chart. So that looks great. We've got the number axis now rendering here, and it's going between 0 and 15 for the total number of hours we're spending up in the air in our plane. The second axis is going to be really the new one for us here, and that's going to be the category axis, and we're going to position this along the bottom of the chart. This is what's telling it to group it up based on these discrete categories. So it's looking at all the data and aggregating it based on that overall month to figure out how big we are for this particular category. But if we wanted to format this we would need to actually be able to use the label. So I'm going to kind of go into this roll up data hook and we can see what we're getting back for the data here. We can see that we're getting month back as a number. That makes sense. We see these numbers here, but it's also giving us a label that we could use to show for those particular months. So to get at that we're going to need to go to the specific datum that we're showing for this category. So I'm going to start by specifying my label configuration options, and I'm going to give it a formatter. And this formatter gets back a number of params. If I kind of... well let's get this syntactically correct real quick... and if I hover over this you see we're getting back these AGAxisLabelFormatter params. There's a lot of useful information in there and it's really specific to the particular axis that we're trying to customize. The part of this that's going to be handy for us is it's going to give us back the index of the datum that we are trying to graph. And so I'm going to use this index along with our data to look up the particular datum that we are rendering here. Then using that datum I'm just going to return back out datum.label. So now our chart looks correct. We've got our flight time aggregated up here based on the overall month. That's how it's been rolled up for us. And then we're using a custom label to customize that category axis that we can categorize by one value, but use a completely different label to give some meaning to this data. Are there any questions I can answer about the bar chart before moving on to the next one?

One thing I want to mention here is we don't have an example of it, but like I said at the beginning, series being an array is on purpose. If we wanted to, we could combine our line chart and our bar chart. There's nothing that would stop us from doing that because we could have a line series and sort of set up its own axis for it and show a nice line chart of that flight time as it changes per day, and then also have the aggregated by month categories available. So that's kind of why the API is designed this way. There's not, like other charting libraries, they're not this idea of there's a line chart or a bar chart. You have just one chart and then you have multiple series within that chart that instructs as AG charts how to plot that data out. So really, really powerful for building combination charts that use a variety of different series for the visualization. So far we've really focused on sort of Cartesian charts, things that are plotting within like an x and y-axis.

Let's look at one of the polar charts, one that's going to be using a circle to plot out the data, in this case a pie chart. So to build out a basic pie chart, first we would need to use the pie series, and we're no longer going to be doing x and y. That's not, doesn't make a lot of sense when we're talking about rendering within circles. Instead we're going to have to give it an angle key. How big is the overall slice for this particular piece of data within our pie chart. So we create that series of type pie, and then we specify the angle key. So we're still going to use that rolled up data by month for the flight time, and we're going to use the time as our angle key. So what it's going to do is it's going to look at all the months that we've provided for it and then add up the time across the entire set. And whatever portion of time belongs to a specific month, that's how big the angle is going to be when it actually calculates out the pie chart. One thing we're going to want to customize here is the way that data gets labeled. So there is a callout label key property, and this is what's going to be used to display the label of the pie chart slice. So we don't want to like show that raw number again for the month, like 6, 7, 8, 9, 10. We want to show that really nice label that we had used in our bar chart previously, June, July, August, so on and so forth. So to do that, we can specify the callout label key and give it the property we want to use for the callout label key. AG charts like AGGrid is very customizable, and so it also lets us specify what label should be specified for the legend, so the actual legend that's going to be rendered to the right of the pie chart. These could be different labels. You know, you might have like a short label for the legend to keep that nice and compact and legible and then a longer label for that interactivity of actually hovering over part of the chart.

So that's why there's a difference here in these two particular properties. So for this one, we've set the legend item key to be label and the callout label key to be label. We're okay just using the full month names for both of those. All right, I'm going to give it to you. This is actually our last challenge of the day. We're going to go through this one. I'll give you a couple of minutes to make your first pie chart. I think this is the source of the challenges. Then I'll go through it, and then we'll do a nice wrap-up.

So we're going to be implementing a pie chart this time, and that means we're going to have to start off with a completely different series than we've worked with, and this time I'm using the pie series for this. So I'm going to go to my series array here, and I'm going to set up a pie series. If I hit command or ctrl space here or command space, whatever makes sense for your particular platform, we can see all the available options to us for customizing or configuring a pie chart. And really, we need to specify one particular property, and that's the angle key. So I'm going to say that time is the means by which we want to divide this pie up. So just with that, we already have a nice looking pie chart, but if I hover over it, we're getting the overall flight time, but we're not getting the month, if that makes sense. I'm going to go ahead and specify two additional properties here, the legend item key, set this to be label, and the callout label key, and set this to be label as well. That's really all I have to do for the pie chart. The pie chart is really easy to do, it's really easy to customize and configure. We already have now the months showing for each of these particular segments. We have a great access over here. As I hover over, I can see the overall flight time along with the month that is associated with that data. So pretty straightforward and easy pie chart.

And with that, we're done. That's all the content that I had to go over with you today. Just to summarize or recap, we spent the first two hours on AGGrid with React. Please keep these slides around, these are yours to have and reference. There's a lot of content in here that we did not go through that might be particularly helpful for you, especially around cell editors, persistence and styling. And we also dove into AG Charts, the newest product from the AG Grid team. We showed how to use AG Charts with React. Again, please feel free to keep these slides, use them and share them with your team. My name is Mike Ryan. You can follow me on Twitter and Blue Sky at Mike Ryan Dev or Mike Ryan.dev for Blue Sky. I work a lot in the Angular space but also spend a good bit of time at React conferences too. So, if you meet me, please feel free to say hi. I'd love to say hello to you, too. Thank you all for joining. Have a great day.