Powerful Data Visualisation with AG Grid & AG Charts

Welcome again to everybody joining us. Welcome to the Powerful Data Visualization with aggrid and AgCharts Workshop at React Advanced. I'll wait a couple more minutes. We've got people still coming in. But in the meantime, if you want, go ahead and drop in the chat where you're from. My name is Brian, and I'm located here in the United States. And I'm on the West Coast in Oregon, in a town called Bend. Really nice to meet everybody.

Okay, it's about five after, so we might have a couple other people kind of join us as we get started. But we'll go ahead and kick things off. Yeah, welcome to React Advanced. This is the Powerful Data Visualization with aggrid and agcharts. This is gonna be a three-hour workshop. I'm here in the US, and I'm on the West Coast time. I'm in the Pacific time zone. So I've got 0900 to 1200. I know it's gonna be different for you, but you'll see on my clock that it's 905 in the morning. So we'll kind of use that as a gauge as we go through throughout the workshop today. We've got three hours of content, and we've got lots of hands-on exercises for you to get started with aggrid and agcharts. We're gonna take two short breaks throughout the morning or throughout the evening for you. And so feel free to... We'll kind of use that as a set time to kind of... I'll be walking away and taking a break, just getting some water and stretching my legs. But feel free to take a break anytime you need to do so. I've also dropped a couple of links in the chat, and you'll see these up here. So the first one is liveloveapp.com.courses. And that's where all the course content lives for today. We're gonna be doing the aggrid and agcharts workshop. You'll see those, and I'm gonna be walking through that with you. I also dropped a couple of GitHub links here as well. If you want to get right to the code and kind of see how things are set up all the way with everything, you can do that. But you don't need to clone the repo or do anything with the repository. That's just for your reference and for my reference as well, just in case we get stuck on an exercise and I need to refer to a solution. And you can also do the same thing, and you'll see that. So I'll kind of walk through that here in a second. The other thing I want to do real quick is just kind of introduce myself. So my name is Brian Love. I live here in the United States, and I live in the state of Oregon. So that's up in the Pacific Northwest. So it's kind of the top left of the United States. And I live in a town called Bend. Bend is kind of known for adventure skiing and hiking and mountain biking, and that kind of thing. I've been a full stack developer for a while now, and I'm learning to become a pilot, which is kind of a fun thing to share. I don't know if I'll ever become a commercial pilot, but just in case the AI overlords take over software engineering and I'm unemployed in a few years, I figure it might not be a bad backup plan to have because somebody's going to still need to fly the planes until the AI can do that too. That's all just for fun. Yeah, that was all just for fun. And then I also love to ski and I'm excited for us here. Ski season will be starting in a couple weeks, so I'm excited to to do that. So let's go ahead and dive right in. So I'm going to switch over to my browser and I'm going to go ahead and go to the website. This is liveloveapp.com slash courses. Let me drop that link just in case you missed it and you joined us. I'll drop that right now in the chat for you. Once you get there, go ahead and hit the Ag grid with React down here on the bottom left. And this is what we're going to be going through today. This is all the content that we have. And then we're going to get into the Ag charts as well. We're going to actually skip the styling in order to get have time for Ag charts. And I think you're going to really appreciate that. The styling, this content is always here for you to use and to reference. So if you want to come back in and refer to some of the styling, feel free to do that. Let's go ahead and just dive right in. So if you click on Getting Started with Ag Grid, you're going to see that the content comes up. And if you want to follow along, feel free to follow along on the course website. You can also hit the period or the dot key on your keyboard. And that will turn the website into kind of our presentation mode. And then if you hit escape, that takes you out of it. So pretty easy if you want to follow along with the actual slides. And then I'm going to kind of get this chat window out of the way for myself. Excellent. Okay. So today, we're going to be learning a bit about Ag Grid. We're going to start with installing Ag Grid, defining columns. We're going to look at sorting, filtering, dragging, pinning, and spanning using Ag Grid. And then we're going to get into other things throughout the morning and throughout the evening. We're going to be looking at things like default column definition and some of the more advanced features of Ag Grid. And then we're going to dive into AgCharts a little bit, which is Ag Grid's new charting product. And that will cover line chart, bar chart, and pie chart when we get to that. I do want to make it clear, just in case you're curious. So I'm a software consultant. I work for Live.Luv app. I do not work for Ag Grid. So what that means is I'm a developer just like you. I use Ag Grid. A lot of the clients that I work with use Ag Grid. But I don't get paid if you buy Ag Grid. So I'm not here to convince you. And I'm not even like a devrel, right? I don't get paid. Like I don't work for Ag Grid. They ask us to do these workshops.

And the hope is after the workshop, if you need any help at your work and you want somebody to kind of come along your project, is that you would maybe think about us and reach out to us and hire us to help you with your Ag Grid project. So that's kind of where we make money in all of this. And Ag Grid is a great product. I stand behind it, just because I've used it as a developer for many, many years. But I'm not here to convince you to buy anything. I don't know all the inner workings of their pricing and how that all works. You know, I'm sure if you're interested in purchasing Ag Grid, they'd love to get you on a call and talk to you about it, but I'm not the person to do that. I'm here to just tell you what I know about Ag Grid and how I've used it very successfully in React projects for many years. And hopefully to have some fun with you.

Okay, so to get started with Ag Grid, the first thing you do is you npm install it, pretty obvious. You'll install the Ag Grid React module. There's also the Ag Grid Community module. You may need to install that as well, because that ships with some of the additional interfaces and things like that for TypeScript. So just be aware of that if at any point you're working with Ag Grid and you're like I'm trying to import this type or this interface and it's not working, I can't find it, you might need to install ag-grid-community as well. So just kind of be aware of that.

The next thing you need to do with Ag Grid is you have to start with styling it. And so you import the necessary base in the theme CSS files. So you import that Ag Grid CSS file as well as a theme file. Ag Grid ships with a bunch of themes that both have light mode and dark mode. You can check those out on their website. And you can also customize all of this styling. So any of the look and feel that you see with Ag Grid, one of the things that's really cool is you can extend it and customize it and even build like a design system around it.

The first thing we need to do with Ag Grid before we get started, before we like can display any data in our grid is we need to define a column definition. And that's called the col-def interface. And so each column is defined by a col-def object. And by default, columns are positioned in the order that matches the column definition specified. So you'll see that we'll create an array of these col-def objects. And we're going to bind that to the property for the Ag Grid element component. And that tells Ag Grid, here's my columns. And whatever that order is, by default, that's the order that the grid is going to display them in. Now, of course, you can change the order and users can move columns around. And we'll see that.

Now that we've talked about real simply how to set up some columns, now let's talk a little bit about data. So broadly speaking, there are two row models provided by Ag Grid. They have a client-side row model, which means you give it all the data in the client and say, Hey, Ag Grid, here's 10,000 rows of data. I want you to display in this grid. And you give all the data to the grid in the client, and you can manage the data in the client if you want. But in general, the grid is going to expect that when it does things like filtering and sorting, that it already knows about all the data, right? And then there's the other option, which is server-side row model, which works really well when you have large data sets.

And that tells Ag Grid that kind of gives it all the styling that it needs. And then I've got the column definitions property. And I've got that set up to my col-definitions property that I've defined in my React component. So here's what that's going to look like in a little broader sense. So here, I've defined an interface called rowData. It's got a name and a color. And then I've used useState to set the column definitions property. So I'm going to use the hook, useState, and I'm going to set that to be an array of these column def objects. And each column def object is going to have a field, and that's going to tell Ag Grid that when I give you all this data, I want you to look for the name property in each object. And I want you to use that in the name column. And then the same for field for color, column, I want you to use the color field inside of my row data. And I want you to display color in that column. And we'll do a demo here very shortly to show you how that works. So in the simplest form, a column definition specifies the header name to be displayed as well as the fields. And the field is kind of a string that tells Ag Grid where to get the data for that column within the row data object. And you can use kind of a dot notation here. So if I've got kind of a nested object, maybe that gets returned from my API or GraphQL or whatever it is, and I've got a user object that has an account object inside of it, and that account object has a first name property, I can do user.account.firstName, and Ag Grid will kind of drill into that and get that data to display in that column for you.

So quickly reviewing that, the data is provided to the grid using the row data prop. The data is bound to a column based on the column definitions field property. We talked about that. We talked about how we can use, kind of, we give it a string that references to a property within that data. And we're going to be learning more about advanced techniques for cell rendering later in the course. Let me show the data, I just realized real quick. Let me actually go into that data.json file. And just so you can actually see the data that we're rendering. So in my data, I've got order data here. So it's orders and accounts and customers and products. And so when I said, hey, for row data, I want you to display the product data, this is where it's pulling that data from. And when I said for the column definition to use the name field, this is where it's getting the name from. And the same is true for color, and that's where it's going to get the color from. And so you can kind of see, this is what my data set looks like. Of course, your data set is going to be different, but in today's course, we're going to be using kind of this sample data set that I generated. So yeah, so yeah, hopefully that'll help give a little context.

Okay, so here's our example from before where I had new state and I set up my column definitions. Now I've also set up my row data. And so what I'm doing in this example here is I'm just bringing in a bunch of products. And so I've got a sample dataset that you're gonna see once we start loading these up in the browser and looking at the demos and the exercises. And so this is gonna be an array of our row data objects, and I'm gonna throw this in state and it's gonna be row data. And I'm gonna go ahead, and in my Ag Grid React component, I'm gonna have the row data property as well as the column defs property.

So let's take a look at this example in StackBlitz. Let's go ahead and have this boot up. The code is all the same. So it's a little small here. Let me hide the sidebar and let's boost this up a little bit so we can see the code. So I've got my column definitions and my row data, and here is my column definitions, and here is my row data. Notice that I'm importing data from a JSON file. So I'm just doing that for the purposes of this course. You, of course, could be fetching that data from a backend. You could use whatever you need to do to get that data into your client and then bind that into your grid. And here you can see that I've got my name column and I've got my color column. And if I click on these, I can see that it's gonna sort, and I can also drag the color column around and I can move it back and forth, right? And so by default, the order of the columns from left to right is the same order as I specified in my column definitions. And the sort order by default is whatever order the data came back from my backend or from my data source. And so in this particular example, in my JSON file, this is the order in which they're kind of being displayed.

Great. So with just a couple of minutes into the course, I think, and a little bit of my intro in 10 minutes here, we've already learned a little bit about Aggigrid. We know that we have to wrap it in some sort of container element. We have to provide a theme. And I can customize those themes, and we will kind of get a, we'll touch a little bit of the styling later in the course. And you can kind of refer to the Aggigrid documentation on further styling. I've defined some columns. I've got some data and I'm displaying it. And you can see here that as I'm scrolling through the grid, I'm not sure exactly, maybe the couple of hundred items. So not a whole lot of data, but it's very smooth. Good high frame rate, very good performance, displaying data very easily, and I'm up and running. So yeah, pretty simple.

So quickly reviewing that, the data is provided to the grid using the row data prop. The data is bound to a column based on the column definitions field property. We talked about that. We talked about how we can use, kind of, we give it a string that references to a property within that data. And we're going to be learning more about advanced techniques for cell rendering later in the course. Let me show the data, I just realized real quick. Let me actually go into that data.json file. And just so you can actually see the data that we're rendering. So in my data, I've got order data here. So it's orders and accounts and customers and products. And so when I said, hey, for row data, I want you to display the product data, this is where it's pulling that data from. And when I said for the column definition to use the name field, this is where it's getting the name from. And the same is true for color, and that's where it's going to get the color from. And so you can kind of see, this is what my data set looks like. Of course, your data set is going to be different, but in today's course, we're going to be using kind of this sample data set that I generated. So yeah, so yeah, hopefully that'll help give a little context.

Okay, right off the bat, I want you to kind of get your hands on the keyboard and start playing with ADGrid. I don't want to talk this whole time. I want you to learn as much as you can about ADGrid in the next couple of hours. So we're going to go ahead and we're going to open up an exercise. I'm going to drop this link. If you're following along, again, on the website, you should already have that link. But let me go ahead and grab that link for you, just in case. Here's the link to get started with the challenge. And so real simple, this is going to be doing just what we did already. We're going to specify the column definition property, and we're going to bind that to the ADGrid component, and then we're going to set the row data as well. So we're going to do this first exercise actually together, just so you can kind of get used to the flow. I'm going to open up StackBlitz, and then if you hit Command B or Control B, you can hide this menu on the left. You can also just click the project icon. I'm going to move that out of the way because I've got my font kind of bumped up here a little bit. Let me go up another click just in case. Yeah. And so if you open up the exercise, you should see basically what I have right here in front of me. And I've already imported the CSS for us, you'll see. I've already imported the data and the column definition. And like I mentioned early in the course, you install AGGrid React, but some of the types also come from AGGrid Community, and so you'll want to install that as well if you're using TypeScript. If you're not using TypeScript, you don't need to do that. And I've defined an interface for my row data. And I've said every row in my grid is going to have a name and a column. And those are going to be of TypeScript. So the first thing we want to do in this exercise is we want to specify the column definition. So what we're going to do here is we're going to go ahead and set the column definition. I'm going to call this call def. That call def, we're going to use state. And it's going to be an array of objects. And we're going to have a field property on it. And this is going to be name. And we're going to have another field property, and this is going to be color. Now I can come in here, and I can say this is going to be an array of row data if I want to set the TypeScript generic on my use state, get a little bit more type safety or strict typing around that. But now that we've got our column definitions, now we need to bind that down and set the property on our AGGrid React component. So I'm going to call this call defs, and that's going to be equal to our, what did I call? Let's call it call defs. We can actually shorten this up here a little bit, huh? Great. So now I've got my columns, and I can see here I've got my name column and my color column, but I still get loading because I haven't provided any data to the grid yet. And so we need to do that next. So let's set the row data. So we're going to do const rowData, and we're going to use state, and this is going to come from my data.products. And then let's go down here. It's row data, and we're going to bind that in. Let me just build color. I'll not have my, oh, I got a space in there. There we go. That'll do it. Okay, great. So in our first exercise, we set up the column definitions, and we set up the row data. And we're bringing that data in right now in this example from that, that JSON file. Of course, we could use an external data source, fetch that, and then set that data in the state. And now that we've got that row data in the client, now we can set that row data and provide that to the grid. And we've got our column definitions that specify how to display those columns and where to find those. Now, you'll notice that I didn't specify the header name, and that was something that I showed you in the beginning here. And so I can do header name, and I can say product name, let's say. And now you can see that the header name is product name. By default, AzGrid is going to use, they've got just kind of a string replacement strategy, so to speak, of inferring those header names based on the field. So when I didn't have this set before it just said name, and it capitalized N in name. And you can see here in the color column that it has capitalized the C in color. And it just does that based on the field and kind of guesses what you would want that to be. I think if these are like camel-cased fields, it'll put the space in for you and just kind of try to infer. But we can also override that and explicitly set the header value using the header name property. Awesome. Well, that was our first exercise. I hope everybody enjoyed that and was able to kind of follow along. If you have any questions at this point, I want to give us a quick break here. Let me know if you have any questions, drop them in the chat. We'd love to answer any of those questions that you might have. But hopefully here in the first couple of minutes, you've been able to quickly see, hey, we install AzGrid, we bring it into our project, we set up our column definitions, we bring in our data, and we're able to display a grid very quickly and very easily. We are using a built-in theme so we haven't customized the look and feel of it, but we'll be able to do that later. And there's lots of opportunities to extend AzGrid with custom components and renderers and things like that.

Okay, great. Let's keep moving along. If there's any questions, drop those in the chat. I love to answer those. I'm always open to answering any questions you may have. Yeah, so let's go ahead and get started with row sorting. Let's see, I got a question. Ben Gutes, what I am missing? Yeah, I'm not sure. Go back and check out the exercise that I did. If you got stuck on that exercise, I know we did that together, and we're going to have more exercises to do. If you go in and you take a look at all of the branches on the repository, so this is the link that I dropped in the chat, let me do that again. And you can go in, and so we were working on column definition O1 challenge, and you can see that these are just kind of going to stack up. We're going to do a couple of exercises around column definitions. And then we'll get into cell rendering and cell editing later in the workshop. And if you're ever stuck, you can always just go to the solution branch. So I can click over here, go to the solution branch. Let me go to source. Let me go to the grid. And now I can see there's the solution. So if you ever get stuck and you're not sure, or maybe I move screens a little too fast, I'll definitely try to, when we get into some of the solutions in the future, make sure that you have time to kind of catch that. But if you ever get stuck or you're typing and you're like, ah, this is too much typing. I just want to like copy paste, feel free to drop over to the solutions. And then you can always just come into the same file that I'm in. We're going to be working out of this grid.tsx component, I think pretty much the whole time. And so you'll be able to just come in, kind of grab that solution and drop that into the stack books that you're working on.

Thanks. Of course. Up to how many rows can be retrieved? Yeah, that's a great question. So Abel's got a question here about how many rows can be retrieved. So in terms of, you know, this is more of like a theoretical or, yeah, a question along those lines. So in terms of the, there's, remember, broadly speaking, there's two different row models for AG Grid. There's client side row model and server side row model. And client side row model is where you're going to give all the data to the grid upfront. So that way, when the user does things like filtering or sorting, the grid assumes that it has all the data. And if you're looking for, if you're sorting or you're filtering for a particular value, you know, the user is, it's going to assume that it's going to filter and sort based on the data that you've given it. On server side row model, it's going to use an asynchronous strategy and it's going to rely on what's called a data source, which will communicate with either your backend or whatever other solution you're using to actually fetch that and do the, fetch the data, sort the data, filter the data, that kind of thing. You can imagine if you're maybe displaying like lots of financial data and you have, let's just say, you know, 10 million rows of data, you would not want to download all that data over the wire and put that all in your client. Most likely it would kind of be a memory, likely a memory constraint there, and maybe just performance and time, how long it takes to get all that data. Yeah, and then when it comes to like filtering and sorting, it might take a long time to go over 10 million records to find what the user is looking for. Whereas if we use server-side row model, we kind of defer to our server or to an API to kind of, you know, filter, sort through all that data. So in terms of how much, how many rows can be retrieved, you can really, as many as you're willing to, to kind of retrieve from your backend and display. So it's going to kind of be, your mileage may vary based on how big your dataset is and that kind of thing. But in general, AG Grid is really performant in terms of the display of the data inside of the grid. So AG Grid uses row virtualization as well as column virtualization. So even if I have client-side row model with 10,000 records or 10,000 rows, it's not going to build, you know, 10,000 rows of data in the DOM and display all of that, and then however many columns it has as well, right? And so what it does is you can kind of think of it almost like kind of like some of, if you've ever done parallax scrolling or things like that, it basically has like a window and it'll render data ahead and below. So that way, as the user is scrolling, it's always ahead of the user to display that data. And then when the user is kind of getting rid of the data and scrolling back up and down on the grid, it knows how to render that data efficiently inside of the DOM because the DOM is expensive, right? And so when it comes to rendering elements in the DOM, aggrid is really smart about only rendering what it thinks it needs to. And it does that both in terms of rows as well as columns. So if you have a lot of data that maybe has like 20 or 50 columns wide, you'll see that it's not going to actually render all of those elements in the DOM, but as you scroll back and forth as the user scrolls, it's going to start building those columns kind of ahead. So that way when they come into view, they're ready to go, if that makes sense. And you can learn more about the column virtualization and how that works inside of the aggrid docs. And you can also disable it if that's something that you're like, listen, this is causing issues or something like that, you can turn off some of these features, but of course, you know, you got trade-offs when it comes to that kind of thing.

Can you filter and sort by multiple columns? Vincent asked the question. Yes, absolutely. You can filter and sort by multiple columns and we'll be taking a look at that. Yep, you betcha. And we're going to get into sorting right now. So let's do that.

Okay, so we can enable and then disable the ability to sort a row using the sortable property on the column definition object. And by default sortable is set to false. You can also provide custom sorting using a comparator property. And that's going to be a callback function that provides, you provided a sorting function that's very similar to array.sort, right? So by default, sorting comes right out of the box of the ADGrid and I've kind of demoed that a little bit and I'll show you that. And we can turn that off if we want in the column definition, we can set that to false. And it'll sort based on your locale.

So let's take a look at that. Here I have my grid again. And all I've done is I've added the sortable property and I've set that to true. So I'm explicitly telling ADGrid that this column can be sorted. Again, sorting is true by default. So this is just kind of a demo, but I can also set that to false and disable that. The default sorting order is going to initially be set to ascending, descending and none. And none represents the sort of the data that was originally provided to the grid. And we can override that by setting the sorting order column definition property to change that behavior if we want. So in this example, I'm gonna be specifying a custom sorting order. And so I provide the sorting order property in an array. And here I'm saying, I only want to allow sorting of the name field to be ascending or descending and not to go back to that default of null. You can also do multi-column sorting, just like you were asking about Vincent. So you can sort multiple columns by holding the shift key and clicking on the column headers. We can specify also the override, the key that we want to use. And so you may want to allow the user to use the control or the command key. So control on Windows or command on Mac or something like that. And so you can specify that with the multi-sort key option to override that behavior. And this is what that looks like. On the aggrid-react component, we're gonna set multi-sort key. And I'm gonna say, hey, I want this to be the command key on Mac OS or the control key on Windows. And that'll override that default behavior.

On the aggrid-react component, we're gonna set multi-sort key. And I'm gonna say, hey, I want this to be the command key on Mac OS or the control key on Windows. And that'll override that default behavior.

Okay, let's dive right into a quick exercise. And this one, I'm gonna give you a couple of minutes to work on yourself. So go ahead and open up the challenge on StackBlitz. You're gonna add the sortable property to a column definition, and then override the default sorting order by specifying the sorting order property on the column definition. And then if you want, go ahead and override the multi-column sorting key by specifying multi-sort key prop on the aggrid-react component. And let me drop the link to this in the chat as well, and you should have this. Just in case if you joined us late, let me drop a link to the site that we're on. So you'll find all of the content right here that I'm sharing. So I'm on aggrids, or excuse me, I'm on LiveLoveApp. That's the company that I work for. We've got an aggrid with React course, and we're looking at the row sorting section. And we just covered this content, and we're down here now at the exercise. And here's the solution for you. And if you wanna follow along in kind of a slide mode, you just hit the dot or the period key on your keyboard, and that'll bring up this view. You can hit escape to go back out of it. So go ahead and open up that challenge on StackBlitz. I'm gonna do the same thing. So what we wanna do for this exercise is we're gonna add the sortable property to the column definition, and then we're just gonna override the default sorting order by specifying the sorting order property on the column definition.

Let's go ahead, if I click on a column, right now you can see that sortable is set to true by default. And I can do multi-columns sort by holding the Shift key. So I can hold Shift, and I can sort first by name and then by color. And you'll see that AGGrid adds this one and two integers here, and that informs the user that I'm sorting the name column first, ascending, and the color column second, descending. And then I can kind of reset that back. And then when we go back to the original state where there is no arrow up or down, that is the null state, or the sorting is set back to whatever the sort was of the data that was provided when using client-side row model. So let's set sortable here, and sortable, let's just set it to false. And now I'm clicking on this header, and I can't sort it, but I can still sort my column. And I can come down here, and I can override that multi-sort key, and I can set that to be the Control key. So now instead of Shift, on Windows it'll be the Control key, and on Mac it'll be the Command key. And now if I want to do, if I got to set this back to true, now I can sort, I'm going to hold the Command key, and now I can do a multi-column sort. Yeah, using a different key. Fantastic, if there's any questions, drop those in the chat, and I'm happy to get to those. We also have the solution here in the course content, if you want to refer to that. Oh, I didn't set the sorting order. Let me review that real quick. Yes, so here's my sorting order, and I can override that, set that property on the column definition, and I can set that to, in this case, I'm going to override it to go ascending, then descending, and not allow it to go back to the default state.

Okay, great. Let's talk about default column definitions. So to avoid some unnecessary repetition as you're setting up column definitions, maybe you want to disable sorting for all of the columns, or you want to override the sorting order for all of the columns. We can use what's called a default column definition. So every column will inherit the default column definition first, and then each column definition can override those default values.

Let's take a look at an example. So here I've defined my default column definition, and this is going to be of type column definition. I'm going to set sortable to true. Now, when I have my column definitions, all of those columns are going to inherit that default column definition that I've specified, and I need to set the default column def property on the AG Grid React component to provide it the default column definition.

Alright, let's get right back into another exercise. So go ahead and open up that exercise on StackBlitz. We're going to define a new default column def constant in the component function. We're going to set the sortable property to true, and I want you to bind the default column def constant to the default column def property on the AG Grid React component, and then we can override that sortable property to false for one of the columns if we want.

We're going to set the sortable property to true, and I want you to bind the default call def constant to the default call def property on the AG Grid React component, and then we can override that sortable property to false for one of the columns if we want. Let me grab this link and drop it in the chat for you. So why don't you go ahead and open up that exercise, and then we'll go through and do it together. Let's go ahead and open up the exercise on StackBlitz. We're going to define a new default column definition constant, so let's do that first. So I'm going to come over here. Let's see, const default. I'll dot. And this is going to be of type call def, and then I can specify the T data generic to be my row data, and I'm going to set sortable to true. Come down into my component, and we're going to set the default column definition just like that. And so I should be able to sort all of these. Now I'm going to override that, and I'm going to say for the name field, let's set sortable to false. And so now, what did I do here? Allow sortable. Maybe it didn't reload. Oh, I didn't save. Okay, so now I can, if I'm clicking on the name, column, header, I can see that I can't sort it, but I can still sort by color. And you can use the default column definition. What I like to do here in a project oftentimes is you might have a couple of different defaults based on like different styles or types of grids, but it's really great to be able to kind of put those in a module, or a library, or something like that, and export that, and then you can share that across the project. If you have like multiple projects in multiple repositories, you can also kind of publish an NPM maybe to an internal repository, or something using an artifact, like what is the artifactory, or whatever, trying to think of the name of the product. You can kind of have your own private NPM, or you could, if you work for a big company that has on-prem, a lot of on-prem stuff, you can build out your own kind of custom repository, and publish a library, and you can export those default column definitions, use them across multiple projects across your entire organization, and then if you're using a solution, like a mono repository, you can have a library that exports that default column definition constant, and then you can use that across all of your AG Grid implementations, and all of your projects. And that becomes really helpful just to enforce, or to provide, kind of some of the same functionality, because we're just looking here kind of at the very beginnings of AG Grid with sortable. As you can imagine, there's lots of features, and things that you can do with AG Grid beyond sorting, and with the default column definition is where you could really kind of wire up and provide some advanced functionality that you want in all of your grids, and share that across your projects.

AG Grid ships with several provided filters. You can filter text values, numbers, and dates, and then there's also some additional filters that come with Enterprise Edition, like filtering of sets. The text filter is the default, and we can enable filtering by setting the filter column definition property to true. So we just turn on that feature on a per column basis, and of course, we just learned about default column definitions, so we could enable filtering for all columns by default by setting that property in our default column definition. Okay, let's take a look at the text filter. So pretty easy here. Here's our column definition for our name field, and I'm gonna set filter to true. We can also explicitly use the provided text filter, and you'll see this when we get to the date filter and the number filter. The filters are registered using a string, and AG Grid provides some provided, like the built-in filters, and those will always start with lowercase ag, and you can register and build your own filters. And so in this instance, I can explicitly set the filter to be the ag text column filter if I want. Again, the Boolean value true will use the text column filter. We can also use the number filter. So if we want to be able to filter based on integers and floats, we can use the ag number column filter. So in this case, I've got my products, and my product has a price associated with it, and so I can enable the number column filter for that price column. So that way the user can filter based on the price of the products, and that'll allow them to filter based on like greater than less than, equal to, and those kinds of filter options. And we'll see that here once we get into the exercise. I also have a date filter. So AG Grid comes out of the box with a provided date filter, and to use that I set the filter to ag date column filter.

What we want to do in this exercise is we're gonna set the customer name column to use the text filter. We're gonna set the account number column to use the number filter. And we're gonna set the date of order column to use the provided date filter. And then for the total column, we'll also use the text filter. So go ahead and kind of set those up. Again, we're gonna be setting the filter property based on the strings. So what I'm gonna do is I'm gonna give you a couple of these, I'm gonna just drop these in the chat. Again, you can always look at the solution if you don't remember exactly how these are spelled, I don't expect you to. But let me drop those in the chat so that way you have those as well. And remember, the text filter is, oops, let me go back. The text filter, you can just set it to true or you can use kind of the full name of the filter. There's that one as well. So we'll go back to our exercise. Go ahead and open up that exercise on StackBlitz. Let me copy that link for you. Open up that exercise on StackBlitz. And you're gonna see we got a bunch of columns specified. And let's add some filters to those columns. So let's add the text filter to the customer name, number filter to the account number, the date filter to the date of order, and the text filter to the total column. And then I'll do that exercise. We'll do it together here in a minute or two. Why don't you take a couple of minutes and work through that little exercise. As always, if you need to refer to the GitHub to take a look at the solution, feel free to go ahead and do that. Yeah, it is a really nice filter, being able to quickly add some filters to the columns. And of course we can, like I mentioned early, we can enable, say we wanna just have a text filter available on all columns by default. And then maybe just some of our columns, we wanna override that to be specific types of filters. And out of the box, you get a text, a number, and a date filter. And we're gonna talk about a little nuance here to the date filter in one second. Because you might run into an issue with that one. But yeah, really nice just having that simple filtering right out of the box for our users to use. Go ahead and drop a thumbs up in the chat. I wanna make sure that you have enough time for these exercises. In the beginning, I move a little quickly through these just because I don't want you to, the point of these exercises is not to, do you get your muscles and your fingers, it's not a typing course. I'm not trying to teach you how to type column definitions. So if you feel like, ah, I just wanna go copy-paste things, don't worry, like that's the way to go here with some of this stuff. So yeah, drop me a thumbs up, great. That lets me know that you're good to go on the exercise. And even if you didn't do the exercise and you're just like, let's just keep moving, Brian, I think I got it. I don't need to do it or whatever. Just give me a thumbs up, that tells me that everybody's ready to move on so I'm not moving too quickly. I wanna make sure you have time to play around with this product and get to learn some of it. All right, I got a question from Artem. Can we use some custom components in the filters? Absolutely. I mean, insert custom input for some field with custom logic or design which filter data in the grid. Yes, is the answer. As you can imagine implementing that, we'll get into some of the custom components today, but you can implement custom components for filtering, for editing, for cell rendering, all kinds of things. So you can use a custom component for the filter. You can use a custom component for the floating filter bar if you want.

So you can use a custom component for the filter. You can use a custom component for the floating filter bar if you want. So there's lots of opportunity there to build out custom filters. Yeah, cause you can imagine all kinds of advanced scenarios where let's say you're building like a financial product and maybe you have like a formula cell where the users can input like a formula to compute some sort of value. And you might want to have a custom filter so that way they can filter those formulas, say only show me the formulas that are referencing this other value or something like that. And so you'd want to build a custom filter to do that.

All right, let's dive into that exercise. All right, so we're going to set the text filter on the customer name. I'm going to come over here. Here's my row data. Let's go down here to the customer name. I'm going to set filter to true. And as soon as I do that, now I have this hamburger menu, whatever you want to kind of call it, context menu, and I can come down here and now I can filter this. And you can say only show me the ones that contain the string Jones. And I can build these up as you see. And so now it's filtering and showing. And I get this little icon here, and this tells AGgrid that, hey, this is filtered. This customer name is filtered. And I come in here, I can clear this out and I can go back and show everything. And I come over to the account number. I have no menu because I haven't set filtering on this. So let's go ahead and let's set filter. And I think we said for account number, we're going to do AG number column filter. So let's come over here. And now I get to the number column filter and it looks a little bit different, right? I can do equal to, greater than, less than, between, that kind of thing, right? So that's really handy to do. And I of course still have sorting here. And for the, why that keeps coming up, sorry about that. I must've hit something to get the iCloud password here. AG date column filter, I don't think iCloud is going to be able to know how to do that. Let's go over to our date of order. And now I get a date filter. Yeah, pretty cool. And so now I can, the user can provide a date. Notice that this is using the built-in like calendar and that kind of thing. So you're going to see that this is going to be formatted like ENUS for me. For you, it's going to be based on your locale because it's coming from the browser. If you don't want to build, if you want to have like a custom date picker or something like that, of course this is where you can build out a custom filter and you could use MUI or you could use Chakra or you could use some other component where maybe you have your own calendar or date selector or something like that. And so this is a little bit different here. I can see that I can filter based on the date of the order. And then for total, I can also come down here and I'm going to say, hey, let's use the AG text column filter. I type out the whole thing instead of true, don't know why that keeps popping up. Instead of true, I'm going to use the text column filter. That's just a little bit more explicit if you will. And here's my text column filter that allows me to filter the values. And here's our solution. So one of the things I mentioned is when it comes to date filtering and using kind of dates and timestamps, you might be wondering like, how do I use date filtering if I have like ISO strings or something like that? And that's a great question. So out of the box, the date filter uses JavaScript and it's really easy to use. So out of the box, the date filter uses JavaScript date objects. So if your backend is giving you like ISO dates or some sort of other date representation string, you're going to need to parse those values, right? So before you wire up the data to the grid, you're going to use like a used memo or maybe you're using Redux or something like that. And you're going to have a selector or something that kind of depends on what you're doing. You're going to want to compute that date and you're going to want to do like, if you're using Luxembourg or date FNS or moment or something like that, a date library, you're going to want to parse that ISO date string and get it to a date object, a JavaScript native date object. And that's how AGGrid works with those values out of the box in order to be able to do the filtering. And we'll see the same thing when it comes to kind of sorting as well. Because otherwise it's just going to assume if you give it a string, that's an ISO string, it doesn't know that it's a date and it would just filter it based on like whatever your locale alpha numeric sorting is set to. Right? The other thing that you can do is if you don't want to use like a Redux selector or like a used memo or something like that to compute the data and change it from, parse it and all that thing, you can also use another method. And that is where you can specify that comparator function. Remember when doing filtering or sorting, we can tell AGGrid, hey, you can go ahead and you can specify an actual comparator function. And that comparator function is going to use the same implementation as array dot sort. So you're going to give it a callback function and you're going to either return negative one, zero or positive one to tell it that A or B is less than or equal to or greater than for that value. So when it comes to filtering and sorting of timestamps, if you don't want to convert them to date objects in your row data, you can use that comparator function. And AGGrid is going to call that comparator function to compute the filtering. And it'll call it with A and B and all of that. And you'll have to implement that comparator function to do some sort of custom filtering or sorting. And it doesn't necessarily have to be just with dates. You can use that comparator function for any sort of filtering or sorting. And that comparator function is something that you can leverage to do that. So if you are just giving your data iso strings in your comparator function, you'll get access to that data. And then you can say, you know, parse A, parse B, return the appropriate value and that kind of thing. So, yeah, so that's very helpful to know when it comes to date filtering. So you have kind of two options. You can use memo or Redux or something like that and you know, get those iso timestamps into JavaScript date objects. And then out of the box, the date filter works, or you can use that custom comparator function. And here's an example of that custom comparator function. So in this example, I'm using the agdate column filter and there's a property called filter params. There's also like a sort params. There's other like cell renderer params. There's other things like this that exist on the column definition. And so here's my date of order column. I've got it wired up to a field and in my date of order, I just have iso date strings. And so then here's my comparator function that I'm given. And so they give me the filter value as well as the cell value. And then I'm gonna go ahead and kind of parse out that cell value and I'm gonna return the appropriate value based on the cell value compared to the filter value that the user has set. So a little bit of nuance there, but wanna make sure that I highlight that. So when it comes to the filter and dates, either use JavaScript data objects in your row data or use the comparator function to allow you to do the filtering in this example with the date column filter.

And I think maybe I missed a question real quick. Sorry for joining the session late, can you share the reference resource links in the discussion window panel? Absolutely. So yep, you dropped a link there for us and then let me get you a link of where we're at here. We're just finishing up the column definitions and we're about to jump into cell rendering. Now I'll get you a link to the course content, load that up. And that's where we're at. Okay, we are at five minutes after the hour and I said that we would take two short breaks. So we're gonna take a quick five minute break here and then we're gonna dive into cell rendering. So I'm gonna step away for a couple of minutes. I'm gonna leave the recording and leave everything running as it is here. I'm just gonna mute myself and step away, take a quick break. And then let's come back here in five minutes. So for me, that's gonna be about 10 after the hour. So 10, 10 for me. And then we're gonna pick up and dive right into cell rendering. So take a quick break, get some water, stretch your legs. We've got plenty more content to dive into with cell rendering and we'll take a look at editing components and then we'll get into AG charts towards the end. So excited to do that. So we'll see you all in a few minutes.

All right, we are back. It is a little after 10 after and we had a good break there. Hopefully everybody is excited and ready to jump back in. And if not, if you need to do some more work or catch up with stuff, no worries. The workshop is being recorded by the React advanced organizers. And so they'll be able to send that out and you'll get a link, I'm sure, of the recording. The course content that I've shared with you at the liveloveapp.com website is completely free and available to you after the course. And if you ever need help with the AG grid implementation, reach out to us, we'd love to help you. So you can go to liveloveapp.com. We provide a free architecture review. So we'll spend about five to eight hours, so a good full day of our effort. We'll take a look at how your application is working, the performance, look at some of the things that you're interested in us looking at, or help with AG grid implementation. And at the end of that free architecture review, we provide you with a PDF with some recommendations. You're welcome to use that as you will, and we hope that you'll be able to kind of come back and work with us, because we'd love to help you with your AG grid project. Okay, let's take a look at cell rendering.

So without any customization, and in the simplest form, each cell in AG grid is rendered as a string based in the field specified in the provided row. And you'll see that AG grid actually sets that value inside of a div element. So if we go and inspect the grid, we look at each cell in the grid, we'll see a div with some classes on it, like agcell, or agod. For rows, I guess, the rows, all the cells are gonna be inside of a row div element. And inside each cell is just the string, it's just the text. So they just set the text value programmatically on that div element. So they create the div element, they set the text value, and they set it to base out of the row data and the field, they set it to the value. And it's pretty simple, right? But oftentimes when we're working with AG grid, we don't wanna just display really simple generic strings. And when it gets a little bit more complicated than that, that's where we can start to leverage the pipeline for rendering cells. And we're gonna take a look at that cell rendering pipeline today. So the first thing we're gonna take a look at is the value getter function, then we're gonna take a look at the value formatter function, and then we're taking a look at a custom cell renderer function or component.

The value getter function is a callback function that we provide to AG grid that enables us to provide data to a cell based on that function. And so we can use the value getter function to get row data for columns where the use of maybe the field property is just not an option. And remember the field property can take a dot notation string. And so even if you do have kind of complex row data, if you need to kind of dive in from like a user object to an account object or something like that to get at a specific property, you can do that. And, but the field property, you can set in the column definition, you could set that field property to be a, like a dot notated string that specifies where to get that field for maybe some nested objects or something like that. But we can also use the value getter function where we might wanna maybe mutate the data or something like that, before we actually provide the data to the grid, or maybe we wanna compute that data. And so the value getter function is invoked by aggrid for each cell. And the function is gonna be invoked with a value getter params object. And that's gonna be of type value getter params. And then the generic is whatever the T data generic is that we specified for the column definition. And we'll take a look at that here in a second.

Let's take a look at the value getter params interface. So again, this value getter is a callback function that we provide, and aggrid invokes that for each cell on our behalf. And that value getter function is gonna be called by aggrid with an object that we can use to kind of compute that value or something like that. And so we get a bunch of things in this value getter params object. Some of these things right now might be like, I'm not sure what I would ever use that for, and that's okay. And then other things make a lot of sense. So right off the bat, we get the data. So for the row data, as it's iterating over the array of the row data, we get the entire data object back for that row for the cell that we're trying to render. And so we can access actually like other properties in that row data. And when you're building your row data, you could stuff other things in there, right? And you might need a value and a label and maybe some indicator thing that you wanna show inside of a cell, right? And so when we use the value getter function, we get the entire data for that row, and we can cat these things together or if statements or switch statements or whatever we need to do inside of this function. And it's just JavaScript function, there's nothing special about it, but we can kind of compute whatever we need to do. We also get the grid API, we'll talk a little bit more about that in the future. The grid API allows us to interface directly with the grid programmatically, the column definition for the actual column that we're working with. We have the column object, we get the column API, which is another API that allows us to interface directly with that column programmatically. Context is a larger thing that we can wire up similar to React, we can provide context for our grid, and so we can have kind of some global context, which is available to us in this value getter params. We talked about the data that's gonna be provided to us. We also have a get value function that it provides. So we can say, hey, get me the value for this field in my row data, and it'll provide that data to us. And then we also get access to the underlying row node for this particular cell. I've kind of outlined that here in this next slide, so feel free to reference this in the future. Again, as I mentioned, the grid API is really useful because it allows us to programmatically interact with the grid, we can add event listeners to the grid, we can access the clipboard and lots of other things. The column API is also very useful and allows us to programmatically interact with a specific column. So we can programmatically, let's say we put a button inside of one of our cells. So we've got a grid, we've defined a column, maybe we want a column called actions or something like that. And we've got buttons inside of that. Remember, because we're not just displaying text anymore with our cell rendered, it's maybe we want to actually invoke some sort of action or something like that. So that's where we can start to interface with a column API and do things like moving columns, pinning columns, sizing and things like that. And then there's also a row node, and a row node represents the single row in the grid. And that allows us to do things like row selection, updating the row data, adding event listeners to the row and more. Okay, that was a lot. So let's take a look at a good clear example of using the value getter. So in this example, we've got our grid and I'm specifying our column definitions. And I've got a price column.

And I've got a price column. And what I want to do is I want to compute the value of the price, rather than just wiring up to a field and setting the price for my product. I want to do some sort of computation for this price. And in this instance, what I want to do is I want to round that value off. And so I'm going to provide a value getter function. It gets called by ag grid with my params object. And I'm going to say if I don't have any data, params.datas.undefined, just return zero. And you might be curious, well, when are params.data going to be undefined? When you get into things like row grouping, for example, there are times when a cell might not have, or a row might not have any data. And so we need to check for that first. And we need to say, before we start accessing price on row data, we need to make sure that params.data is not undefined. Otherwise we'll get a classic runtime exception in JavaScript. You tried to access price of undefined. And we'd see that in our console. And so we're going to check for that ahead of time. And then otherwise we're going to use a math.round function and we're going to round the price. And so now we're computing this value for that cell. Now, of course you could do this if you want to ahead of time for all your data. You could use the use memo hook or redux selector that creates another, calculates the price or adds tax, or the user enters specifically like here in the United States, you might select like your state or your province or your region that you're from. And there might be various taxes that are applied to that price and then you can compute it. And you could do that all ahead of time with all of your data if you want. This allows us to do it kind of a more lazy fashion. And then this value getter is going to be invoked every time that cell is being rendered.

So let's take an example or an exercise. And let's take a look at the value getter function and really get our hands on this. So let's open up the exercise on stack blitz and note that the total column is currently empty. I want you to use the value getter to sum the total for each order. Now this is a little tricky here. So I want to definitely reference our solution. So let me come into cell rendering. Let's take a look at our solution. Wait. We are in the value getter. Okay. I'm going to pull out a little bit of this code here for you and give this to you because it's a little tricky summing up the order data in our sample data set. And I'm gonna drop this here in the chat and let me give you the link to it as well. Cause I don't want you having to write a reduce statement or filter and all this stuff. But what we're gonna do is our data is going to provide us with like an order and we're gonna for that order that item, we need to go and look up the product. We need to take the product and then we need to get the price from it. And so I've written the code here to do this. And I don't want you to have to worry about writing that code. If you want to write that code, go ahead and take a look at the hints that I have for you here. But I really want you to learn how to use a value getter function, not how to sum the product price for this particular data model. And so we're gonna implement the value getter and then let's go ahead and use that little bit of code that I sent you to actually compute the total for that order. So go ahead and open up that stack blitz. I'm gonna copy the link as well and drop that here for you and let's go down to our total column. Here we go, great. So we can see that I don't have a field property set for my total column. If I scroll over, I'll see that my total column is empty. And so what do I want to do is I want to compute this total column, right? So if we go back to our data and take a look at data.json. We've got our customers, we've got accounts, products, and for an order, you can see that in our order, we have order items, which references the order ID, the product ID and the quantity. So here I've got my order with a customer name, an account number, the date of the order and I want the total. And so that order, I'm gonna need to sum up all of the items that are in that order based on the order ID. I'm gonna need to look up the product and determine that order total. And so I don't want you to have to write that code and so that's why I've given that to you. Let me switch back to grid.gsx. And so go ahead and add a value getter into this. So we'll do value getter. I feel like I've got to turn this thing off somehow. And the value getter is gonna be a function that gets the params. And inside of those params is where we're gonna return that value. If I just do value getter and return zero, I can see that I get zeros for all of them. And so what we wanna do is go ahead and write out the value getter. You're gonna check for the data. You're gonna do something like this, const data equals params.data. And you'll see that params.data can, it can be undefined. Or it's gonna be part of our row data. And so we're gonna check if params.data is undefined. And if it is, we'll just return an empty string or a zero. Otherwise, we're gonna compute that total. So why don't you go ahead and take a stab at that. I'm gonna give you a couple of minutes to work on that. And then I'll come back and finish up the exercise. Again, here, the takeaway is certainly not to learn about how orders and products are related in this faker data that I generated. The takeaway here is that we can use a value getter. We can get access to the row data with the params. And from that row data, we can compute the value that we want to be rendered inside of a cell.

All right, let's go ahead and dive into this exercise together. So I've got my data and I'm gonna say, if I don't have any data, let's just return null. And then I wanna get the order items off of that data. So I'm gonna say order items equals params.data.orderitems. And then I'm gonna return this calculation, right? I'm gonna grab all of the items, the products and that kind of thing, and then sum up all the prices of the products. And. Params, that's helpful. There we go, now we're getting some good help here. And I actually just do that, I'll get rid of that one. What did I do wrong here? Data.products does not exist on type row data. Oh, I think it's because I messed up. I have data up here. Let me fix that. So we don't wanna make a local, let's do params.data, and if not, params.data. That should help. See if we have a total now, excellent. Now we haven't formatted it yet, so it doesn't look like a currency, it doesn't have Euro or USD or something like that, just has numbers in it. But I'm computing at runtime the value of those cells. And that function is gonna get called and as I scroll down the grid, it's gonna again remember we're doing virtualization here. It's not like it's rendering all of the data upfront inside of the grid. So if I were to put like a breakpoint or a log here, and then let's load up the console. That's fun. Cool. So there I can start to see my tests. I'm not sure if this is coming from something else. And as I'm scrolling down, I am getting these, these other errors. I'm not sure what's happening. But you can see my test is coming in. Additionally, as I scroll, we can see that we're getting more of these. That's because of the row virtualization, right? So AgGrid is really intelligent about what, it's only gonna try to render in the DOM what needs to be rendered in the DOM to make it really highly performant. And so as I'm scrolling the data up and down, it's gonna go and render those cells. And in order to render those cells, it knows that I have a value getter provided to it. And it's gonna say, okay, now that I know that I have a value getter function, let me go ahead and invoke that value getter, get that value, and then I'm gonna use that to actually render the cell. And so it does that at runtime as you're rendering each of these cells.

Okay, the one thing that I did wanna talk about real quickly is that you can also build reusable value getters. And this is just, again, learnings over years of working with clients in AgGrid. We often see that folks are copy pasting value getters from grid to grid, and then they end up, you might end up with a regression because you fix something in one value getter, you tweak it here, it doesn't get moved over to the other one. And so you kind of can end up having like code implemented. You know, this value getter is just a pure function, right? It's just, hopefully it's a pure, it should be a pure function, where if it, you know, given the same parameters, it returns the same value. And so it's oftentimes, we've learned that over time, it's really important to build kind of maybe like a catalog or a library of reusable value getters that you can share amongst your code base.

And so providing a value getter inline, it's certainly perfectly reasonable to do. However you may want to have more reusable solution. And that's where we get into building maybe something like a higher order function. So in this case, there's a bit of TypeScript here. So maybe just kind of blur that out for a second. Really what I wanna do is I wanna have a multiplier, and I wanna say, hey, I wanna multiply this value by something, and maybe it's like tax, taxes or a tax rate or whatever it is for my total column. And so what I'm gonna do, I'm gonna create a higher order function that returns the value getter function. And so here I can provide it with maybe like a specific multiplier that's coming out of my row data. So this might be better called field. So this is the field to compute it by, this is the multiplier to compute it by. So maybe my row data, I've got like a total, and I've got a tax rate or something like that. And I want to calculate that at runtime. And so you can create a higher order function to do that. And then export this out and then use this in all of your grids. And then the function is actually gonna be invoked by a degree with those params. And that's where I can reference things like the field that I set up and the multiplier that I set up to actually compute and calculate what that might look like.

Let's take a look at that value formatter next. Now this pipeline, of course, is called in order, right? And so, you know, aggrid is gonna first, if you have a field property, it's gonna go get that data, wire up the data based on the field. If you have a value getter, it's gonna use that to get the value. And then subsequently it's gonna use a formatter. And then subsequently it'll use a render. And so those are kind of in sequence in the pipeline. And so now that we've, we use value getter to get a value, or we have the field property to get a value, we can also use a value formatter to actually format that value. Again, we're not rendering any HTML or doing anything custom inside of this grid yet anyways, but we might wanna do things like format the value to be currency, or we wanna format the value based on our application's needs. So after the cell value is known, we can optionally specify that value to format our callback function to format the value. The value formatter function is invoked by aggrid for each cell. And it's also gonna be invoked with this params object. And this is what that params object looks like. It's gonna, a lot of the same stuff we saw in the value getter, right? We've got our grid API, we've got our column definition, our column, our column API, we get the data. This time we don't get, there's not a get value function that is provided as part of this value, the params object. Here, the value has already been computed or known. And so we actually get the value as well as the full row data. And so we can use that to determine how we wanna format the value.

This is the way that we found that works really well for our clients.

Let's take a look at that value formatter next. Now this pipeline, of course, is called in order, right? And so, you know, aggrid is gonna first, if you have a field property, it's gonna go get that data, wire up the data based on the field. If you have a value getter, it's gonna use that to get the value. And then subsequently it's gonna use a formatter. And then subsequently it'll use a render. And so those are kind of in sequence in the pipeline. And so now that we've, we use value getter to get a value, or we have the field property to get a value, we can also use a value formatter to actually format that value. Again, we're not rendering any HTML or doing anything custom inside of this grid yet anyways, but we might wanna do things like format the value to be currency, or we wanna format the value based on our application's needs. So after the cell value is known, we can optionally specify that value to format our callback function to format the value.

The value formatter function is invoked by aggrid for each cell. And it's also gonna be invoked with this params object. And this is what that params object looks like. It's gonna, a lot of the same stuff we saw in the value getter, right? We've got our grid API, we've got our column definition, our column, our column API, we get the data. This time we don't get, there's not a get value function that is provided as part of this value, the params object. Here, the value has already been computed or known. And so we actually get the value as well as the full row data. And so we can use that to determine how we wanna format the value.

And so we actually get the value as well as the full row data. And so we can use that to determine how we wanna format the value.

Let's skip that slide, I just talked about that. So let's take a look at an example. So here's my price column. And I wanna have a value formatter, and I'm gonna receive that params object. And I'm gonna create a new number formatter using the international.numberFormatter class. So I'm gonna new that up. And I'm gonna use en-US for my formatter. Your mileage may vary based on your needs, of course. And I'm gonna have, provide a minimum number of fraction digits and a maximum number of fraction digits. And if the value is undefined, I'm just gonna return zero. Otherwise, I'm gonna go ahead and call that format function. And I'm using the number class here with a constructor function in order to kind of cast the value from a string to a number to be passed into my number formatter. So if you haven't used this before, or maybe you're using a library to do some number formatting, you could use that in here as well. And you can, in this instance, this is what I'm doing to kind of format my values. And so I wanna create numbers with a minimum and maximum number of digits or fractions.

Fantastic, let's go ahead and open up an exercise and learn how to use the value getter function. Open up the exercise on StackBlitz and add a value formatter to the total column. Format the value using the number format class. Use the number format class to create a new number formatter with specific formatting options. Handle undefined values by returning an empty string. You can change the currency and refer to the MDN number format documentation for more options.

Now, let's dive into the value formatter. Add the value formatter function to the total column. Check if the value is undefined and return an empty string if it is. Otherwise, create a new number format using the currency style. Make sure to provide the correct arguments for the number format options. Test the value formatter by opening the exercise on StackBlitz and see if the formatting is applied correctly.

Next, let's discuss cell rendering in AG Grid. After getting the value for the cell using the field property and the value getter function, we can optionally format it using the value formatter. The third step in the pipeline is cell rendering, which gives us full control over how the cell is rendered in AG Grid. Cell renderers can be expensive, so it's important to be mindful of performance. We can use lightweight components like vanilla HTML, CSS, and JavaScript, or use frameworks like React, Lit, or Stencil to create performant cell renderers. It's essential to optimize cell renderers to avoid lagging scrolling and low frame rates.

Do mdn number formatter. Here we go. Here's our docs, good old Mozilla. And that's where you can see what some of them are. Here's your, I know we had somebody that's originally from Germany, maybe you wanna do something like that. Feel free to do whatever. The goal here is to learn the value, or value formatter. Oh, did I, I messed up here. I think this is a typo. Should be, say, value formatter. And let's go ahead and dive right into our value formatter. So we're gonna add this to the total column. So that's gonna be a function that's gonna get called with the params. You can use an arrow function, or not, here. I'm gonna say, if not params.value. I don't have a value. Let's just return an empty string. Otherwise, we're gonna return new, number format. And we're gonna do currency, US, do you think is how this goes? I'm trying this right off the cuff here. Let's see how it goes. See if that comes out okay. That does not look right. There's another thing here. What is it called? Currency, sign, no. Let me go back to my solution here. Style currency, that's what it is. There we go, great. Now we got US currency, and got the dollar sign, gives us some commas, and all that. Looks great, nice value formatter. Again, we can use reusable value formatters by creating a higher order function. In this instance, what I'm gonna do, is I'm gonna provide the number of digits, and then I'm going to allow that to format the value. So this is gonna be a higher order function. Then I'm gonna call inside of my column definition. I'm gonna say, hey, I want you to use a decimal value formatter with two digits, or four digits, or zero. And then, I've kind of got this kind of wired up and easy to go, because it's referencing the digits to the closure. And an example of this is I can use value formatter, and then I can just call my decimal value formatter higher order function, and say I want the price to be formatted with two decimal places. And that'll return a value formatter that'll be invoked by AG grid. Yeah, so it makes it really easy to kind of make that reusable.

All right, let's talk about cell rendering next. So after the value for cell is determined, and we can get the value for cell using the field property, we get the value for cell using the value gather function. We can also optionally format it, just like we learned with the value formatter. We can also then, in this, like the third step in our pipeline, is where we can use a cell renderer. And this really gives us full control over how the cell is rendered in AG grid. Remember, every cell in AG grid is within a div. And right now, without any sort of custom rendering, it's just putting text inside of that grid. Now, we can format that text, and we can format it as currency, or numbers, or whatever it is, right? But we haven't done anything really fancy yet, right?

I do want to note that cell renders can be expensive. So just be careful here, because you're providing the cell renderer function. And that a cell renderer, remember, just like we saw in that demo where I did the console log, every time a cell is rendered, AG grid is going to invoke this function. So if this function is doing something really heavy, or wiring up something, or using like a really, really heavy component, or something like that inside of that cell, you're going to kind of face that performance penalty when it comes to actually rendering each of those cells. You can, of course, there's ways to get around this. We can use a really lightweight component, we can just use vanilla HTML, and vanilla CSS, and vanilla JavaScript inside of our cell renderer. That's going to be pretty performant. We can use React components, those are pretty performant. If we want to do something like use Lit or Lit HTML, or Stencil for our components, those tend to be pretty performant. So there's lots of ways to kind of tackle this, but just keep in mind, if you run into kind of lagging scrolling.

If you're scrolling the grid, and you're seeing really low frame rates, frames are being dropped, the user experience kind of looks like the grid is chugging, or, you know, not very smooth. A lot of times that can be due to a cell renderer. And these cell renderers are, you know, very powerful. Like Spiderman's uncle says, you know, with great power comes great responsibility. And so we do need to be careful when using the cell renderer functions, because it does get invoked every time we're rendering a cell. So a cell renderer for a column definition accepts the following. We can get undefined when we render the cell, and that'll just render it as text content. We can also return a string that references a registered cell renderer, or we can use a React component.

So let's take a look at that. Sorry, we'll take a look at, for the cell renderer, if you just do cell renderer colon undefined, it'll just go back to the default. So the reason why I mentioned this, I want to clarify this first point real quick. If in your default column definition, you have like a custom cell renderer to render all cells using a specific way, you might want to override that. And so that's where you can say, in your column definition, you can say cell renderer colon undefined. And that's going to tell AgGrid, no, no, no, don't use, I just want you to go back to what you were doing before, just render this text content. We can also specify a string to a registered cell renderer, and the reason why you might want to do that is you might want to serialize your column definition and store that or persist that either in a backend or local storage or session storage or something like that. And if you are referencing a React component, like option three, you can't serialize that. So this is where you might want to have your column definition be serializable. And you might reference a string, and then in more of a global context, you register from that string to a React component, if that makes sense. And you wouldn't serialize that part of it, right? But you might say, you might allow a user to change things, like customize their grid, and they want to have like a save button to save the way their grid looks, right? Maybe they chose for this column, they want to show a particular thing or whatever it is. And so you want it to be serializable. And so that's why we have option number two, and then option number three, is what we're gonna get into.

So before we take a look at that function, let's take a look at the params. This is the cell render params. I think I have another typo here I should fix. The cell render params is gonna be called with a lot of the same things as the value formatter function, that we'll get the value, we get the data and that kind of thing. And we'll be able to use that params object to render our cell. So here's an example. So here I have my price, and in this instance, I'm really doing the exact same thing I was doing with value formatter. I just wanted to kind of bridge the gap between these two. So here I'm saying for cell render, here's my params object. If I don't have a value return null, otherwise let's return that currency. And here, that's all I'm doing. I haven't returned or done anything fancy.

So what I want you to do is, rather than using this kind of number format, like we did before with the value formatter, we can also return from the cell render function. We're not using a component yet, we're just having, there's just a vanilla function. We can actually return a string that's HTML that will be rendered as HTML inside of that div element. And so, let's take a look at an example of doing that and do it together as an exercise. So the goal of this exercise is to learn how to use the cell render function. So we're gonna open up this exercise on StackBlitz, and we're gonna add a cell render to the date of order column. And what we're gonna do is we're gonna return an icon. We're gonna return some JSX that includes a material icon next to the formatted date string. So let's take a look at this exercise on StackBlitz together. I'm gonna copy this link and put this in the chat for us. Close this. Oops. I'm gonna grab, I wanna return this bit of code here. And I'm gonna drop this as well so you can follow along with the exercise. I don't want you to get caught up with trying to return a bunch of styling and that kind of thing. So let's go back here. And open up the exercise on StackBlitz. And we wanna do this for the date of order column. So let's go down to the date of order, and we're gonna do cell render. And we're gonna get a params object. And again, we can return string HTML, or we can return JSX. But I'm gonna just return a little test here first. And let's see how this comes out. This is my date of order. I can see that I'm now rendering test. And what I wanna do is I wanna inspect this. And let me get this chat window out of the way. And I wanna come into this element. I'm gonna bump up, oops. Can I just bump up the font here? Now this is gonna be a little tricky here, but let's do our best. Okay, so here I have my div, right? And you can see that this is a cell, right? If I go up to the cell before it, we can see that this has a value inside of it, this 497. And note that this is just being rendered as text content. So AgGrid took the value, put it inside of this div and here's my text content. But now, look what I've done here, is because I'm returning this JSX. And again, you can return a string HTML as well. I think you can also return an HTML element. So if you're really good with Vanilla JS, and you wanna do like document.createElement, create a div and add the children and do that. Now it's very performant. You could do that. But what I'm showing you here is that inside of the cell, I'm actually rendering kind of like some complex HTML. Right now I just wrapped it in a div, but I might wanna like, make a button. And now if I come over and I take a look at this, you can see that I'm actually rendering buttons inside of my grid, right? Nothing super fancy here, but what I wanted to take away here is that with a cell renderer, like the world is your oyster. You can do whatever you want inside of this div, right? So whatever I return from the cell renderer is gonna be rendered inside of this div. And I can add buttons, I can do interactive things, I can build all kinds of really beautiful looking cells with styling and CSS and interactivity and really whatever you need to do. Again, keep in mind, that there might be performance application of all of this, because if I have a really heavy component that's doing lots of things inside of it, and then I'm scrolling my grid, we might see that as I scroll the grid, when it's creating all of these elements, that it gets a little slow or things like that. But here's my button and here I've got tests inside of it. So nothing super fancy there. Let me get rid of these, make some more room for us. And what we wanna do is we're gonna say, if we don't have a value, let's just return null, otherwise we're gonna return this nice icon. And so I just copy pasted out of the solution, some of the JSX here with a material icon and formatting the date. And so now if I come over to my data of order, I get this nice icon and there's my formatted date. And I'm using EN US. And so what's really nice about this is with the cell render is I can render whatever I need to do inside of here. And I just have some inline styling, I could do CSS in JS if I wanted to here, I could, whatever you need to do. So I know we kind of did that exercise together. Hopefully you were able to kind of follow along as I did that. I wanted to really kind of explain that so you really got a good takeaway here and that the cell renderer is really powerful and that it allows us to build out really cool interactive, exactly what we need type of grids. So we're not just displaying data anymore. Now, we're really starting to get into some fun complex scenarios where we're building out great implementations that are showing really, really cool things if we need to. So just quick recap. So render is a function, gets called with our params object and we're returning JSX that's gonna be rendered inside of that cell. And we get access to the value, we have access to other things as part of this params object, like we talked about, and we can use that to render custom cells. And the cell render is the last thing that happens. So we have first is value getter, then value formatter and then a cell renderer. Let me know if you have any questions about that.

I know that we did the exercise together. Hopefully that was helpful. And yeah, so drop any questions you have in the chat. Happy to answer those. All right, we're gonna take a look at cell editing and some of that content. I wanna make sure here we are on time. So we're getting into cell editing and we've got a couple of exercises in cell editing and then we're gonna switch over to AG Charts here in a second. So let's get started with cell editing. We'll take a quick five minute break. We'll come back, we'll finish up cell editing and then we're gonna get into charts.

So we can enable cell editing by setting the editable property on the column definition. So that we set it to a boolean to enable or disable the editing of cells. And we can also set it to a function to determine if editing is enabled. So a very simple implementation is just editable true and that'll allow the user to edit the value inside of the cell. You can also programmatically determine whether the user can enable editing. So you could have things like turning editing on and off and that kind of thing. You can also enable editing via the grid API. So programmatically from kind of outside the grid, you can get access to the grid API and on the grid API, you can toggle that. So maybe there's some sort of switch outside of your grid that turns on editing mode and turns off editing mode. You could do that using the grid API. You could also use a default column definition if you wanted to, and do use memo and have that based on the state of editing turned on and off kind of however you want to solve that problem.

Let's take a look at editing the customer name. So pretty simple, I just set editable to true and now the user can edit the customer name. Here is how we do this with the grid API. So with the grid API, we invoke start editing cell. We give it a row index number as well as the column key. You can specify the column key when you're setting up your column definitions, you'll see that there's the ability to set that col ID prop on the column definition object. And that's what I'm referencing here. The column key is also generated kind of like the header name I mentioned at the very beginning of the workshop based on the field. So if the field is set to name, the column key is going to be named as well. You can also override that so that way you don't run into like conflicts. That'll start editing the cell at that row and for that column, so it'll get to that cell and then we can also programmatically stop editing as well using the grid API.

Out of the box, ag-grid provides a bunch of cell editors just like the filters. So we get a text editor, a large text editor, which is kind of like a pop-up. We get a date editor, a select editor and there's also a rich select editor and that's enterprise only. The text cell editor is the default. So when we set editable to true, we will get the text cell editor. We can also use the cell editor column definition property to specify a provided or custom cell editor, just like we did with the filter. So here I can set editable to true and I can say for the editor, I want you to use the ag-large-text-cell-editor and you can find in the docs the references for each of these and you can also create your own cell editors. Remember we talked about how we can register those directly with a component reference or we could use a string reference for the serializability of our column definition. Here is the example of using the select cell editor. All right, let's take a look at an exercise. So I'll give you guys a couple of minutes to work through this one. Open up the exercise on StackBlitz. I want you to enable cell editing on the customer name column, enable cell editing for the account number column and then let's use the ag-large-text-cell-editor for the account number column and kind of see how that works.

I want you to enable cell editing on the customer name column, enable cell editing for the account number column and then let's use the ag-large-text-cell-editor for the account number column and kind of see how that works. So let me drop this link for you in the chat and then I'm also gonna put this text in the chat as well so that way you don't have to remember how to, what the name of that cell editor is. Again, you can also jump over to the docs and find that as well. So why don't you take a couple of minutes, we'll work through this and then we'll go right into a quick break and we'll come back and we'll learn a little bit more about cell editing and then we're gonna dive into AG Charts. Do you have any questions? Put those in the chat and then we'll do the exercise together. I got a couple of thumbs up and I also got a question from Darren. Yeah, Darren, we're gonna get to that right at the end of this exercise here, we're gonna dive into the persistence but in general, AG Grid gives you some like callbacks or some events that you can listen to when editing is stopped and that kind of thing and that gives you an opportunity as a developer to hook into that kind of lifecycle, if you will, or hook into that editing experience then persist those updates to a backend. AG Grid doesn't, AG Grid is like a JavaScript library and so it doesn't come with any sort of like out of the box solutions for that persistence and depends on your backend and your technology stack. But yeah, so you'll be able to, you'll get notified so to speak and you can know when that changes happened and then you can create a GraphQL mutation, send off an HTTP request or post that data to your backend, maybe persist it inside of local storage or memory. Yeah, and we'll see by default, when you're editing a cell, AG Grid actually just mutates the data inside of your data. Which is perhaps not the most helpful but yes, when I actually changed that data, it's changing it inside of the row data object that I've provided to AG Grid, which again, it's just mutating that object but yeah, you could hook it up, yeah, use a Redux solution here, kind of, yeah, there's ways to do that.

Let's open up that exercise. We're gonna add cell editing to the customer name column. Customer name. All right, if I add that to true and then I double click, let's see, there we go. So all I did was add editable, set that to true on the column definition for the customer name comp and now as I double click into the cells, I can go in and actually edit that value. Let's say the customer name is Brian Love. I hit enter, again, it's mutating that data, right, inside of that row, the row data that I've specified here. Yeah, but there are, as you've asked about, Darren, there are the ability to be notified and to have some insight, like when that changes and I'll show you that here in a second. Nah, well, a couple minutes, I guess. Okay, the other thing we wanted to do was learn enable editing and we're gonna use the large text cell editor on the account number. So on the account number, I'm gonna come over here and edit this. Looks like sometimes I have to refresh. Did I? I shouldn't have to save it. Oh, there we go. There we go. And I also did pop up troop. That gives us a text field, kind of in a pop up modal experience to edit that value. As I'm double clicking into those, there's also some keyboard shortcuts. I think if I highlight it and hit enter on my keyboard, it comes up, I hit escape, it goes back away. So there's also some key listeners there as well. Oops.

This is the cell editor component. I wanna be aware of our time so we can get into the chart stuff. So I'm gonna skip over this component section. What I wanna do here is just call it out there real quick is that, so just like a lot of the features that we've kind of already talked about with Agygrid is they come, Agygrid kind of ships out of the box with some provided filters, provided editors, but we can also build custom cell editors. And so oftentimes we want to build a custom cell editor and we wanna use React to do that. And so what I want you to show you is a, let's do the demo real quick. And then let's go down. And you can see here that now for the product color, if I double-click on this, I get the cell editor where I'm editing using a color picker. And I'm just using the built-in like Chrome JavaScript color picker here in this example. So this is kind of a pretty light example of where I'm using a custom cell editor to actually choose a different color over there, set that to red. And now I can render also this same, this block using a custom cell renderer in order to render this color, right? So I've kind of combined, let me show you again, I'll come over here, let's do red again. I'm gonna choose that. And then when I come out of here, now I'm kind of rendering that as red as well. So I've kind of combined a cell renderer here with a custom cell editor. I've got this color editor with this input in it. And that's just using the JavaScript built-in color experience. You'd probably wanna build something a little bit better or fancier in your example. But the point of that is, is we could build custom editing experiences as well. And then before we take a quick break and then wrap up with some charts, I wanna show you that there is the ability to do the persisting. And so out of the box by default, the field is bound to the row data, is updated or mutated. We do have a value setter function. So just like value getter, there's a value setter function, and that allows us to know when a value has been set. We also can use the grid API to register event listeners to on cell value change and on cell edit request in order to hook into that editing experience. And that allows us to actually know, hey, when we get a new value. So we have an old value and a new value. If they're the same, no big deal. Otherwise we might want to actually go ahead and do something like, on name change and the callback function that's been provided to my grid component. And I want to myself go and mutate that value in a Redux store or something like that. And so that's a pretty common solution. And so the value setter is a great way to do that. And then we also have the on cell value changed, which you register at a higher level rather than in a column level. You register that at the entire grid. And that gives us an opportunity to know when cell values are being changed. Let's pause there for, let's just take a quick, like three, four minute break. That'll give us a little bit of time to jump into the AG charts product that has been released by AG Grid. And we're going to take a look at AG charts. We're going to take a look at a line chart and a bar chart. And we'll see if we have time in the next 45 minutes to get into the pie chart as well. But I want to show you that as well cause that's really cool what they have here. A great way to take that data that's visualized in a grid, take that data, visualize it in charts as well. So let's, I'll stop there. Let's take just a two minutes, three minutes. A quarter after I'll come back and we'll start right back up and we'll dive into AG charts. All right, we're going to wrap up today's workshop with about 45 minutes here. We're going to take a look at AG charts. Let me actually pull up the website for us. Cause I want to show you this. So when you go to aggrid.com, you'll see that you get this nice JavaScript experience. They're showing the grid. You can get a really cool quote from me right down here. I get to, I guess, sit alongside some really legends and great folks here, certainly. I think Tanner and Ryan are amazing contributors to the JavaScript ecosystem. I think what's fun about this is I think I get an opportunity to kind of share my experience working specifically with AG Grid. I know Tanner and Ryan are incredibly intelligent folks and do a ton of work around the 10 stack and solid JS. But I've definitely had a lot of fun getting to know the folks at AG Grid and learning the ins and outs of really building high performance data visualizations in JavaScript. But let's take a look at their AG Charts product.

But I've definitely had a lot of fun getting to know the folks at AG Grid and learning the ins and outs of really building high performance data visualizations in JavaScript. But let's take a look at their AG Charts product. So if you go up to products, and you change this to AG Charts now, this is where you're going to start to see their charts. And they've got some demos here, bar chart. Here's a really sweet demo of financial data. And you can really, you can zoom in on this. You can zoom out on it, all kinds of really great things. There's a gallery as well as getting into the docs. And if you're looking for a chart library, that works really well with their Grid product. AG Charts is a great place to look.

Okay, let's close these down and let's dive right in. I'm going to switch over and drop a link for you into the chat. Here's our link to our AG Charts repo. Again, this is public. I'm going to drop this in right here. And we have all of the challenges and the solutions. We've also created PRs for these. So we're going to be taking a look at like the line chart. And when we get into the exercise, you'll be able to come in and see exactly what that exercise entails. But let's dive right into AG Charts.

So just like AG Grid, installing AG Charts is an NPM install with AG Grid. Excuse me. I found another typo today. AG Charts React. And you can also install the AG Charts community module as well. That'll give you some of the additional typing that you're going to need. Today, we're going to be focused mainly on building some series-based charts. So they do have financial charts and geo charts. But we'll be looking at like Cartesian-based X-Y coordinate charts that are series-based. And we'll be using the AG Charts component instead of the AG Grid component. We'll use the AG Charts component. And the way that we get things wired up into AG Charts is we use the options prop, and that contains the data as well as the series definitions. So a little bit different from the AG Grid. In the AG Grid, we had like column definitions and row data. We kind of set those props on the component. In this instance, we give it the options object. And inside that AG Chart options object, we have a data property as well as a series definition. And we're going to take a look at that right now. So let's look at the data. So in this instance, I've got some time series data with some values. So not much different than our row data, right? So here I've got a date as well as a value. And so here on this date, this value, and I'm going to plot that out in my Cartesian chart. So here I'm creating a component. I'm going to call this Chart. And I'm going to go ahead and with the use memo hook, I'm going to define my chart options. And my options are going to be of type AG Chart options. And I've set my data. And then I'm going to return the AG Chart component, and I'm going to set the options prop. So pretty easy to get started with AG Charts, just like AG Grid. I love the beauty of how quick and easy it is to get working with these things. The next thing that I need to do is I need to specify the series. So in this example, I'm going to be creating a line chart. And so in my options, I'm going to specify the data as well as an additional property called series. And this is going to be an array of series because I can stack these up. I can have multiple lines, or I could have a bar chart like a combo chart, like a bar chart with a line chart as well drawn on it. And so here in the simplest form, what I'm going to do is I'm going to specify the type to be line. And that's going to tell AG Charts that I want to build a line chart. And then I need to specify the X and Y key properties. And kind of like what we learned with AG Grid where we have a field property, this I need to specify, rather than just a single field, I need to kind of specify for my X-axis as well as my Y-axis. I need to specify what fields or like where in my data to get this. And so the X key is going to be my date, and then my Y key is going to be my value. So along the X-axis, I'm going to have my time series data, and on my Y-axis is where I'm going to be plotting or charting out that value. And then I return the AG charts or I render it. It doesn't have to be being returned out of this component. You could have this as, you know, whatever you need to do, you can use that AG chart component inside of whatever you're building with React. And that's how we get started with AG charts. We create the data, we provide the data to the chart, and then we start providing series. And in this example, we've got a single series that is a line series, and then we've told AG charts to use the X key and the Y key based on the data that I've provided. Let's dive into that a little bit more and let's take a look at an example. So in these examples, we're going to be building some charts, we're going to do line charts, bar charts, and pie charts. And we use the AG charts library to do that. And we're going to be displaying flight data. So our data model is really simple. It's kind of based on the following interface. I have a flight and the flight is associated with a date and the time or the duration of that flight. So the date and the time, so I've got time series data. The date property is going to be a JavaScript data object that represents the date of the flight. And the time is a number that represents the duration of the flight in hours. So let's get started by building a basic line chart that displays our flight data. So here is my data. I'm going to use a function that I'm exporting out called get data. And just like AG grid, I'm going to basically give it all the data here and say, hey, I want you to render this data in a line chart. Here's my series. And that's specified. The type is line. My X key is that date. That's what's going to be on the X axis, my time series. And then the Y key is the time or the duration of the flight. And then I can also give like a label or a name and that'll be useful for the tool tips. So it'll say flight time, colon, whatever that time is.

And that is going to render our chart app. So by default, AD charts will automatically generate the axes for the chart. So we haven't explicitly told AD grid how to do the axes. It'll by default, it'll generate those axes for us. We can also specify the type of axes to use for each dimension. And there's three basic types of axes that are available. We've got number for continuous numerical data. We've got category for discrete data, which is really helpful for like bar charts, pie charts, things like that, where you might be doing roll-ups of data into discrete categories. And then we also have time for time-based or time series data. A number axis is used to display that continuous numerical data. And so let's use our line chart, let's update our line chart to use a number axis for the left side of the Y axis. So here is my line chart. In addition to series and data, I'm also gonna provide the axes property to my options. And I'm gonna say, I have an axis of type number, and that's gonna be the Y axis on the left. And let's keep building that up with our flight data. And now I'm gonna add another axis. And I'm gonna specify this to be a time axis. And that's gonna be my X axis. I'm gonna position that on the bottom. And then I'm also gonna wire up some intervals, which is pretty cool. When you're using time axes as compared to number axis, you get a couple additional options, and you can specify that I want the interval to be each month, for example, here. And I can also format the label for that axis based on a specific formatting that is provided by AEG Charts. And you can find that in their documentation.

Okay, so we wanna create, we wanna do our first challenge on StackBlitz, and we're gonna do this one together. So let's get started. The first thing we wanna do is, let's add a chart title, and then we're gonna create a series of type line. And we're gonna set the X key, Y key, and Y name properties. And then we'll get into adding the axes. So let's go ahead and open up that challenge on StackBlitz. Let me drop that link into the chat for you. And let's go ahead and start building out some charts together.

Right now you can see that I have nothing displayed because I haven't wired up anything yet. So the first thing I need to do is I'm gonna come in here to my series, and I'm gonna specify series, I'm gonna say this is gonna be a line chart. And then I'm gonna specify the X key, and the X key is gonna be my date. My Y key is gonna be the time, the value of that flight. And run line chart. Let's give it a title as well. And the text, we're gonna call this flight time. And I must have, ah yes, I need to actually render the AGI chart. Let me do that. So we're gonna do AGI chart, and we're gonna specify the options, and we're gonna bind that to our options prop. Oops, AGI chart. And AGI charts. And self-close that. There we go. So there's our flight time. And I've got my series, type equals line, let me make sure I got this right, line chart. Type equals line, let me make sure I got this right, line date time. X key, Y key. Let me grab this. In case I made a typo here. Let's get rid of the axes for now. And this is really tight with some really tight labels. But I am, I do have a line chart here. I wouldn't say this is usable. This looks, yeah, this looks tough. So we got some work to do. So let's start specifying the axes. Here's our axes. And the first thing that we wanna do is we're going to put an axes. Let me just grab this on the left side. That right? All right, now we're starting to get a little bit better here. So I've got axes on the left and I can hover over. I haven't drawn a bottom axes. So I actually kind of cleaned things up because I had all those really long labels that was hard to read, right? But right off the bat, I can see here that I get a nice chart. It's really performant. I can kind of scroll over. I'm getting a nice tooltip here. It's pretty big because the dates are really long here. So let's go ahead and set our other axes. So we're gonna use a time axis. And we're gonna come over here and drop that in. Nice, and now things are looking much better. So now we've got our time axes on our bottom. I'm grouping these, the intervals by month. So it's still drawing these like in between the months, right? It's not like it's just, we're not doing any sort of rollup or categorization or we're still displaying each item in our time series data. But we are displaying the bottom is kind of by the interval of the bottom axis, X-axis, is by month. And I do that by specifying the step and we bring this time in and time gets imported, if we can find it from the AGCharts community library. So we bring this time, it's a constant, bring that in and we're referencing the month property. And that's what tells AGCharts that I was interval to be by month. And then I've also got a label property for my axes and I've specified the format and I use this formatting string and you can find reference for this on the AGCharts website. And now you can see that as I hover over these and I'm looking at each of the elements in my chart, I've got this really nice, beautiful chart of flight time based on the date and the duration of that time. And that is the challenge for the line chart. So what I wanna do is I already walked through it, but I wanna give you a chance to start playing with this StackBlitz and start playing with AGCharts. So I dropped the link already into our chat. So once you go ahead and go through this exercise yourself. So I already kind of walked through it, so hopefully that helped. So go ahead and open up that exercise. You can add the chart title, set that to flight time. That is the title prop that you saw. Let me drop this link as well, this is helpful as we are kind of quickly diving into a new API. That PR, I will show you the diff between the challenge, yeah, the challenge and the solution. So you'll be able to look at that and reference that. And once you come in and start building out that line chart. So I'd love to have you get a chance to start playing with AGCharts. So why don't we take about five minutes, let you work on this challenge yourself. And then once you've got the challenge and you're good to go, go ahead and give me a thumbs up in the chat. And then we're gonna move on and we'll take a look at the bar chart next. If you have any questions, drop those in the chat as well and I would love to answer any question that I can. Let me also, just in case you missed it, here's a link to where we are on the course content. Just in case you're coming back, you took a break. We've moved on from AGGrid, now we're looking at AGCharts and visualizing some of this data in a line chart. And we've got a fun exercise for you to work on. Sounds great, looks like a couple people already are finished, awesome, I love it. Let me give you a couple more minutes to work on that. And then we'll get into the bar chart and the pie chart. You can also, here's the solution as well. Kind of pull that up on StackBlitz and we'll move on to bar chart. All right, cool. So let's build a basic bar chart that displays some flight data. So in this instance, we're gonna be kind of categorizing things into categories using our data that we have, our flight data, and we're gonna be displaying bar charts. So, as you probably already guessed, switching between a line chart and a bar chart is fairly straightforward. We do have to kind of roll up our data.

So there is some calculation that's done at runtime, and I'll show you that here when we get to the StackBlitz. But in general, what we're gonna do is we're gonna set our data, and then we're also gonna specify the series for our bar chart. And the type is gonna be set to bar, and we have our X key as well as a Y key. And this, for this, the X key is still gonna be kind of our time series, but it's gonna be sort of a full time series that's gonna be categorized by month. So we're gonna have a key in our value called month, and then a Y key for our Y axis called time in our data as well. And then I've specified a Y name for this. So a category axis is used to display discrete data points.

In this example, we're using the month property as the category axis. So let's take a look at our axes. So here I've got the same that we had before. On the left on our Y axis, I've got type of number. And then this time, instead of a time series for our X axis, I've got category as the type. So I've specified type and I've specified category. And I've positioned this on the bottom. And for the label, rather than a format, I've provided a formatter. And so for the label property, I've got a formatter, which is very similar to what we learned in AV Grid with our value formatter, in that that gets called with our params. And using that params, I can say from our data at the particular index, I want you to go ahead and get the label.

Let's jump over to the challenge here. Actually, I'm gonna go right to the solution. And I want to show you what that kind of the data looks like and show you the example. And then I'm gonna have you go ahead and work on the challenge. Okay, so this is what our bar chart looks like. So now we've bucketed or grouped or rolled up, however you want to think of it, our data into discrete buckets or categories by month. So I've summed up the data for June, July, August, September and October. And I've got this nice tool tip, and we've got our labels on the bottom, looks really nice, very pretty looking bar chart. And I am using this use roll up data. So I want to quickly jump over to this. It's not important to actually look at all this code. But what I'm doing is I'm taking that time series data, and I'm gonna go ahead and reduce that down and create an array of data objects that has a label, a month, and a time in it. So that's what my datum looks like. And I've defined bar chart datum as an interface. So every datum in my chart is gonna have a label. It's gonna have a month and a time. And that time is the duration, the summed up value.

So let's take a look. So we've got our data. I specified the title with the text flight time by month. And that is displayed at the top of the chart. I've got my series and I've got the type set to bar. I've got my X key of month, my Y key is time. Again, that goes back to our datum. So I've got number of the month and I've got time is kind of the value or the total time for that month. And then my label. And then the Y name is flight time. And that's why when I hover over this, this looks correct anyways, that in the flight time, the values are right. There's 5.9, but it still says June. But I see that the label here says flight time in that tool tip. And so that's where that comes from. And then axis, I've got type of number and I've positioned that on the left side. And then here's where I'm using that category axis and I'm positioning that and set the position to bottom to put the category axis on the bottom of my chart. And then I've specified a callback function for formatter, which is going to format the label that is gonna be displayed here on the axis. And then I'm returning AG charts and I've set the options. So that's what our bar chart looks like.

So I want you to go ahead and run through our challenge here. It should take a couple of minutes. We've got about 15 minutes left in our workshop together. So go ahead and open up the challenge on StackBlitz. And this one, you can also come over here to the pull requests in our AG charts with React 2024. And let's take a look at the bar chart and we'll come over to the files. And I'm gonna grab this link and drop it to you all here. And how do I change this to media group chat? Cool, so there's the PR. So you could actually see the solution if you need to kind of reference that. But why don't you take a couple of minutes? Why don't you take five minutes and start working through this challenge and building out the bar chart.

I specified the title with the text flight time by month. And that is displayed at the top of the chart. I've got my series and I've got the type set to bar. I've got my X key of month, my Y key is time. Again, that goes back to our datum. So I've got number of the month and I've got time is kind of the value or the total time for that month. And then my label. And then the Y name is flight time. And that's why when I hover over this, this looks correct anyways, that in the flight time, the values are right. There's 5.9, but it still says June. But I see that the label here says flight time in that tool tip. And so that's where that comes from. And then axis, I've got type of number and I've positioned that on the left side. And then here's where I'm using that category axis and I'm positioning that and set the position to bottom to put the category axis on the bottom of my chart. And then I've specified a callback function for formatter, which is going to format the label that is gonna be displayed here on the axis. And then I'm returning AG charts and I've set the options. So that's what our bar chart looks like.

I want you to go ahead and run through our challenge here. It should take a couple of minutes. We've got about 15 minutes left in our workshop together. So go ahead and open up the challenge on StackBlitz. And this one, you can also come over here to the pull requests in our AG charts with React 2024. And let's take a look at the bar chart and we'll come over to the files. And I'm gonna grab this link and drop it to you all here. And how do I change this to media group chat? Cool, so there's the PR. So you could actually see the solution if you need to kind of reference that. But why don't you take a couple of minutes? Why don't you take five minutes and start working through this challenge and building out the bar chart.

Now you don't need to worry about the data, right? Because if you come back to the challenge, you can see that we've already wired up the data for you that's using the roll up data. So don't worry about writing the mapping and filtering and reducing and whatever else is inside of that hook. The data is already brought in for you and the title is already there. Your goal is to set up the series and the axes. And I'll give you a couple of minutes to work through that. And then once you're done with that, or you're ready to move on, drop a thumbs up in the chat and I'll know that you're ready. And then we'll take a look at the pie chart. If you want to fork my solution and fix my tool tip rendering, you can also, we don't dive too deep into AD charts in this workshop, but you can, with the rendering of the tooltip, you can also provide like a custom render function. Similar to what we learned about AG Grid with self-renderers. So, I kind of out of the box, the tool tips are, you know, they're great. They're formatted. They kind of show you like, here's the name and here's the current, you know, value, and all of that based on what you wire up into the chart. But it is certainly helpful if you want to do any sort of really advanced styling or that kind of thing. There's an opportunity there as well to kind of build that out and kind of customize the tool tip. You will also notice that in the, I think this is the solution, right? Yeah, I have also wired up a theme as a property into the chart options. And so, if you've been poking around on this, you probably saw, oh, this is kind of, looks a little different than maybe some of the demos that you'll get when you go right to the gallery or check that out on the AG Charts website. And I did that through this theme and inside the theme file, pull that up for you real quick, you can see that I've given it a palette with some various colors for filling. And then I've overrided some of the common things like the background, the title, the padding, the tool tip, I've given it a custom class, and that's how I did a lot of the styling for the tool tip, kind of give it this glassy look, which I think is pretty cool. And I think I removed the arrow, otherwise you can show like a arrow on the bottom or whatever. I kind of updated some of the legend, and then you can get specifically into each axis type. Remember we learned about the different axis types of numeric category time. And so for each of these, I can style things like the lines, the strokes, tech, labels, grid lines, and that kind of thing. And so that's kind of how that's done here. And then for each chart type, you can also override things kind of how that chart is displayed. So in the line chart, the shape of the point was a circle, you can change it to like a square and other things like that. Here's your bar chart, kind of setting the label color and that. And then here's some configuration for the pie chart as well that does some of the styling. And so you can kind of create this theme and share that again, export that out. It's just a constant that you can wire into your various charts and you bring that down into the bar chart in the options, you just specify theme and then use that as custom styling. And then I also have some CSS for the tool tip and things like that as well. If you wanna poke around the samples here.

Okay, good. Let's go ahead and move on and let's cover the pie chart. Pie chart is very similar to our bar chart, a little bit different configuration, but honestly very similar. We're gonna fill roll up our data by month. We're gonna provide our data to the AG chart options. And then we're also gonna provide our series. And in this instance, for our series, we're gonna set the type to be a pie chart. And then here, instead of X key or Y key, it's called angle key, which makes a lot of sense and this we're gonna be using that the property time out of our data for those values. And then we return our AG charts component with the options property wired up. We can also specify some labels as well. So the callout label key properties used to display the label of the pie chart slice and the legend item key properties used to display the legend label. You can also put a label inside the pie chart, which I think is called a sector label key or a sector label. And you can configure that as well. And in this instance, I'm referencing the label property in my data for the legend in the callout. And let me show you that here, we'll do a demo of the solution and I'll give you some time to do the challenge yourself. Again, I'm bringing in that roll up data. I've got my title. And then here's my series where I've specified the angle key and the various labels. And so the tool tips working this time in terms of as I hover over these, I can see each of the values for each category. And I don't get a legend. I think because there's not enough space and then now as I hover over each of these, I also get the label correctly for June, July, August, September, October here in my pie chart. So why don't you take a couple of minutes? I'm gonna go back here. Let me drop you the link to the stack blitz as well as take a look at the pull requests. If you want to take a look at the solution for the pie chart give you that link as well. Why don't take about two minutes real quick before we wrap things up. Get back here. And for this challenge, you're gonna be updating the pie chart to display the total flight time per month using the provided data set. Again, you don't need to do that rollup. You've already got the data defined and we use the hook to get that data. So you're gonna create a series of type pie. Set the angle key to time. This represents the flight time for each slice and then set that legend item key to label as well as a callout label key to label. So that way we can set the label for the legend as well as kind of the callout that is pointed off of each of the pie chart slices. And if you want, you can play with the docs and you can also put a sector label key in there. If you want to actually put the value inside each of the, I call them slices, but each inside each pie chart sector. Why don't you take a couple of minutes, work on that. And then once you're done with the challenge or ready to move on, give me a thumbs up in the chat.

Okay, so we're gonna create a series of type pie. Come in here, create a series. The type is gonna be pie. And the angle key is gonna be time. So right off the bat, we got that going. And then we're gonna do the callout label key. This is gonna be our label. Now we get our callout labels. We don't have any of the legend. I guess it's pulling off the same. It must inherit there, huh? That's cool. I think I've always specified this. But it looked like the legend kind of brought that in. I suppose if you wanted different labels from the legend to the callout, that gives you an opportunity to kind of customize that as well, which is really nice. But cool, that's our pie chart. Looks really nice. Fantastic. All right, cool, we'll wrap up here. Just let me drop the link here for you as well. You can always come back and check out the course content here at liveloveapp.com slash courses. And if you're looking for a free architecture review, if you're looking for somebody to kind of come in, look at the architecture of your application, help you with some AG grid implementation, come take a look at our website liveloveapp.com. We'd love to help you with your AG grid or your AG charts project. We do a lot of data visualization. We work with a lot of FinTech and financial companies and startups, banks, that kind of thing. Displaying really lots of rich data and really complex data displays where performance is really important. And that's something that we do. We'd love to help you out with that. But thank you so much for attending my workshop. Thank you everybody for working on the exercises. I hope that you got a good handle on some of the features and how to just get started and work with AG grid. We did skip a little bit of that cell editing. So if you want, go back and recap on that, you can see how you can hook into that cell editing to actually persist that editing and the data. And yeah, of course you can also check out the docs. Let me drop one last link for you here as well. Here's the docs for AG grid and AG charts. Remember, if you need to switch between the products, come up here to this products display, sometimes I forget, and then hit AG charts, and then you can go to the docs, and then you can come down here and you can take a look at whatever, PyChart. And they've got some nice demos for you. Take a look at the code, kind of come in and learn how to do it. With that, thank you so much. It was a pleasure meeting everybody. Enjoy the rest of your day, your evening, and the React Advanced Conference. And thank you to AG grid for allowing level of app to present this workshop. And thank you to the organizers of React Advanced. Take care, everybody. See ya.