Build a powerful DataGrid in few hours with Ag Grid

Alright, good morning everybody. I'm really excited to be your Workshop Instructor today. My name is Mike Ryan. I'm a Google Developer Expert in Angular and Web Technologies. If you know me from the Angular space, then you have probably used some of my open source work including ngRx, the Redux for Angular. And I'm also an AG Grid expert. And so I'm really excited to talk to you about AG Grid today. I'm also a software architect at LiveLoveApp.

Now in terms of this workshop, it's a little different than other workshops in that all the slides, exercises, and challenges are all going to be online today. So if you want, you're going to go to liveloveapp.com slash courses. And let me show you what you're going to see once you go to that link. So if you go to liveloveapp.com slash courses, you're to see a couple of different workshops to select from. We're going to be doing the Getting Started with AG Grid and React workshop. And so you're going to hit let's go on that. And then you'll see the full table of contents. I'm going to go through these slides today. But as you go through them, you can hit period on your keyboard to put it into slide mode and follow along with me. Additionally, at the end of each sort of section or chapter, there's going to be a challenge or an exercise for us to complete together. These are all going to be done on StackBlitz, an online IDE. So you don't have to worry about getting NPM dependencies installed or get anything running locally. We're going to do all of our exercises today using StackBlitz. So, again, I'm going to give everyone just a second to pull that up. You're going to go to liveloveapp.com slash courses, and then you're going to pick on the getting started with AG Grid and React in two hours workshop. And then once everyone's gotten a moment to pull that up and get that loaded, we will proceed from there. Again, liveloveapp.com slash courses, and then click on the Getting Started with AG Grid and React in Two Hours workshop.

All right, while everyone's pulling that up, I want to give just a little introduction to what AG Grid is. So AG Grid is one of the most powerful JavaScript grids in the world. It provides an Excel-like experience for visualizing data. And the thing that makes AG Grid really unique is that it's had a really focused amount of work on performance. So AG Grid can handle, in my experience, millions of rows of data. It can do some really powerful Excel-like functionality like pivoting data, making data editable in real time from the user's perspective, visualizing data with charts and graphs. Pretty much anything that you might need to reach for a data grid for, AG Grid can handle. And so we really like teaching AG Grid because we use it on a lot of our client projects at LiveLoveApp, where I'm one of the software architects on staff. And for our clients, we've seen them do everything from sports betting to financial transactions to visualizing real-time logs coming off of a backend server. And so AG Grid is a really dynamic and powerful library.

To install AG Grid with React, let's just kind of jump into it. To get started, if you were to be doing this locally, again, you don't have to do this on your machines this morning because we'll be doing everything in StackBlitz. But if you wanted to do this in your React project, you'd get started by installing the AG Grid community package and the AG Grid React modules. Now, a quick naming note about this, AG Grid is free. It is completely free out of the box using the AG Grid community package. There's also an enterprise version of AG Grid that comes with more powerful features. All the things that we'll be teaching today, though, come in this community edition of AG Grid that's provided completely free with online open source support. And then the AG Grid React Package is going to provide us React-native bindings to AG Grid directly, and so that's what we'll be using today to interact with AG Grid is we're going to be using the React wrapper around it. Additionally, you need to import at least a theme to get started. So AG Grid is not themed out of the box. It doesn't apply any CSS. This is really great if you have the time and energy to go build out a custom theme and you really wanna get detailed about the way AG Grid looks and behaves for your application, but it also comes with some great themes out of the box. So if you were to be using AG Grid on your project today, you could import one of the themes from the styles folder in the AG Grid community package. for our exercises, we'll be using the Alpine theme. It's a great little theme. They also have built-in ones that give you a material-style look. So if you're looking for more of like a Google Material Flair, that's available to you, as well. As a note, we will be covering more custom styling in detail during this workshop today. So if you're curious about how to get to some of that custom styling functionality with AG Grid, don't worry. We will be covering it. So with that, let's just jump right on into AgGrid and talk about how to use it.

So the most important construct in AgGrid is something called the column definition, right? AgGrid is going to be a data grid, and so it's going to be built on top of columns and rows of data. and when you're displaying data with AG Grid, by default, it's going to show each item in your collection of data as a row in this grid, and so the columns and the column definitions are going to instruct AG Grid on how to actually represent different properties within that data set. Each column that we want to show on our grid is going to be defined using a CallDef object. By default, columns are going to be positioned in the order that matches the column definition specified. So, we're going to pass AGGRID kind of an array of column definitions. And starting from the top going down, it's going to be the same order we'll see the columns in our application going from left to right. To get started with it, you're going to define some column definitions, and then you're going to import the AGGRID.react component from that AGGRID.react package. It's just a React component, so you're going to drop it inside of whatever React component you want to render the grid in. And then you're going to bind to the column definitions property on that AG React component. From there, you can start to define those column definitions. So in this example, I have an interface for row data. And in this collection of data, I've got a name and a color. And so you can imagine that I'm just showing a bunch of colors and their names here. And if I wanted to create some column definitions to show this data, well, I'm going to create a little array here. I'm using the use state callback hook so that I can make this list of column definitions dynamic. And so I've got my column definitions here. And you can see that I've got my first column is going to show the name field. And I'm going to give it a header name of name. And then for my second column, I'm going to show the field color from this data set and give it the name color.

So how's this all attaching? Well, this field section here is pointing directly to the name of the property on my row data. And then this header name is going to be what we actually show to the user. So we're going to be picking this property from our data set, and we're going to give it this represented name to the user. Same thing here. we're going to pick the color property and then give it this name when we actually show it to the user.

In the simplest form, a column definition is going to specify the name to be displayed. We just talked about this. And then the field of the row object to get the data from. Now, I want to highlight that this can accept a deep reference. So, if we had a more complex data structure with maybe nested properties and objects, we can actually use the object dot notation to get at or drill down into our data structure. So in the previous example, I was just kind of picking the top level property. But if, for example, you wanted to go deeper and you wanted to get like the first name off of an account field that exists on the user field, you could use dot notation to kind of drill in to that data.

This entire workshop is going to be in TypeScript. And I wanted to highlight that in AG Grid version 28, they got much better with a lot of TypeScript typings. And so we get to take advantage of that in today's workshop. So notice that we've specified that there's a row data interface, and we're going to be supplying that to some of the generic types inside of aggrid. So that we're staying fairly strictly typed throughout this entire process. This can give us better type checking. It's going to make sure that we're using the aggrid APIs in the correct way. And it's going to make sure that those column definitions where we're actually using strings to talk about which properties we're selecting are strongly typed for getting at some of those properties.

So with that, let's talk about row data, because now we have our column definitions. But what about the row data, the actual data we want to supply to the grid? Well, broadly, there are two row models provided by AG Grid in the community package. And then there are two that are provided sort of through the enterprise package. Today, we're going to be using the client side row model. And the way the client side row model works is that it expects that all the data already exists on the client. Maybe we fetched it from an API ourselves. We have the data we want to bind. There's also an infinite row model. So this is one where maybe you have an API that can paginate for you, and so as the user scrolls down the grid, you want to show the next set of rows dynamically. That's supported as well in the Community Edition. There are more advanced or more capable ones included in the Enterprise Edition that I just want to quickly call out, and I think we're going to go into some of these in more detail here in a second. But the Server-side row model is an extremely powerful row model that essentially allows you to set up the column definitions, and those will get translated into an AG Grid object that gets passed to your server side, where you can then kind of compute or calculate that row model or that configuration into maybe an advanced SQL query or something like that. It's really excellent for when you're trying to show just a ton of data and you want to give the user a tremendous amount of flexibility in how that data is represented. So also the viewport row model, which is just some more powerful infinite row model, but it handles things like horizontal scrolling in addition to vertical scrolling, which might be useful when you're doing things like pivoting. So generally in this course today, we're going to use the client-side row model, it's the default row model inside of AG Grid, and it's the simplest because it just expects that you've already gotten the data. And so it's great for our use case because we're not, we don't have a real API to call against. And so, you know, that's kind of the thing to keep in mind.

So let's look at a quick example of how this is going to work. I'm just going to load this up, and we can get started with it. So in this example, what's going on is I have my column definitions, again, for this data set of name and color. And then what I'm doing is I've just pulled in some fake data from a little local JSON file that's got these names and colors available to me. And I am binding or kind of setting up again another use state hook so I can make this data dynamic, passing in all those products that have that name and color field attached. and then I'm using the AG Grid React component to bind those column definitions that we've defined up here to the component along with the row data that we've loaded in from that JSON file to the component. And so the effect of this is if we look on the right here you can see that we've actually got AG Grid running. So this is a really simple data grid but we've got that name column listed first and we have a color column listed second. And as I scroll through we can kind of see that all the data is being rendered and we've got really great performance. As you open up this example, you'll see that it's running really quickly. We've got some great performance already coming out of just this limited data set. So let's quickly review. Data is going to be provided to the grid using that row data property.

That's how we're going to actually pass the data we want to render to AGGRID is through the row data prop. And then in terms of showing that data, we need to instruct AGGRID how to visualize that data, And we do that with column definitions. So the data is bound to a column based on the column definitions field property. We're going to learn about more advanced techniques for cell rendering later in this course. And when I say cell, I realize that's a term not defined yet. One of these individual sort of sections on the grid, we're going to use the term cell to describe these. And so we're going to look at custom cell renderers and get into more advanced use cases for showing data on this grid in this workshop.

Before I move on to the first exercise, though, I wanted to pause and to see if there are any high-level questions about ag-grid or column definitions or row data. I know this has been a very, like, introductory-level intro to this so far, but if there are any questions, feel free to drop them in the group chat, or you're welcome to also turn on your microphone and ask. I'll give you just another minute to see if there's any questions, and then we'll move on to the first exercise.

All right, so let's do the first exercise. So again, you're going to be at the liveloveapp.com slash courses. I'm going to drop a link to this in the chat to this very specific exercise. So if you've not opened it up, check the zoom chat, you can click on that link and you're going to open up the stack looks exercise. And you're going to do two things. You're going to specify the column def column definition property and bind that to the AG grid react component. And then you set the row data property using the existing products from the data import and bind that to the AG grid react component.

So if you look at the work that we have to go do here, you'll see this also in the comments. It should match the example we just went through. But you're going to specify a column definition state and bind that to the AG Grid React component. And you're going to set the row data state using the existing data import from line 4. You're going to do data.products and bind that to the AG Grid React component on the row data property. So I'll give you all just a few minutes here to work on this particular exercise and then about 9 25 we'll come back and we'll go through the solution and of course I'm around this entire time so if you have any questions you get stuck you need help feel free to drop your question right in the chat and I will answer the question.

The first thing we needed to do is we needed to specify the column definition state and bind that to the AG Grid React component. So I'm going to just kind of use the use state hook here with the call def generic type, and I'm going to pass in row data as a generic to that. And so inside of here, I want to specify which columns I want to show for my data. So I could just do my fields like this, and in fact that's how I'm going to start. So I'm going to pass in name and color, and we can see that these are going to be pulled in from this row data type. And the second thing we needed to do is we needed to set the row data state using data.products. So now we've kind of got these loaded in and we've got these ready to go. I'm going to bind these to the aggrid react component. So I've got call defs here and then row data. Now that we've done that, you can see that we've actually got some data being displayed to us. But what we're missing is some ability to customize this. You can see it's already gotten us the name. But if we wanted to change what that name was, I could do something like header name here. And I could set this to be something more custom. So now that I've done that, you can see that we've got a custom name displaying as the name for this column. And then same for here. You can do header name and customize that. Are there any questions about how to get this bound or how to start using the AG Grid React component? If not, we'll move on to the next section. Y'all are going to make this easy for me today. All right. Let's keep on going then.

Now that we've got some data being displayed, we can sort the data or give the user the ability to sort the data. So, we can enable or disable the ability to sort a row using the sortable property on those column definitions. And in fact, a lot of the functionality of AGGRID is going to be exposed through those column definition objects. Obviously, header name and name aren't going to be the only two things that we can specify there. By default, columns cannot be sorted by the user. And so the sortable value on a column definition is defaulted to a value of false. We can let adGrid do sorting on its own, and it's going to have built-in supporting for strings and numbers and dates. But we can also implement some kind of custom sorting if we want to by passing in a function to the comparator property. And it has the same function signature as the type of function you would pass to array.sort. So you're going to take in two objects and return a negative one or a positive one, depending on how you want to sort it. But again, by default, out of the box, it knows how to sort strings, numbers and dates. And all we really need to do is set that sortable value to be true. So let's look at an example. If we wanted to have our grid let the user sort based on name, what we could do is we could customize the column definition for the name field and set sortable to be true.

By default, the sorting order is set to ascending first, descending second, and then none. We can specify or customize the sorting order by supplying the sorting order column definition property. This will let us override that default behavior and supply a different set of sorting operations. If we wanted to specify a custom sort order, then in addition to applying sortable true, then we can say here's our custom sorting order, it can either be ascending or descending. This is different from the default because if we go back and look at what the default is, the default values are ascending, descending and none. That means that when the user clicks on the columns header, the first time they click on it, it will be sorted ascending, the second time descending, and the third, it will remove any sort and go back to no sorting. But if we wanted to remove the ability for the user to kind of get out of a sorted state and we just want to lock them into ascending or descending, we could specify a custom sorting order like this.

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 the default behavior for this as well. So if we didn't want the shift key to be the way that you did multi sorting then on that ag grid react component we could specify a multi-sort key and say hey instead of doing shift let's do the control key for windows or the command key on mac os let me just kind of show you what that would look like i'm going to go over to this example that we've already got here and i'm going to remove some of the thing changes i made here and on this name field i'm going to set sortable to be true.

So now that I've made the name field sortable, if I click on name, you can see that we're now sorting in the ascending state. If I click on it again, we're now sorting descending, and if I click on it a third time, we've kind of left the sorting state altogether. That's the default behavior of Aggrid. There's additional sort options we can apply here. So if we wanted to customize that, kind of go back here, we can see that if we wanted to customize it, we can specify a custom array for the sorting order. I'm going to cheat and just kind of copy and paste. And I'm going to apply that here. So now I've specified a custom sorting order. If I click on this, first it says ascending, then descending, and I can't escape a sorting order, or I can't kind of get out of that now. I'm stuck in either ascending or descending. Additionally, we saw that we can sort multiple columns. So if I make the color sortable as well and set that to sortable, I can hit shift to sort based on both. So you can see that I'm sorting by name first and then by color second. If I want to sort by color first and then name second, I can hold down shift and click on them in that order. So now we're sorting by color first and name second. As we saw, if we wanted to change which key to press, we can supply this multi-sort key property to the AG Grid React component. So if I go here and set the multi-sort key to be control instead of shift, then to sort by multiple, now I can hold down the right key for that and sort the way that I want to. So as we've seen, AG Grid supports sortable data. You can customize the sorting order available to the user and users have the ability to do multi-sort right out of the box.

For this challenge, what we needed to do is we wanted to add the sortable property to the column definitions, then we're going to override the default sorting order and then we're going to swap out that multi-sort key. So we had three things that we were trying to accomplish in this exercise. the first thing is I want to make both of these columns sortable. And to do that, I'm going to apply the sortable property and set it to true inside of my column definitions. Now if I go and look or interact with my aggrid component here, what you should see is I can now sort by the name or by color. And because aggrid supports multi sort out of the box, I can hold down the shift key and click on them to sort by both and kind of specify a sorting order. So let's customize this a little bit and let's override the sort options. So set those sort options. What we're going to do is we're going to take this sorting order property. and we're going to pass in an array of sorting orders that we want to let them apply. So here I've set the sorting order to be ascending and descending for the name field, and I'm going to actually apply custom sorting order here, and I'm going to do the reverse, do descending and ascending. So now that I've customized this, if I click on color first, you can see that it's going to do it in descending order the first time and then ascending order the second time, Whereas if I sort by the name field, we're going to go ascending first and then descending for the second click. This also works for multi-sort. So if I hold down shift and click on color, we can now see that we're sorting by both of these individually. So I'm going to kind of go in here and sort by color first and then name second. To do that, I had to hold shift. If I wanted to customize which key to press, then what I could do is I could specify this multi-sort key property directly on the AG Grid React component. And I could set this to be the control key. And so this would be control on Windows or command on Mac. So now if I click on name and I press control on Windows or command on Mac and click on color, we'll enter multi-sort instead of having to use the shift key. So a lot of flexibility here in customizing the way AG Grid works.

So I'm going to kind of go in here and sort by color first and then name second. To do that, I had to hold shift. If I wanted to customize which key to press, then what I could do is I could specify this multi-sort key property directly on the AG Grid React component. And I could set this to be the control key. And so this would be control on Windows or command on Mac. So now if I click on name and I press control on Windows or command on Mac and click on color, we'll enter multi-sort instead of having to use the shift key. So a lot of flexibility here in customizing the way AG Grid works.

Do people ever have to add instructions for users on how to use multi sort, or is there something built in, or is this just a standard of how to, how to control multi sort? Obviously you can choose. So yeah, there might be some instruction necessary. Yeah, I would completely agree. In fact, I think a lot of the AG grid functionality like this kind of speaks to me as a power user and doesn't have a lot of intuitiveness in how to discover that functionality. So yeah, I think if you were to build or really wanted to promote multisort, you'd want to give some instruction to the user. I don't think that's a necessarily standard interaction. It feels pretty hidden to me.

That's a great question. Any other questions? One other. I think you mentioned this, but under the hood, you said it's using a – what kind sorting algorithm? I know that yellow comes up first as opposed to something like white when it's reverse order. So underneath the hood, it is applying or it kind of knows that these are strings. And so it's applying the locale compare operator on the strings. So we can actually kind of take a look at that real quick because I mentioned it briefly, but let's just see what this would look like if you wanted to customize that. So what this is doing out of the box is we can pass in a, what is the name of the property? I'm so bad at these comparators. And the signature of this function is it's going to take in two names, and it's going to expect us to provide a positive one, a negative one, or a zero if they are the same. And so the way that it's working is it's actually doing a locale compare on each other, which is built into the JavaScript strings for sorting. So this in place, we can kind of see that it's sorting the way, the same way it was before. This is just built in out of the box, this type of string comparison. So you don't have to specify the comparator this way, but if you wanted to customize this, you certainly could. For example, if we wanted awesome to always, or maybe ergonomic to always be at the front, we'd say, if A begins with ergonomic, you return one. Similarly, if B does, So we can kind of do something really custom here. Or as it starts with. So you can see we've kind of customized the behavior a little bit of this. If we wanted to, we could do something really custom and get into the nitty gritty of the sorting. But out of the box, it's just going to use that string comparison.

So we've got a column. We've got column definitions for that name and color field. and we're starting to specify or get a little redundant with the configuration we're passing in there, right? We're setting both of them to be sortable. We're customizing the sort options for both of them. And a lot of configuration is redundant in terms of our code. And thankfully, there's a way to avoid some of this unnecessary repetition using something called a default column definition.

So what the default column definition is, is it supports all the same properties on the column definition object, but every column will inherit the default values provided on the default column definition. Additionally, it's just inheriting from it. The column definitions can still override whatever defaults we specify using the default column definition. This will get an example. Here, I've set up a default column definition, and I've set sortable to be true. And then I've passed in this default column definition directly to AG Grid. So, now every single column definition that I pass to AG Grid will be sortable by default. Now, of course, those column definitions could on their own set sortable to be false to override that behavior. But because in this example, we want all the columns to be sortable, we can just specify this on the default column definition and then we can avoid the repetition of specifying that on every individual column definition.

So first, we define a new default CallDef const that is a CallDef object. And then we bind that to the default CallDef prop on the AG Grid React component. This is a super short exercise, so I'm just going to give you a minute to go through this one. But you're going to kind of play around with the default column definitions yourself. So you're going to create a new default call def const in the component function. It's going to be a call def, just like the other ones are. And you're going to set the sortable property to be true on it. Then you're going to bind that to the default call def const to the prop on the AG Grid React component. And then you're going to override the sortable property to false for one of the columns just so you can see how the inheritance here is working. So like I said, this one feels really short to me. I think it builds directly on the one we did previously. So let's give you a minute or two to go through this, and then I'll go through it on my own as well. So what we want to do in this challenge is we're going to set up a default column definition that's going to apply sortable to be true for all of our column definitions thereafter. And then we're going to override it on one of the others just to see that we can customize it or change it. So here I'm going to create a const called default call def, and it's going to be up type call def, passing in that row data as the generic, and it's going to set sortable to be true on it. Then I'm going to bind this to the default call def prop on the AG grid react component. So now that I've done this, even though I've not set sortable to be true for name or color, we can sort on them because they're now inheriting directly from that default call def object. We wanted to specify a sorting order again and remove the ability to get out of the sorting state. We could also put that on the default call def. So now you can see that I can only do a sending or descending for name or color. And if I wanted to break out of these defaults, for example, if I don't want to sort by color, then I could still set sortable to be false to override that default. And of course, I hit Save, so give it a second to restart that dev server. You can see it can't sort by color, but I can still sort by name. Any questions about the default column definitions? It's really handy. As we get into more customization options, it's going to be great to be able to pack the default up with a lot of those customizations. That way, our actual column definitions can stay nice and compact.

So we talked about sorting. that's a great part of the Grid experience. But what about filtering? Well, AG Grid ships with several provided filters out of the box. It allows you to filter based on strings using the text filter, number, date. And then for enterprise version it also lets you do set based ordering. The text filter is the default. So if we set filter to be true for any of our column definitions it's gonna give us a text based filter for that column definition. So let's take a look at the text filter. To enable it for any of our column definitions, all we need to do is set filter to be true.

Because the text filter is the default filter, we don't need to do any additional customization on these column definitions. We can also explicitly use the provided text filter. So is that a filter being true, we can actually pass in the name of the filter we want to use. These have some complex names, that's because agGrid lets you register a registry of these filters. Out of the box, agGrid comes with this agTextColumnFilter and we can specify that explicitly by passing in the string to that filter property. We wanted to, we could also have a number filter. So to use that, for example, we had a price field that we wanted to show, and that price was a number, then we could use the AG number column filter to give the users a number-based filter. I'm just going to come over here and take a look at some of these while we can. If we wanted to filter by color, we want to make color filterable. What we could do is we could say filter-through. Now on color, you can see that I have this new context menu that's appeared. It gives me this text-based filter. So I've got contains not contains equals not equals. Basically, all the types of filtering you'd expect. And so I can say, OK, I just want white. And if I wanted to, I could say white and yellow. So it gives you a lot of flexibility out of the box just for that text-based filter to customize or control what data is displayed. It gives us this nice icon to let us know that this data is being filtered on. I'm so sorry to hear that that is not loading in Chrome or Firefox. I'm I'm using a Chrome-like browser myself on Mac so hopefully it's nothing. You might might want to try clearing the application cache for StackBlitz to see if something's kind of gotten stuck or gotten into a bad state but yeah hopefully would be working for most of off. If anyone else is having problems, let me know and I can take a look at it. If we wanted to do a price-based filter, I think I have price built into this data set. Let's see if I do. I do. So we have price as a number. If I wanted to support filtering from it, I can specify the AG number column filter on this data as well. And this would give me the ability to filter based on number. So if I wanted to do greater than operations, find all the values that are greater than 500, I could do that using that number based filter. So really great filtering out of the box for your basic data types. In addition to numbers and strings, like I said with sorting, aggrid can sort numbers, strings, and dates. aggrid can also filter on numbers, strings, or dates. If we wanted to, we could use a date filter. Let's take a look at what that would look like. I'm going to just copy this column definition over here. I'm going to pass this in. Now I have the date of order. Actually, this one's not in this data set. So let me pull up what the next data set is, but this would let you do things like, hey, is this between these dates? Is it more recent than this date or before this date? Gives you a lot of those expected filtering options for dates. So once you give it a try, here's the next exercise. This one's a little bit more involved and it's got a different data set for us to play around with. You're going to open up the exercise and then you're going to set the customer name column to use the default tax filter. So to do that, all you have to do is say filter true. And then you're going to set the account number column to use the provided number filter. So I'm going to just pop in the name of the number filter here in the chat. And then you're also going to use the date filter on the date of order column. And then finally, you're going to use the text filter for the total column against that one using the set filter to be true. So there's a couple of different filters to apply, and you might want to play with it. I'll give you a couple of minutes to go through this exercise, and then we'll take a look at the solution together. Okay, let's take a look at the solution for this one.

So I'm going to open up this exercise. And what I want to do here is I want to apply some sorting options to this grid. So for the customer name field, what I'm going to want to sort by is I'm going to want to use a text filter. For account number, I'm going to want to use a number filter. For date of order, I'm going to want to use a date filter. And then finally, for total, I'm going to use another text filter. So the text filters are the easiest, because to use a text filter, all you have to do is set filter to be true. And that's going to be enough for us to start to play around with those. So on customer name now, if I wanted to say, you know, which my customers have the name Jones in it, I can go ahead and apply that kind of filter to it. for account number, I'm going to use a number filter here. And to do that, I'm going to say I want to use the AG number column filter as my filtering option. So now if I wanted to, I could say, well, which of these is equals sort of this number, this value here. Again, this kind of works as a number filter. So as your options, you've got to go equal, is not equal, less than, all the comparators that you would want. You even have a range option if you wanted to look at any of them within a range. For date of order, we could use the... Oh, yeah, absolutely. That's just as an example to kind of go through and play with it. You can definitely use the number filter for the total column. so i'm going to use the ag date column filter on the date of order field here so now i can do some comparisons so if i wanted to say something like you know is this greater than let's say november 1st 2019 then we can look at all the orders that occurred after that date and if we wanted to go and change that and say less than we can see all the orders that occurred before that date, and we can start to play around with it in that way. And then, for total, again, we could set filter to be true for a text-based filter. As Millie recommended, we could also use a number filter here. So, I could say agNumber column filter on this one, and so now I can go in and do the filtering and say I want to see all the orders that are greater in value than, let's say, 1,500, and now we've filtered down to just those orders whose total is above that value. So are there any questions about filters?

Are the filters accessible by the keyboard? Yes, they are. So AGGrid does have full accessibility here. You can tab through all the columns. You can tab through the column headers. You can forget the exact keyboard commands, but you can get to all of them with shortcuts just using the keyboard, tabbing and entering. So, great accessibility out of the box. Again, another one of those things that makes this a fairly enterprise or high level or high-end solution. Any other questions? So, again, if you wanted to play around with the keyboard shortcuts, you can tab through to move to the next one. You can also press up and down on your keyboard to select a cell. If you're on a column and you wanted to filter it, so example, by customer name, you can just hit enter on that to make it filterable. And then if you wanted to get into it, I think you hit control enter to open up the filters menu. And all that can be customized. Those are the defaults out of the box. okay so you might wonder okay we have date filtering but what about the timestamps and so the date filter works as is when the grow data uses the javascript date object but if the day is provided using another method such as an isostring, then we have to specify the comparator function and tell it exactly how to do the filtering and sorting for timestamps. So for example, if we were using an isostring or some custom timestamp option, then what we would have to do is we would need to specify this comparator. And so here I've got a special comparator that's letting me filter are based on the local date at midnight. And so you can see that I've specified for the filter params this comparator that lets me control or customize the way date filtering works. So you do have a lot of customization ability here as well for some of these data types if you wanted to customize how AGGRID is going to do it. So again, you're going to specify the filter params, and you can pass in a comparator to this date column filter if you're using something other than the built-in date object. Okay, so we've talked about filtering and sorting for these data sets. But what about if we wanted to customize the way that these cells are being rendered? Because right now we're showing that data as it comes out. And we're showing a lot of things to do with currency, for example, but we're not able to apply or see that currency in the grid. We can accomplish that with cell renderers. So without any customization, and in its simplest form, each cell in AGGRID is rendered as a string based on the field specified. However, AGGRID often is not this simple and we might want to do something that's more complicated. So this is where we can leverage the pipeline for rendering cells. We're going to take a look at three of the functions we can pass in for the rendering pipeline.

We're going to look at the value getter function, the value formatter function, and then we're going to look at building a custom cell renderer function to really get into some advanced cell rendering use cases. So first up is the value getter function. We can use a value getter function to get the row data for columns where the use of the field property is not an option. So if the data we want to display isn't just as simple as like, hey, show me this field in my row data. Maybe we want to do some combination or joining of different fields or, you know, we want to do some kind of computation, then we can use the value getter function to get at that data.

The value getter function is invoked by agGrid for every cell that we display, and the function can be invoked with a special object called the value getter params. It's going to pass or give us the data along with some additional information about the cell we're rendering into. That way we have a lot of ability to customize the data that we're providing. Before we dive into that value getter, though, let's take a look at the value getter params interface. It gives us a lot of context around the value that we're trying to get at. So it's going to give us access to the grid API. We'll definitely talk about this a good bit. It's going to give us access to the column definition, the actual column itself, the column API, again, another thing we'll talk about, the data, the actual row data we're trying to render, and then the node we're trying to render into. So let's break down each of these properties. That API properties will be the grid API. The grid API let's us do a lot of complex customization of the grid, lets us really get at any of the cells or rows, lets us invoke some of that Azure Grid behavior. Lots of things we do with the grid API, same with the column API. We've already talked about the column definitions in terms of what data is exposed there. It's all the things that we specify in those column definitions. definitions. It also gives us the current column we're trying to render into so we can inspect what the state of the column is in terms of it's filtering or sorting to really customize how we want to get at it. But most importantly, we're going to want to look at data for the data of the current row that's trying to be rendered. So that Grid API has been extremely useful for programmatically interacting with the Grid. It also lets us add event listeners to the Grid. AdriGrid has a lot of custom So if you wanted to listen for some of the user behavior, like filtering or sorting, there are events that are exposed for that that we could hook into. Let's just access the clipboard features. So if we want to copy or mutate data that's on the clipboard, we can do that. And there's just a whole lot more that we can do with that Grid API. Pretty much anything that the user can do manually with Agigrid we can do programmatically using the Grid API. The column API is useful for programmatically interacting with a specific column. So from some of that sorting and filtering we've looked at earlier, we can do that programmatically using the column API. There's also moving and pinning up columns, which we can do programmatically, and, again, there's more things built into that. So what is a row node? Well, a row node represents a single row in the grid. It gives us the row selection API and lets us update the row data for that particular row node.

Now that we've learned about how a value getting is invoked by AG Grid, let's take a look at a quick example. So here, for price, what I'm going to do I'm going to specify a value getter. And the reason I'm using a value getter is I want to round the prices up to the nearest whole number. Now, there's something you have to pay attention to, and the TypeScript types really guide us on this. In some instances, params.data might be undefined, so the data that AG Grid is supplying to us could be undefined. This really happens more in some of the more advanced row models, but we still want to be proactive programmers here, and we want to guard against this case. So if params.data does equal undefined, we're just going to return zero. And then once AGGRID supply this with data for this row, then we're going to round that price field. So I'm going to give it to you as an exercise to play around with first, and then I'll go in and go through it. This is a slightly longer exercise, so I'll give you a few more minutes for this one. But the goal of this exercise is going to be to learn how to use that value getter function. So you're going to open up the exercise, and I'm going to paste a link to this slide here in the Zoom chat. If you're just now joining us. Once you open it up, you're gonna note that the total column is currently empty and you're gonna use a value getter to sum the total for every order so that way we can populate that total. There's some hints that I wanna give you. So first take a look at the row data interface to gain an understanding of the data model.

For every row, there's multiple orders on that row. And so you're gonna want to create a sum of all the prices of all those orders to create this total. An order is associated with the order items which associates each item with a product. A product contains the price. If it were me, I would use array.reduce to sum the order up. If you're not comfortable with a reduce, feel free to use a for loop to do the summing as well. And then you're going to place all that logic inside of a value getter field on the total column to compute the total price of the entire order.

This is a slightly more complicated exercise. I'll give you a few minutes. If you have any questions, feel free to drop them in chat.

Okay, let's take a look at how to accomplish this exercise. So I'm going to go ahead and open the exercise up. And our goal is to implement this total column here. Now to do this, I'm going to use a value getter. And what I want to do is I'm going to look at this row data interface for just a second. So in order to calculate the total cost of an order, what I'm going to want to do is I'm going to want to sum up the order items here. And what you'll see is that in the order items, I've got a product ID. And this product ID and quantity is going to tell me basically how much of a product is in the order. But I don't actually have information about the products available to me. Kind of go back and look at the challenge. What we'll see is that each of these orders is associated with a product and the products are going to contain the price. And so I actually have that available to me on data.products. We can go inspect what that JSON looks like. So if I go look at data.json, you can see that I've got all the customers, I have all the accounts, and then I have all the products available to me. So for each product inside of an order, I'm going to want to go find all these products, take a look at that price, and sum them all together. So this is a little more complicated of a challenge. Let's take a look at how we would do this. So I'm going to implement a value getter here. And this is going to take the row data. And if row data.data equals undefined, it's going to return zero. I'm going to implement this with just a simple for loop though you could have used array.reduce here if you had wanted to and for this for loop I'm going to do I'm going to create a little value here, put total and say this is going to be a number I'm going to start at zero, and then what I want to do is I'm going to say for every order item, I'm going to go find the product associated with it. The for let order item of row data data order items. And inside of here, we can just go ahead and just console log out the order item to make sure that we're getting what we expect. So by console logging, you can see that we're getting all of these orders like we would hope to do. And so what I'm going to do is for every single order item, I'm going to go find the associated product. So I'm going to say that data.products.find. I'm going to say product. Product.id equals order item.product.id. So now that I have this available to me, and I'm going to type this as any or kind of leave this as that is, now that I've got the product, I can get at the price. So if I don't have a product for whatever reason, it's going to call continue. And if I do have a product, then what I want to do is I want to say total plus equals. I'm going to do a little parse float trick here on the products. What was it? I think it was the cost. Just double check price. Okay. So I'm going to parse the product's price, and I'm going to multiply that by the order item's quantity. Finally, I'm going to return total. So we take a look now if we go to that total column, you can see that we are now calculating the total value of the order. So the way this is working is I'm using a value getter. In the other column definitions, I'm able to just use that field property because I'm just pointing at simple data on my row data interface.

But this total column, it is different. I don't have a total available to me on my dataset. And so I'm using a value getter instead of a field to calculate what the total is. And the way that I calculated this total is I used a for loop and I initialized a total at zero. And then I iterated through every order item in the row data's order items array. And for every order item, I found the associated product that is tied to that order item. I parsed that product's price. It's a string in the data set. I don't want to represent it as a float for this exercise. So I parsed that float, and then I multiplied that by the quantity, added it to the total, and then I returned that total back out. So these value getters are going to be a really advanced way to get at or compute data that we want to show inside of our grid. I want to point out that AGGRIDs is actually really smart. It's not going to call these value getters until it absolutely needs to, and it's going to remember or cache those results. That way it doesn't need to continuously calculate or compute these values.

Are there any questions about this solution before we move on to the next chapter? I know this was a little bit more of a complex one than the ones you've done so far.

Okay. Let's move on. You can make these reusable, so providing these inline is totally fine the way we've done this, but if you wanna make them more reusable, you can do so. For example, if we wanna do a multiplier value getter, you actually have all the types of types you'd need to create a reusable value getter, and then you could pass this in directly into a column definition.

Also, I don't think I've said this, but these slides I'm going through, these are gonna be published indefinitely. These are yours for life. So feel free to always come back, reference these slides, look at the examples, share them with coworkers who maybe aren't on the call. Like these are your slides to have as long as you wanna have access to them.

So now we've looked at value getters. Let's talk about value formatters. So there's sort of, again, like I said, we're kind of building on a pipeline here. The first step in that pipeline is AG Grid needs to figure out what the value is. And the second step is formatting the value. After the cell value is known, the optional value formatter callback function enables us to format that value. The value formatter function is invoked by AG Grid for each cell and it's also invoked with this special value formatter params object. There's a lot that's on it, including all those column APIs, Grid APIs and row data. But what's different compared to the value getter params is that the value formater params actually has access to the value. This makes sense because the value getter got the value for us. Now that we had that value computed, we can access it in these value formatters.

Let's take a look at an example. So we've got a lot of prices here and as I've mentioned, we might want to actually format these using currency. And so the value formatter is a great place to apply some currency-based formatting. Or, you know, for dates, maybe we want to format the date a special way. Whatever we want to do, the value formatter is the right place to do it in terms of changing the way that data is represented. So here what I'm doing is I've got a formatter that I'm creating using the international's number format API. And so I'm going to format using the U.S. currency. And I'm going to set the minimum fraction to be however many digits that I want to do. If we don't have a value, I'm just going to return zero. And if we do have a value, I'm going to cast that value as a number and then format it.

We have to cast it as a number because, as I mentioned earlier, all those prices that are inside of this data set are short as a string. So this is just letting us parse that string into an actual number. So I'm going to give it to you to try. Open the exercise on stacklets. And I'll drop a link to it in chat. and you're going to implement your own value formatter. And I see this says value getter. It should say value formatter. But you're going to add a value formatter to the total column to format the value using that international number format class to format it using the US currency. So this one's a little bit simpler than the last one. I'll give you just a couple of minutes to work on it and then I'll go through the solution. So here we got the same code that we were using earlier for showing the total, except this time the total is just baked in for us, so things are a little bit simpler. What I want to do is I actually want to format this using the currency format. So if we go over and scroll, you can see we have the total, but this is actually currency. So how are we going to show this using some currency? Well, to do that, we're going to want to use the number format option to sort of render this as currency. And we want to apply this by using a value formatter on this total field. So what we're going to do is we're going to go to this column definition here for total, and I'm going to pass in a value formatter. This is going to give me the row data here again. And I have available to me row data dot value.

and if this equals undefined for whatever reason I'm just going to return an empty string and then what I want to do is I want to format this using the, let's say like the US dollar format. So I'm going to create a formatter using the internationals number format class. I'm going to pass in NUS as the locale and inside of here I could do something like currency and specify that this can be whatever currency that I want to do. But from this point, I've kind of got enough that I need to go format this data. So I'm going to pass in or return formatter dot format row data dot value. So now that I've done that, you can see that we're applying that here. And then what I'm going to do is I'm going to actually pass in a currency option to this second parameter here. US, I always forget the exact one here. And then I'm going to do style as currency. So now I've done that, you can see that it is formatting these numbers as they come in, it's applying, you know, the commas and the periods as we'd want, it's adding the dollar assigned for us and it has completely internationalized that value for us to display. So now we have really nice currency formatting. The way we did that is we pass in that value formatter directly to the total column definition. Any questions about this code?

So you could, but you're not going to want to do that because of the rendering pipeline. One of the things that I've not mentioned yet is that those filters and sorts that we talked about earlier, those are going to be applied to the value that is returned from the value getter. And so from the value getters perspective, we kind of want to return that raw data, the number in this case, that way the filtering and sorting works on that number. And then the value for matter is actually to customize that value for display purposes. And so at this point, since we have turned this into a string, we would not be able to use that number filter on this. Does that make sense?

Yes, thank you. Good job explaining it. Any other questions? Okay. Keep marching along. again, there's some slides in here that talk about making these reusable. So if you want to take a look at that content, you have that available to you to take a look at. Okay. We're going to continue down that pipeline. We did value getters. Then we talked about value formatters. The last part of this pipeline that we're going to cover in this workshop is the cell renderer function. So after the value for a cell is determined, and we've optionally formatted the value, we can then use a custom cell renderer to have full control over how that cell is rendered in AGGrid. It's important to note that we should only use a cell renderer when necessary. This is kind of like the easiest way to de-optimize AGGrid is by giving it a really complex or poorly optimized cell renderer, and it just completely wrecks our performance. And so this is something you want to be pretty careful about implementing, and you only want to do when necessary. By default, the default cell renderer is just to show the text content directly as an HTML element inside the grid. We're just showing the string as it is. But when we're using a cell renderer, we can add additional elements. We can maybe add or inject icons. We can apply custom CSS. We can add event listeners. All the things we want to do in terms of HTML and CSS, we can do with the cell renderer. The cell renderer for a column definition accepts the following values. So, undefined will just render the cell's value as the text content for the cell. It can also be a string that references a registered cell renderer. So, we're going to see that a dgrid comes out of the box with a couple of custom cell renderers that we can take advantage of. And then finally, the cell renderer can actually be a full-blown React component. So, if we wanted to use React to render out the cell, we can do that by passing a React component in. Just as a note, just like we've been seeing with the value formatter, the value getter, we're going to get cell renderer params that gives us access to all of the available APIs and data that we want to get at. So we can use the cell renderer in the same way that we had been using the cell formatter previously. We can apply any formatting here if we wanted to. And so this is just a really simple example of using that cell renderer. Of course, we're going to get some more advanced uses of it here in just a second. So in this example, rather than using a value formatter for the price field, we're using a cell renderer. Cell renderer function accepts the params object. First we check if the value is undefined, and then we invoke and return the transformed value. Not a particularly useful example. You could have just used a value formatter instead, but this just shows that the cell renderer works in a very similar way to that value formatter. So what we're going to do is we're going to start to use this cell renderer function to do something more complex. So in this exercise you're going to open up the exercise on StackBlitz. You're going to add a cell renderer for the date of order column. And the first thing you're going to do is you're going to check if the value is not undefined in that params object. And then second, because you can just pass in a react-component here and react-components can just be functions, be functions, you can actually just return some JSX from these functions. And so you return some JSX that includes a material icon next to the formatted date string. And to render that icon, there's a little bit of HTML here available to you for you to copy and paste.

And to render that icon, there's a little bit of HTML here available to you for you to copy and paste. So I'm going to pass this in to the chat so you can open it up, give you a few minutes to work on this. Again, you're going to use a cell renderer to render a formatted date object by putting that material icon right on it.

Okay, let's take a look at the solution for this exercise. So I'm gonna open it up. And what I wanna do on this exercise is I've got the date of order column, and I wanna customize the way that this is rendered out. And to do that, I'm gonna use a cell renderer. If I don't have any data, I'm just going to return and say no data here. Let me grab the type for this real quick. That way I'm not sitting here waiting for it. And then what I'm going to do is I want to render out the date with this material icon attached to it. And so I can actually just return some jsx here if I wanted to. So I'm going to return as a fragment. I'm going to return the icon. And then I'm going to return grams.data. I thought that was right. Oh, here I need to. what is going on just in case this is a fragment issue sorry about that let's jump ahead to the solution make sure that we're not doing anything that's unexpected. I'm just going to copy this out. Make sure that everything is the way it's supposed to be. All right. Hitting a little bit of an error on this. I apologize. But I can at least talk about the solution a little bit. And I'm just going to hit save and refresh it just in case I'm running into some kind of development issue. All right, there we go. Definitely just hit some kind of caching issue. Kind of common with stack splits. Again, if you get into some kind of weird state and like, this doesn't seem right, the way that I usually go about it is I go to the application tab in Chrome DevTools, hit clear site data. And that tends to clean up any kind of build cache issues that I'm running into. But since I've cheated a little bit, let me go through the code as to what I've done. So I've got my cell renderer here for the date of order. And if I don't have a value on it, then I'm going to return null. And if I do have a value, what I'm doing is I'm going to render an event icon, and then I'm using the datetime formatter from the international API to format that date into just a simple internationalized date string here. So you can see the cell renderers can actually be full-blown React components. They're going to receive these params as their props. And from there, we can actually render out some custom HTML, CSS, whatever we want to do at this point, we could do here. Any questions about this with these cell renderers? I do want to highlight one more time that this is the easiest way for developers, in my experience, to deoptimize AG Grid. These cell renderers are being rendered every time a row comes into view, right? And so we want to have really smooth scroll and render performance inside of AG Grid. So, if we're doing something computationally complex inside these cell renderers or creating a lot of DOM nodes or setting up a lot of event listeners, then we can really easily deoptimize our AG Grid's performance here. And so be really careful with these cell renderers, you kind of want to put your best foot forward and write your most performant React components for these cell renderers. Otherwise you risk making the AG Grid implementation fairly slow. So, that covers cell rendering.

The next section we're going to get into is cell editing. cell renderers were able to get data or compute data custom with the custom value getter, we're able to format the data that we had computed using a value formatter, and they're able to render advanced or custom HTML and CSS for these cells using a cell renderer function. But as I said at the very beginning, AGRID's not just about displaying data, it tries to give your users a full react- or, I'm sorry, not react, Excel-like experience for viewing the data. So if you want to give your users the ability to edit the data, you can use cell editors. So to enable cell editing, all you have to do is enable the editable property to be true on the column definition. You can also set editable to be a function to determine if editing is enabled. If you want to do something more complex, you can enable editing via the grid API.

So if we wanted to let the users edit the name of a customer, then we could set that editable field to be true directly on the column definition where we want to make editing possible. You can also do it using the Grid API. Here's some example code, so we could say, okay, start editing this cell at this specific place, and we can use the Grid API to also stop editing. Out of the box, AG Grid provides us with a number of cell editors, so it gives us cell editors for editing short text and lots of text. It gives us a date editor. It gives us a select editor if you want to constrain the user to a set of options. And if you're on the enterprise version, you also have a rich select editor which has more customizations in terms of the options you can provide to the user. Like the sort and filter, the TextCellEditor is default, so if we set editable to be true, it's going to pick the TextCellEditor and you can use the CellEditor column definition property to specify a provided or custom cell editor. So, for example, if we wanted to let the user use the large text cell editor, we could specify that as the cell editor beneath that editable column. We'll see how many times I can say editable and keep it all together. To use the select cell editor we could pass that in as the AG select cell editor. And then you can also customize the options by giving it cell editor params, which I think we will take a look at. Let's play around with some editable options. Go ahead and open up this exercise on stack splits, and you're going to enable cell editing for the customer name column, and then use the AG large tech cell editor for the account number column. This should only take a minute or two, and then I'll go through the solution. We'll take a look at it. Let's play around with the cell editors. I'm going to open this exercise up. Soon, the edited data in our example will just be saved in browser. That's right. Yes. It's not to a service somewhere else. To persist this, you need to listen for those edited changes, and then you are kind of left. It's up to you with the client side row model to figure out how to actually persist those changes. The other row models actually have built-in support for saving these changes. But as is, this isn't getting saved anywhere. It's just kind of being done in memory. So, for customer name, if I want to make this editable, I can just set this to be true. And now for any of these names, if I wanted to, I can go in here, double click on a cell, and I can change the name to whatever I want it to be. Like Nelly asked, these are not being persisted. This is just all being done in memory, but it shows that we are able to use a custom cell editor. And then just to show a more complete example, for the account number, I'm going to set editable to be true. And I'm going to set the cell editor to be the AG LARGE text cell editor. So now if I go into here, you can see it's going to give me like a full text field that's kind of lets me hit enter here. And I have multiple lines, just a full blown text field if I wanted to. Pretty simple stuff so far. So let's keep on looking at cell editing. So just like with the value rendering pipeline and how we're able to, at the end of it, use a cell renderer to customize the way that we were rendering those out, you can also have a custom cell editor component. So the provided cell editors are all adequate, right? We've got text, number, date, all those are fine. But we can also build custom cell editors to meet the user requirements for applications. And just like with the cell renderers, these can actually be full-blown React components. So what we're going to do is we're going to build a custom color cell editor using React, and we're going to use the browser's built-in color input to achieve that. So before we create the components, let's look at the imperative API interface that establishes that contract. So the cell editor has a single property on it called getValue. It's invoked once after editing is complete to provide the value back to the grid. So establishing communication with AG Grid requires us to set up an imperative handler from the ref forwarded by AG Grid. This is a little ugly, and I apologize, but this is just some of that interop code you have to do to bridge between AG Grid and React. So as we make our color editor, what we're going to do is we're going to use forward ref to be able to get at the ref passed to us from AG Grid. and we're going to use the useImperativeHandle hook from React to get at the imperative API provided to us from a GGRID. So we're going to establish this bi-directional communication in this way.

And so we're going to say, okay, for this ref, we're going to give it an imperative handle, and we're going to say, here's what we're returning back to you. Here's the reference in this component. And we're going to give you a getValue function that points at whatever value has been set inside of our component here. So that was pretty complicated, but just kind of trust me on it. If we look at the rest of the code, hopefully it'll make a little bit more sense. So we've got a value state here, and we're going to initialize it to be the initial value for the cell. And then we're going to use the color input. And whenever it changes, we're going to set the value of this state hook to be the new value chosen from the user from that color input. And then this imperative handle is going to let aggrid sort of get at that value once the users stopped editing or making changes to it. So now that we've done that, we can make a full-blown custom cell editor. So this is just building on the previous example. So now I've still got that same value state hook here, and I'm allowing aggrid to get at the value using this imperative handle, but I'm also going to get a ref to the input so that when this component is initialized, I can actually focus the user's keyboard directly on this input. So the experience here that I'm trying to get at is when the user double clicks on a cell, it's going to show that color picker and we're going to already have it focused. That way that color picker is open and available to the user. So again, just as a review, what is each hook doing? Well, use state is going to contain the value of our set editor. Use ref is letting us git at a reference to that color input so that we can focus the input. UseImperativeHandler is setting up the callback functions to communicate with aggrid. Implementing git value is required to send that value back to aggrid after the editor has been closed. And then finally useEffect is allowing us to focus the input when the cell editor is opened.

Finally, let's register the component, and there's two choices for us. We can provide a direct reference to the component in the column definition, or we can register the component using a string constant, this lets us maybe serialize these column definitions or let different grids throughout our application reference that component by a string name rather than with a direct reference. We're going to just pass it in directly as a reference, so here I've got my cell renderer as my color renderer and I have a cell editor and I'm passing in my custom colored editor. So I'd love for you to take a stab at this. I've got the solution just built into this exercise slide, because I think there's a lot going on here. I want you to be able to copy and paste out the parts that you want to get access to. But you're going to implement your own custom color editor. You're going to use the use state hook to capture the initial value from the props. You're going to implement that get value method using this imperative handle to give that value back to AGGrid. Then you're going to update the column definition for the color field to be editable using the color editor as the column editor. There's a little bit more going on to this example. give you a couple of minutes to go through this one. And then I'll go through the solution here in about four minutes. So I'm going to open up the exercise on stacklets. And what I want to do here is I'm going to implement a custom color editor component. So to do this, the first thing I need to do is I want to use props.value inside of my state. That way I'm kind of initializing this cell editor with whatever the value is for this color. The second thing I need to do is I you to use this imperative handle to give AG Grid a get value callback that points at the new or updated value. Finally, I've got my input here. And it's going to be of type color. When the value changes, I'm updating state. I'm getting a little reference to it. That way, I can use it in effect to focus it when the cell editor is opened up. And then basically, the workflow here is that when the user double clicks on a color, This is going to open up this cell editor. We're going to focus this input. As the user changes the color, it's going to update state, and when the user leaves the cell editor, AGGRID's going to call this get value callback, which is going to point at the most updated value, and that's going to let AGGRID know what the new value is to set for the color editor. So I'm going to go back to the grid, and now I've got my color editor. I'm going to go down to that color field, and I'm going to set editable to be true, I'm going to set the cell editor to be this color editor. So now I can double-click on one of these colors, and you can see that I've got this input here. I can change the color and escape out of it, and that color is saved. So I switch it to maybe a blue here, and I leave. You can see that the blue has been set. So we're able to implement very custom cell editors as well. This is a good example, too, because it also shows us using a color renderer. You didn't have to implement the color renderer here, but if you wanted to go take a look at the code, that is available to you to go take a look at. It's kind of showing that using the rendering pipeline, we're able to customize the way that we were showing the color and using the editing pipeline, we're able to customize the way that we're actually editing a color and we're able to use React components for both parts of this pipeline. Are there any questions about cell editors that I can answer before we move on? I think we move on to some styling next. So real quickly, I want to talk about how to do persistence because as was asked earlier, hey, this is just editing in memory, right? Yes. But if we wanted to persist it, there are ways to go about that. So you have several options for persisting the data. By default, the field bound to the row data is updated and then we get a value setter function that's called. So we'll kind of take a look at all these options just as some abstract code to inspect. So the value setter function is really great because the data is managed by the grid and it's the inverse of the value getter function. So we wrote the value getter function to get the data. We can give it a value setter function that allows us to actually go persist or set this data. We can return true to indicate that the value is updated successfully and to refresh the cell, or we can return false to indicate the value was not updated. So here's an example where we're getting the new value. We're checking to see if the new value matches the old value. If it doesn't, we can maybe call out a on name change prop and let the parent component know that, hey, some of the data you passed to me has changed. Maybe you should go persist that to the server.

A few things to note. We're always going to want to do some kind of equality check just to make sure that the value is actually changed. because the user can open up the cell editor and escape it. And that will call this value setter function. But if the data is not actually changed, we don't need to do anything about it. If the data has changed, then we can just maybe call, like I said, an onNameChangeCallback prop that was passed to us to let a parent component know that some of this data has changed. And then finally, we're returning true to indicate that the grid should refresh the cell. If we return false and we're saying, hey, this was an illegal change, kind of go back to what it used to be. By returning true, we're saying, yes, this is a valid value. we've persisted it, go ahead and render the new value in that cell. There's also an on cell value changed event on the entire grid that we can listen to. So this event is emitted when a cell value has been updated after a user edit. And so we can use the on cell value changed prop on the AG Grid React component to listen for it. So here's an example here where we're listening for any value to be changed, and we can log out what the old value was and new value. that event has a lot of details about which part of the data has been edited. And so we can use this as another method to persist any data changes. There's the onSellEditRequest event that I also want to highlight. So this is emitted when the value has changed after editing. And we can use this also as a prop to bind to on the Azure Grid React component. So here you can see that we've got the onSellEditRequest event that we're listening to. We can only use this when it's in a read-only edit state. So this means that we allow the user to change it, but we're not going to let these things persist. We can listen for any requests to edit using this callback function. Again, there's some more complex or advanced details in here. These slides are available to you. You're welcome to go through this and learn some more details about some of these more complex or advanced APIs. With that, let's get into the last bit here, which is styling AG Grid. We've talked about how to show values with the grid, edit values with the grid, sort and filter. Now let's talk about some styling. So as I mentioned at the very beginning, AG Grid has several pre-built themes. These themes are customizable, and you can override some of those global CSS styles. So in overriding global CSS styles, be aware that you need to not change three specific properties. So if you're doing custom CSS, you need to let AG Grid have ownership over position, overflow, and pointer events. The reason for this is if you go inspect the DOM for AG Grid, it's doing a lot of absolute or relative positioning of cells. And that's how it handles things like reordering columns, responsiveness. It's going to be important for it to manage position and overflow when you're using the infinite scroll model. That way it can show empty data and kind of populate that in as it streams it from the server. And then also don't customize pointer events. It's going to need that to control which mouse to show for different or which cursor to show when you're interacting with the various editing and filtering capabilities of AG Grid. So take a look at cell styling. You can specify cell styles using the cell style property of the column definition. This is our opportunity to do some custom styles just directly in the column. You can also add CSS classes to the cell class property. And then you can do a sort of more advanced application of cell classes using the cell class rules property. We're going to take a look at all three of these. So first, let's take a look at the cell style property. So on a column definition, if we wanted to, we could just pass in some styles to apply to it. And this just takes in an array of CSS styles that we want to apply. So if we wanted to show the customer name in white text with a background color, we could do that just by passing in some cell styles. We can also specify classes using an array with the cell class property.

So if we wanted to take these styles and actually write them in CSS instead of inline in JavaScript, we could do that by creating a customer name CSS class with those styles. And we can pass in the name of the class as an array to the cell class property on the column definition. So now these cells will be rendered with that customer name class and we'll have full ability to style it using CSS by hooking off of that class name.

And then finally, I think the more interesting one is the cell class property. It can be a function that's invoked as well. So we can take a look at like, hey, is the value a zero, for example? well, let's show an error class or let's show a customer name class. And so we can do some advanced class application here by doing some inspection on the value to the return or determine which class to actually apply.

AG Grid goes above and beyond by giving us cell class rules, which is just formalizing that approach I previously showed. So for cell class rules, I give it a dictionary object of every CSS class that I might want to apply to the cell. And then I give it a function that returns true or false as to whether or not this class should be applied to the cell. So, for example, in this one here, I'm applying a cell value negative class if the value is below zero and a cell value positive class if it's greater than or equal to zero. And you can have as many values in this dictionary as you would like.

A few things to note that I want to highlight. So cell styles add and override existing styles. These styles are never going to be removed. These are sort of static styles that are applied. Cell class can add classes but never remove any classes, right? We can give it classes to apply, but we can't tell which classes shouldn't be applied. Cell class rules is the most advanced of the three options. It allows us to add and remove classes with those predicate functions that control whether or not a class should be applied.

Row styling. So that's for cells, but how can we want to actually style some rows? Well for rows, we can use the row style to add styles to all the rows. We can do GetRowStyle to conditionally add styles, and then just like we had for cells, we have row class, getRowClass, and row class rules for managing what styles are applied. So for example, to do some row styling, First off, because we're talking about rows now and not columns, we're going to apply these on the agGridReact component directly. So for agGridReact, we're going to say, okay, for row class, here's the class I want to apply, or for row class rules, again, that could be a dictionary, we can apply that in, or for row styles, if we just want to apply some static styles, we can do that here. Here's an example of showing those row class rules. These can be just dictionaries again with those predicate functions that apply styles, styles whether or not these functions return true or that getRowClass can be a function that kind of looks at the whole row data and chooses whether or not to apply a class to it.

Finally, I want to talk about some of the built-in themes. AG Grid has several provided themes. Valham is the original theme that AG Grid first shipped with. It's really dense, so it's great if you're trying to show a large amount of data. It's got that dense style to it. Alpine is the we've been doing today. It's a fairly modern and fresh look to it but it's less dense in the Balham style. So it shows some data but not as much data as the Balham one and it also has a built-in material style and that's the least dense. Balham and Alpine also include dark mode options. So if we want to go over here we wanted to change the way this was styled here. I could go to my CSS here or is this an index? Yeah and I could change the AG theme like if I want this to be material instead, I could pull that in, and now we have a material look. If I wanted to do the BALHAM one, I could do that as well and get that really dense look to it. I think I spelled that right. Yeah, I did. That's how you control that. You just import the theme that you want to apply to your AG grid. And those are the three themes that are built into it. You can customize any of these themes. They all have CSS variables and CSS rules. Additionally, if you're using SAS, there are SAS mixins and functions for controlling or applying these themes. For example, if we were to try and customize the Alpine theme, we could do so with SAS. We could import the AGThemeAlpine mixin, and then we could apply it to our grid, and we can control things like the grid size, the active colors, whether or not borders are being displayed. A lot of customization options in here. Definitely would recommend referencing the documentation to see how you can customize these themes.

If you're not using SAS, you don't have to worry. It also supports CSS variables. So you can customize these themes using those CSS variables. So all the things that you could customize with the SAS mixin, you can also apply a CSS variable directly on that root element to control. role. Finally, there are some SAS rules that you can apply. So there's like AG pram and AG color property. So if you want to really dig into some advanced customization here, you have a full set of SAS rules available to you to do that customization with. So that was AG grid with React in two hours. I hope I hope you enjoyed learning a little bit about AG Grid and how to implement it with React. I do wanna talk a little bit about the package size bundling. We had a question about that earlier, and so I wanna hit on this a little bit. In this example today, and there's a great blog post that one of our attendees linked to in the chat, I'm gonna pop it in here. I think there's some really great advice in here as to how to control the bundle size, because the way that we've been doing it on these examples is we've just been importing the full AG Grid community package, and that comes with every single bit of functionality that we've covered today. all the filters, all the editors, all the sorters. But if you don't need all that functionality, if you just need some of that functionality, this blog post goes through how to use their module system to actually load in just the bits of AG Grid you want to use, that's going to let you control your bundle size and make sure you're just shipping enough AG Grid functionality. If you want to learn more, again, all of these slides are yours to keep. So I'm going to post a link to these slides one more time in the chat. They're free for life, so feel free to share these slides and all these examples with your colleagues to come back and reference them, to go through some of the advanced material that was included in each of these chapters. As long as LiveLoveApp is around, these slides will be around for years to control as well. Again, my name is Mike Ryan. I'm a Google Developer Expert. You can follow me on Twitter, LinkedIn, and GitHub at MikeRyanDev. I really enjoyed working with all of you. I'll stay on for another couple of minutes if there's any final questions, and if not, thank you all so much for joining me. It's been a pleasure.

Hey, I've got a question for you, if you have the time to answer it. So I've been using AG Grid for years. I love it. It's great. But one thing that I've had a bit of difficulty with is column sizing. So trying to get them to fit the contents and make one row expand to fill the remaining space. something I've always struggled with to get working consistently. Do you have any tips on that kind of thing?

Yeah. So, you know, I'm, are you trying to do this with the resizable? No, no static size. Static size. Okay. So one of the things that you can get an access to, and I'm going to see if I can get at it with this, for example. So on the AGGrid, there's an onGrid ready callback function. And what this is going to provide you is it's going to provide you with a grid API. And on that grid API, you actually have the ability to do size columns to fit, I think is the name of it. I wish I was getting TypeScript typings here for this. Oh, this is just the event. So I think it's like event.api. Yeah. Or size columns to fit. And what this will do is this has a lot of functionality in it to control sizing these columns. And I'm invoking this a little too early in the pipeline, but what you want to do is you can use this API, after your data has been set, and call this size columns to fit method on it, and it will automatically size all the columns based on the data that's been rendered. And you can call that at any point. So, like, as the user is scrolling or if you stream in new data or something about the data format has changed, that's changed, you can always call that size columns to fit.

And that will tell AG Grid to re-invoke or look at changing this. So I've done that before with varying results. One of the things that it seems to do is pick one row or one column to make it expand to the full width. Is there any way to choose which column it chooses to expand?

Yeah, so inside of here you have some options, and I think these column limits I think is what you want to do. And you can specify, I think you can like remove columns for it to look at or inspect. I think you can also, I want to say that, and I'd have to go search for this. I want to say that the column API also has an auto size. method on it. So like if you're, we kind of looked at some of those column definition callbacks, they have the ability to get at a column API, and that has an auto size on it as well. I would have to kind of go dig into the documentation, but I'd really look into that.