Build a Powerful Datagrid With AG Grid

Welcome, everybody. Thanks for signing up for the workshop. I'm excited to spend this morning or this afternoon with you, whatever time it is for you. Again, I'm located here in the West Coast of the United States. My name is Brian Love. I'm a Google Developer Expert in web technologies. I do a lot of frontend. I do a lot of backend. I use React and Angular and Vue primarily. And me and a friend of mine, Mike Ryan, we have a little consultancy here you can see called LiveLoveApp. And so I'm sharing out this website not to promote my company but to get you into the course website.

So if you go to LiveLoveApp.com slash courses, that will get you right to our course landing page. And then from here, go ahead and click on the Getting Started with AG Grid and React. And once you hit that, you're going to be right into our course content, and that's where we're going to be starting today.

So a little bit about me. I am a father of one a single child. She's a precious two-year-old right now. So she's a lot of fun. I'm married, and I live here in Bend, Oregon. I like to do a lot of outdoors activities. So when I'm not working on code or these kinds of things, you'll definitely find me kind of up in the mountains, mountain biking, skiing, fishing, just kind of enjoying the outdoors, a lot of camping, things like that. So I kind of enjoy being both in front of the computer as well as outside and in nature. And yeah, I'm really excited to spend some time with you all this morning and get started with AG Grid and React. And that's about it. We're going to get right into the content. We don't need to make this about me or anything. And so go ahead and throw in the chat, though. Let me know just kind of where you're at with AG Grid, whether you've used it, whether you've heard about it, whether you're just interested in maybe what it is. Go ahead and share that in the chat. It'd be great to see kind of where everybody's coming from.

This content today, we're going to actually just, this is kind of meant to just get you started with AG Grid. So we're going to talk about first how to install AG Grid, super simple. And then we're going to start diving into what's called column definition, setting up the columns in your AG Grid. And we'll talk about row data and sorting, about setting up a default column definition, and some filtering.

And then we're going to get into some customization around cell rendering. So things that you can do to actually customize how values are being rendered and whether, like where that value comes from, how that value is formatted, or even creating a custom cell renderer where you want to really have control over what's being displayed in a particular cell in AG Grid. And so we'll get into that as well. And then we'll move in towards cell editing. So that allows you to actually have your users edit the data that is being displayed in the grid. So we'll talk about some of the built-in or provided cell editors that come with AG Grid. And then we'll get into what's called the cell editor component. So how you can actually build your own cell editor using React. Then we'll talk a little bit about persisting cell editing data. And we'll just kind of touch on the persisting. I want to kind of forewarn you, because persisting, obviously, you're going to have to, there's a couple different ways to persist data. And of course, you're going to send that off to you know, an API or your back end or whatever that looks like to actually persist the changes. And so we won't cover the full gamut of that. We'll just kind of present a little bit about what that looks like and some of the options you have around persisting those changes to the data that the users made.

And then finally, we'll look at styling AG Grid and how you can do cell styling and row styling, and then how you can use their built-in themes, as well as how you can customize those themes. So that's kind of the agenda for today. For all of this, we like to keep things kind of hands-on. So the format for today is we've got about three hours slotted for the workshop. Sometimes we don't go quite three hours on that, depends on how long it takes for the exercises and the challenges. But it'll be hands-on. So I'm going to kind of introduce a concept, show you some code, we'll open up something in StackBlitz, take a look at it. And then in the beginning, we'll do the challenge together. So we'll just kind of run through the challenge. We'll make sure it works. And then we'll look at it and kind of make sure it works in StackBlitz and kind of all move on from there. And then kind of as we start moving off the first couple of challenges, I'm going to let you guys do the challenges all on your own. So we'll kind of start the challenge and then I'll give you a couple of minutes, probably like five minutes or so, to work on the challenge. If you need any help, you can always skip and look at the solution. Again, we want to just kind of get some hands on the keyboards, kind of get familiar with some of the API. So that way you're kind of gained some knowledge around using ag-grid with React.

Great. So we're going to dive in. I do want to mention one last thing about myself, because sometimes folks get confused, like who I am and my relationship with ag-grid. You'll see my little picture on the front of ag-grid's website, because I work with them a lot, but I don't work for ag-grid. So I am not employed by ag-grid. I know their CEO Nial and some of the folks that work at ag-grid. They're a fantastic team. They've got great engineers. They've got great support team, all of that. I just do a lot of consulting and a lot of my clients work with big lots of data. I've done consulting, certainly in the realm of like banking and things like that, where you're displaying tons of data to users and they will need to see that data in a grid format or a table format and they want to be able to interact with it or copy-paste from it or edit the data and things like that. And so, we tend to use ag-grid a lot with our customers. And so, we found it to be really powerful. And as a result, we've kind of established this relationship with ag-grid where they say, hey, you know, you guys should just do this workshop for us because, you know, you use it in the field. We build it, you use it. And so, that's kind of my perspective. I don't build ag-grid. I'm familiar with the internals, but I'm not an ag-grid engineer. I'm a JavaScript guy just like you guys. And so, you'll find that as we kind of go through this course, I'll bring that experience or that perspective. So, if there's not any questions, go ahead and we'll get started. If you do have questions, I'm going to be monitoring the chat. So, feel free to drop anything into the chat if you do have questions.

And so, yeah. So, I'll happily take those kind of when we get to a good pause. So, yeah. Great to meet everybody. It looks like some folks are here just to kind of learn what ag-grid is. Some people are familiar with it, that kind of thing. So, yeah. So, we'll dive in and let's get going.

So, the first thing we want to do is to get started with ag-grid and React is we want to install it. So, we're going to go right here to this first section. I'm going to drop this link here in the chat just in case you're joining us a little late. This is where we're at. We're on the course website and we're looking at installing ag-grid with React. I also want to point out that on this course website, if you want to follow along with me kind of in slide mode, you'll notice that I just kind of toggled in Chrome between the two. If you hit the period or the dot key on your keyboard, that's going to open up the slide view and then you can use the arrow keys on your keyboard to kind of go forward and backwards and then escape will get you out of that slide view. You don't have to do that. It's just throwing that out there in case you want to follow along. So, I'll be kind of doing that for sometimes. Yeah, we got a question. Let me address this. I'll usually pause. I'll wait till a pause for questions, but I definitely want to address this right off the front. And we're going to talk a little bit about this when we get into the Role Models. So, a lot of people ask whether ag-grid is free or whether it comes with a subscription. Again, I don't work for ag-grid so I'm not trying to sell you anything. Ag-grid has two licensing models. They have an MIT open source Community Edition, and then they also have like what they call an Enterprise License. And that's where you're going to have to pay. And there's a differentiation in features. So, I'm going to open up the website real quick. And if we go to the docs on the ag-grid website, you'll see that as you get into some of these features let me see where they are. Here we go. Anything that has this little red e next to it, that means it's an enterprise only feature. So, you need to, you have to have a license for that. And you have to pay for that. Their licensing. Again, I don't work for ag-grid. I'm not a salesperson. Their licensing is a little confusing for people that haven't used it initially. You basically purchase a version license, and then that gives you one year of support and updates. But you can, your whatever version ends on that year, so let's say I bought it January 1st of this year, I buy a license. I have to also buy seats. So, I buy a license for ag-grid. I have, I work with you know, four other folks and my team is a team of five. So, I have to buy the license. I have to buy five seats. And that gives me one year of support and updates. At the end of that year, December 31st, whatever version ag-grid is at, I'm kind of, if I don't renew, I'm locked in. And locked in meaning I can use that version forever in perpetuity. It's a hard word to say. I can use that version kind of forever, right? So, I've purchased that license, and I'm good to use that. But I won't get any more support, and I can't upgrade beyond that version of whatever that ending date is. So, if you want to continue to get support and you want to continue to update, then you have to renew on an annual or whatever. I'm sure if you've got a huge team, they'd love to talk to you and they'll probably do some customized pricing around that or whatever that looks like. I don't know. Don't quote me on that. I've got, I've worked with clients that purchase ag-grid for sure because they might be like a large bank or something like this, and they need the support model. It's not just the features, but they also need to have supported software. So, hopefully that answers your question right off the bat. So, you'll see this again, this red E here kind of signifies in their documentation that this is an enterprise feature. So, when it comes to these filters, you can do text filtering, number filtering, date filtering. You can write your own filtering and use the API, and I've done that. But if you want to use what's called set filters, then you have to purchase the ag-grid enterprise license. And they've got instructions on here in terms of go right to the pricing page, and then they'll get you in. And I will say this, again, as a user, because I work with customers that use ag-grid, and I work with ag-grid, their support's pretty good. I would definitely, in terms of if that's part of your purchasing decision, they use zendesk, I believe. You submit a ticket and usually get a response within, I don't know, maybe 24 hours. Maybe you pay for a higher tier on that. I'm not sure, but their support is pretty good, and they tend to get back to you on everything. So, they do have open source, they have a GitHub repository as well, and you can submit issues to the ag-grid GitHub repository, but if you're a paying customer, they'll just tell you, hey, can you submit this to zendesk or whatever, or kind of refer to this, so that way they can manage your support. Okay, great. Got that out of the way. Again, I don't work for ag-grid, so not trying to sell you a license. Most of my customers actually use the Community Edition. It's only often where they need the support or where they need some really robust features that they tend to reach for that enterprise license.

Okay, so to get started with ag-grid, pretty easy. We're going to use npm. You can use pnpm, yarn, what have you. I think bun, I'm pretty sure, to install as well and use this if you wanted to. But anyways, so go ahead and you're going to just run npm install, and then you're going to install ag-grid-community, and that's kind of their base package. And then you have to install the ag-grid-react module as well, and that gives you some of the React components and hooks and all that stuff that you'll need. If you're using another frontend framework like Vue or Angular, they also support those. It's similar, it's just like ag-grid-vue, ag-grid-angular. The next thing you need to do after you install it is you have to import the necessary base and theme CSS files. So this is required. You have to basically bring in that base CSS file, ag-grid.css, and then you need to bring in a theme, and they've got some built-in themes, and we'll look more at those at the end of the workshop. But you're going to want to bring both of those in, so that way you get styling. Otherwise the grid's not going to work, because the grid is actually highly performant, and one of the ways it does that is by positioning things and using CSS. So it's really important that you bring those in. And that's it, that's how we get started.

We just install it, bring in the CSS files, and we're ready to go. So in this next section we're going to be living here for a little bit this morning, or this afternoon. We're going to be looking at column definitions. So once we install ag-grid, the next step is to start to define the columns and some of the behaviors around those columns. So in this next section we're going to learn how to define the columns in ag-grid, and then we're going to look at setting up some of those different behaviors. So we're going to look at things like sorting, filtering, dragging, pinning, and spanning. So to get right into it, we're going to take a look at what's called the col-def object. So it just kind of shortened down instead of column definition. And for those of you that are using TypeScript, they shipped recently, it's not that recent now it's a year or two ago, better type definitions and TypeScript support. And so you'll see in this course, we're going to be using TypeScript with React, so TSX files. And you'll see we're implementing these interfaces. So col-def is an interface that we'll be implementing. So each column is defined by a col-definition object, and by default, the columns are going to be positioned from left to right in the order that matches the col-definition specified. So we're going to create an array of these col-definition objects, and you're going to see that right here. The next thing we do is we need to bind the col-definitions to the col-defs prop. So we need to set that up, and we need to say here, ag-grid-react, here are my column definitions. So in this simple example here, I'm creating a component called grid, and I'm wrapping up the grid inside of a div element with a class of ag-theme-quartz-auto-dark. And this is kind of important. You need to wrap up ag-grid with an element that has the class, the theme class, specified. And you also need to give this element some positioning, some height and some width, so that way the grid can fill that container element. And there's a bunch of documentation on the ag-grid website in terms of how to kind of set some of that up. But by default, you could just hard-code that, and you could set that container to be like 500 pixels wide. You could use Flexbox to have that fill, that kind of thing, or stretch height and width, kind of whatever you want to do for your application. But it's important to know that if you don't give that element any height or width, or it doesn't inherit some sort of sizing based on either CSS Grid or CSS Flexbox, and that element doesn't have any height by default because a div does not, it's just display block, then you'll note that you won't see a grid. And you might be a little confused initially. Some people that first get started with it say, where's my grid? I don't understand why it's not displaying. So make sure that container element has some height and some width, whether, again, that's through CSS Flexbox or Grid or whatever you're using to kind of set that up. And then inside of that container element is where we're going to put in the AGGrid React component. And then we're going to specify our column definitions. So let's take a look at setting up those column definitions. So the first thing that I'm going to do, don't get too lost, if you're not using TypeScript, let's not get too focused or too lost on some of the typing here. But for those that are, I want to point out some of these things. So the first thing I'm going to do is I'm going to set up an interface called rowdata. And I'm going to say for the data that I'm displaying in this grid, every row is an object. And in that object, I've got two properties. I've got a name and a color property. And those are both string values. So I've got some data that's like an array of objects. And each object, each row, is going to have two properties. It's going to have a name and a color. And I'm going to use that to specify the TypeScript generic to the column definition. So that way, I get some good IntelliSense, if you want to call that, or auto-complete. So that way, your editor can do some type checking for you. And if you're using TypeScript as part of your build process, so that way, during that build process, you can catch some of these build time errors potentially. OK, so then let's just dive right into our component. So I've expanded this out a little bit from what we just saw on the previous slide. Previously, I was setting up our container element with the class name of ag-theme-courts-auto-dark. So that's the theme that I'm using. And then I've also got the ag-grid-react component that I'm importing from ag-grid. And I've set the columnDefs prop equal to my column definitions that I've set as part of state. And so I'm using a useState hook here to set my column definitions. And I'm going to specify the TypeScript generic for useState. And I'm going to say this is going to be an array of column definition objects. And each column definition, the Tdata or the data that is part of this column definition is my row data. Again, if you're not comfortable with TypeScript or you're not using TypeScript, you can kind of drop this out. You can just use useState, call that hook, and then provide your column definition, your array of column definition objects. Inside each column definition, I'm going to specify a few things here to get started. The first thing I want to focus on is field. So I'm going to specify the field property. And I'm going to set this to name. And what that does is that kind of sends up a binding, if you will, or a reference. And that tells ag-grid that inside my row data that I'm going to give you here in a second, I've got row data that's an array of objects. And for each object, I want you to display in this first column, I want you to display the value that's associated in the name of that object, in that name property. So we can see that kind of correlates up to my row data and to that name value. And then same down here below, I'm going to say, hey, go ahead and display in the second column. Let's display color. And you're going to pull that value for each row for that cell. I want you to pull that value from the color property within that row data object. I've also specified the header name. Now, by default, the header, if you don't specify a header name, it's going to create the header name for you, kind of the header in ag-grid. And that header is going to just be uppercamel case, like with spaces. Not sure what that's called. But it'll kind of take whatever your field is. It'll upper case it. So it would actually do this for us. If we don't include header name, we would see that the column would have a header name and it would be named. But I can also explicitly title case. Thank you, Patrick. So it'll take the field and it'll title case it for you. Or you can specify it if you want to override it. And you can put any string you want in there. For those of you that are curious and like, well, what if I want to display something really fancy inside the header? Yeah, you have control over that header. You can do all kinds of things in that header displaying, obviously, just the text if you want, using this header name property. But you can also customize it. And so you can actually render a component in that header if you wanted to. So that way, you wanted to maybe have some interactivity or you wanted to display additional icons or whatever that might look like. OK, I've got some explanation in the course as well. So for some of these explanations, I've already hit on them as I've walked through the code. And so I'll kind of skip over them. But I do want to point out that the field does accept kind of a deep reference within the row data object using dot notation.

So let's say your row data isn't just an array of simple objects. Maybe you've got an array of user. And inside that user, you have an account object. And inside that count object, you've got a first name property that's a string. And maybe a last name that's a sibling, and that's a string. And you wanted to pull from that value. So inside that same field property, you can do field colon. And then you're going to give it a string. You're going to say user dot account dot first name. And then it'll kind of dig into the reference inside of that row data object to find that and render that in the cell for you.

As I already noted, if you are using, maybe you're on a big project and you already have ag-grid installed, some of the TypeScript support was introduced around version 28. They're now on 29 something. So they're kind of past this. But just want to point this out, if you start to use some of these TypeScript generics and things, and you're like, this isn't working. What's going on? Just note that in the last major version is when they introduced, in the previous major version, is when they introduced some of the TypeScript support. And older versions don't have really much TypeScript support, or not very. It's just the TypeScript support is very small or not there at all. And so just kind of want to call that out for those of you that might already have ag-grid installed in your project, and maybe you're on an older version. So that might give you an incentive to update if that's something that's important to you.

OK, let's take a look at row data. So broadly speaking, there are two what they call row models that are provided by ag-grid. You've got client-side row model and server-side row model. And that sounds just like you think it sounds, right? So client-side row model is built with the intention that the rendering and the sorting and filtering and all of that, like the data, all that is going to be on the client. So if you're building a single-page application using React and you're using client-side row model, you're going to kind of expect to wire up all the data and you're going to let the sorting and filtering and everything kind of happen on the client. On the opposite side, there's server-side row model. So when you're dealing with large data sets, I tend to find that with some of my customers client-side row model gets you pretty far. It also depends on how much data you want to ship over the wire and those kinds of things. But most modern, especially if you've got enterprise customers, maybe users that are on a desktop, a fairly powerful desktop, they've got a pretty good connection quality, that kind of thing. You can send a couple of thousand, maybe 10, 20, 50,000 depends on how big your data sets are, of course. But you can actually run those pretty efficiently in the client-side row model and kind of get away with it, so to speak. Perhaps not overly optimized. But once you get into the hundreds of thousands of rows and you get into the millions of rows, that's where you tend to have to lean on the server-side row model. And again, the server-side row model is going to be fetching data asynchronously and doing the sorting and filtering. And you're going to push a lot of that work to your database layer or whatever you're using for persistence. So when the user is filtering or sorting through millions of records, you don't want to do that on the client-side, in JavaScript, on the user's browser. You're going to send a request to your back end. You're going to say, hey, give me the next 500 rows sorted by this value or whatever, this column, and ascending. And if you're using SQL, you're going to have an order-by statement or something like that. And so you've got to build that back end of whatever you're using. And you can use Node or C Sharp or kind of whatever your flavor is on the back end to do the server-side row model.

This is where you do get a separation in that free edition that I already talked about, that MIT-licensed Community Edition and the Enterprise Edition. Generally speaking, client-side features are available in the Community Edition. And then if you need that server-side row model, that's where you have to reach for the Enterprise Edition and purchase a license from ADGrid. Again, I think you get pretty far with client-side. And we're going to be using the client-side row model throughout this morning or this afternoon, whatever time it is for you. We're going to be using the client-side row model in this course. We're just not working with a big dataset. And it's a lot easier to teach. But a lot of the fundamentals are going to cross. So you'll learn how to use ADGrid. And if you need a server-side row model and need to kind of pull that off the shelf, I think you'll find that a lot of this still applies.

OK, cool. So let's take a look at an example. And then we're going to pull this up on StackBlitz and start running some code, because we've just been kind of talking and looking at stuff. I want you guys to start playing. So I'm going to set up our columns. Again, we already took a look at this. And I already have, here's my HTML, whatever, TSX, JSX. I've got my ContainerElement. I've got my ADGrid React component. Previously, we were providing the column definitions. And then here I'm going to specify the row data prop. And I'm going to provide that row data. And here, I'm going to use state as well. And I'm going to say that I have an array of these row data objects. And I'm going to get those objects from this data.products. So in our examples, I'm going to use just a JSON file that has kind of some order, line item, product-type data. If you were using an e-commerce, you're building an e-commerce solution or something like that. And that's kind of going to be our sample data set for today. So I'm going to get that row data. And I'm going to bind that down into my ADGrid React element. Let's go ahead and load this up on StackBlitz. So if you click that link on the course, if you're not in the slide mode, if you just kind of come down here, you're going to see right here is where you're going to click to open up that StackBlitz. And then here in a minute, we're going to get started with our first exercise. And you'll be able to open that up right there. OK. So here we are. We're running ADGrid. We've got – I'll kind of dive, go into this a little bit. Let me drop the link to the repo again for those that want it. You don't need to clone out the repo or reference it. But I want to point that out that this is where the code is being pulled from. So here's the code for the repository. And if you go in and you look at all the branches, you'll notice that in the branches, you'll see that this is where all of the challenges are and the solutions. So if you ever want to look at those, they're all there as well. Let's pop over to StackBlitz, though. In StackBlitz, I've got this wired up, and I'm looking at the column-def-01 solution, and I'm looking at the grid.tsx file. Again, I'm going to kind of home down through this a little bit this first time, and then as we get further into the course, we'll kind of skip some of this beginning stuff. I'm going to bring in my themes, the ADGrid CSS as well as the theme that I'm using. I'm also going to bring in the column definition interface from ADGrid community, and then I'm importing the ADGrid React component from the ADGrid React module.

And then I'm also importing this data from this JSON file. We already saw this, but I want to kind of go over it again real quick. Here's my interface for my row data. So I'm telling the TypeScript compiler that my row data is an object that contains at least these two properties, name and color, and they're both string. And then here, I'm going to export my default function called grid, and I'm going to set up my column definitions using the useState hook. And I've specified the TypeScript generic to be an array of column definition objects, where the data of the column definition or the T data is my row data interface. And you'll see that this is what I'm referencing, this T data. I've also specified the header name and the field out of the row data where I want each column to get its value. So in the first column, again, these columns are by default, when I set them up in the column definitions, they're going to be ordered from left to right. So I can see here that I've set up the name field, and then this is the first one, and then I've got the color, and then that's my second one. I've also got my row data, and I'm pulling that out of my JSON file that I've imported. You might fetch this asynchronously or something like that. And here's my products that I want to display. So I've got my useState hook, and here's my row data, and then I'm going to specify those props. I'm going to have my row data prop, my column definitions, column defs prop. I've got that for my AGGridReact component, and then I've got my container element here for my AGG theme, Quartz AutoDark, which gives this nice, beautiful looking grid over to the right. And we can see that as we kind of scroll down through this, I think we're displaying a couple hundred rows of data. We have good frame rates, nice and fast, everything looks good. And yeah, and we can move the columns around in terms of size. We can enable and disable this feature, but this is just kind of out of the box. We haven't customized anything here. I can also drag the name column and kind of move it over, so you can by default you can kind of drag the columns around. Again you could disable that for your users if you don't want that. And yeah, so right out of the box I'm rendering some data. I've got this up and running. I think we had a couple of questions, so I want to pause there. We're going to get into an exercise here in a second. Before we start the exercise, though, if you've got questions, you can drop them in the chat, or we can give you a couple of minutes and go ahead and ask your question. Awesome. We've got a quick challenge for you. This one's easy. All we're going to do is have you open up this StackBlitz exercise. So we're going to do this first challenge together, just to kind of make sure we're all on the same page. So go ahead and click the link to open up the StackBlitz exercise. And then we want to specify the column def column definition property and bind to the ag-grid-react component. We're going to set the row data property using the existing products from the data import. And we're going to set that up with the ag-grid-react component as well, going to set that prop value of row data. So I'm going to open up the exercise. And I'll kind of walk through this a little slowly, so that way we can do it together. Okay, once you have the link open, the challenge open, you should be looking at the grid.tsx file. And you'll see a couple squiggly lines here. I think that's just because they're not being used. And it's saying these are unused imports. So don't worry about that. Kind of skip over that. We're going to go down here, and you can see that we've got some comments as part of these challenges to help kind of so you don't have to toggle back and forth between the course website and StackBlitz. And so what we're going to do is we're going to specify the column definition state. And we're going to bind to the ag-grid-react component. So what I want to do here is I'm going to go ahead and set this up. I'm going to use use state. And I'm going to give this two column definition objects. So I'm going to have name. And I'm going to have color. And if you're just familiar with, if you're not doing TypeScript, and you just want to code this up in just kind of vanilla JavaScript, so to speak, or just JavaScript without using TypeScript, you don't have to specify any of the TypeScript generics. If you want to, though, we can say that this is going to be an array of column definition objects. And then I want to specify the space name. So if I'm going to do this, and then I want to further specify that each row, or the tdata, is a row data object. So I'm going to do row data. And now I'm going to get some nice type checking there as well. So initially, we saw that our grid was displaying. But it just said, like, kind of loading. Let me back up and show you what that looked like. Yep, so this was our original state. The grid is empty. It just says loading because it's kind of waiting. It doesn't know anything about column definitions or values of what's going to be displayed. So here I'm going to go ahead and get my column depths. And then I'm going to come down here, and I'm going to set the column depths property. To colDepths. So now I've got my column definitions, but I don't have any data to display. So you can see I've got name and color set up, but I need to set that data. So I'm going to do the same thing down here. I'm going to get my row data. I'm going to use state, and I'm going to give this some data.products. And then I'm going to come down and set this up as well. Cool. So here we specified the column definitions. Here we've specified the row data. I've got my container element with the theme on it. I'm using the ag-grid-react component that I imported from the ag-grid-react library module, if you will. And then I've got the row data. ag-grid-react library module, if you will. And then here I've binded to the column depths prop and the row data prop. I set that all up, and now I can see that I get the data is being displayed. And by default, again, we get that title case based on the field name. But if I wanted to change that, I could do that, and I could say, hey, the header name, I actually want you to say that this is going to be the product name or something like that. And now we can see that I get this custom header name. Fantastic. Go ahead and give me a thumbs up in the chat if everything's good, and you're able to kind of follow along with the exercise and make your way through it. I'm going to pause here.

Give everybody a second just to kind of catch up. If you didn't get a chance to finish the challenge, I want you to be able to do so. And if you have any questions, drop those in the chat if that's easier for you or raise your hand, and you can ask your question if you want using your mic, whatever is more comfortable or easier. But why don't we go ahead, I've seen lots of thumbs up. Great job, Tanya and Robert. Fantastic. Yeah. So we got a question here, where does the data.products come from? Yeah, let me kind of show you. Yeah. So I'm importing data here from this JSON file, and then products is a property on this JSON. And so if I open up my files, collapse that up, you're going to see that there's a data.json file here. And then let me pull that back and collapse each of these big ones for you. I think that's it. So this is just some I used faker. Yeah, I just built out some fake data here. So I've got fake data for customers. And customers have accounts. There's also products, it's like a generic like if I were to like e-commerce, right? I've got products. And then customers can place an order, I think it ties to customers and their account and the date of the order. And then for each order, I can have multiple line items, right? Or items that are in that cart, so to speak. And that's just going to have an order ID, a product ID and a quantity. So for order one, they ordered four of whatever product ID 15 is. So it's just some stubbed out data. Doesn't really mean anything awesome cotton chips. Don't know what that is. I really like gorgeous frozen shirt, and it comes in the color olive. So I think that's pretty cool. So that's something that you're into. Yeah, so that's where the data comes from. Yeah. So in a lot of scenarios, obviously, you're going to fetch data asynchronously. So you could do that with the client side role model. You don't need to use server side role model to do that. You could go and fetch from your API, go get that product data or whatever it is, and bind that down into the grid. So yeah. So even though we're kind of doing this like synchronously with the data, you could certainly imagine how this would look like. You might have a product grid component that accepts the array of products as a property binding. And maybe your app component or whatever is kind of dealing, getting the fetching the data and holding the state and all that kind of stuff for you. These are all kind of forked off. I think if you sign in, you can then fork this if you wanted to keep this in your StackBlitz account. You can sign in with GitHub or whatever your credentials are, and then you can actually fork this and then you could keep this, all of these if you wanted to, or you can just close I'm going to just close them down and like not save them. Again, just as a quick reminder, you can pull these all up from the repository that we have. It's public. Check it out and look at all the branches for the different challenges and exercises. And this course website, there's no passcode on this or whatever. There's no timeline. This will be here. So in the future, as we kind of move along, if you ever want to refer back and copy paste code out of here, feel free to do so. Just bookmark it and have at it. Okay, great. We're going to dive right into the next topic, which is row sorting. Okay, so we can enable or disable the ability to sort a row by setting the sortable property on the column definition. By default, sortable is set to false. We can also do custom sorting. So custom sorting can be performed by specifying the comparator property on the column definition object. And we provide a sorting function that's basically similar to array dot prototype dot sort. So if you're familiar with sorting values using that sort method on an array, basically that same function that you're going to give it a callback function to that comparator property, and you're going to say, this is how I want you to sort these values. So by default, internally within AG grid, it's going to just do like a locale sort, and just sort those values based on the browser. But if you want to customize that sort, or you've got some nested, again, we're using a pretty simple row data object, you might have row data where you're displaying one thing, but you want to sort by something else. Like maybe you're displaying an image or you're displaying a country flag or something like that. But you actually want to sort by the name of the country, not just by the value of that SVG file or something like that. You can do that. So you can override that sorting using that comparator property. So let's take a look at an example. Here, we've got our column definitions up above, pretty similar to what we have before. But what we're going to do is, on the name column, we're going to go ahead and just set sortable to true. Again, by default, sortable is going to be false. And so we're going to allow the user to sort by the name column. And that's going to sort by default. The initial sort is going to be whatever the order is of the row data that you provide. And then when the user clicks on that header, it's going to switch to ascending. When they click on the header again, it's going to switch to descending. And then when they click on the header again, it's going to go back to that default sorting order. Whatever was provided from either your back end or whatever you provided for the row data. So you kind of have three different sort states. You have null or no sorting, which is going to be whatever the order is for the row data. You're going to have ascending and then descending. And we can change that if we want to as well. We'll show you that here in a second. So all set is sortable to true. Everything else is the same. I've got my row data. I've set up my row data prop and my column depth prop. So everything else here is basically the same. So by default, the sorting order is set to ascending, descending, and then none. And we can specify the sorting order column definition property to override that default behavior. So if we wanted the sorting order to just toggle between ascending and descending and don't allow the null value of allowing the sorting order, then we can change that. Yeah, that's a good call-out. I think you're right. Yeah, it's true by default.

So I think my slide here is a little outdated. I apologize for that. Yeah, so the sorting by default, the sortable is going to be set to true. And then you can always just override that and set sortable to false. So we'll kind of play with that here in a second with an exercise. Here's how I can customize by specifying the sorting order. So I specify the sorting order prop. And I give it an array of these strings. And so in this example, the name column is sortable, and it sorts ascending and then descending. So when the user keeps kind of clicking to change that sorting order on the header, it's just going to toggle between ascending and descending. So it won't display the data in kind of that whatever the order was that came from the back end or from our row data. I can also do multi-column sorting. So right out of the box, the user can sort multiple columns by holding the shift key and clicking on the column header. I can also specify that multi-sort key if I want to override that behavior. Maybe I want it to be the control key or something else that the user might be more familiar with. But you do have multi-column sorting. So you can sort by one column. You hold shift, you click on a second column header, and then whatever the values are the same, it'll compare and sort the next column. And again, you can change that sort key if you want to. And it's as simple as setting this up with multi-sort key. And then here I'm setting this to the control key. So this is going to set that sorting key to be the Command button on Mac OS or the Control key on Windows.

Okay, cool. Let's take a look at, let's do another challenge together. This one's pretty easy. We're just going to play around with the sorting for the grid. And what I want you to do is just add the sortable property to the column definition. By default, it's going to be true. So we could disable it if we want to for any or all of the columns. And then we can also override the default sorting order by specifying that sorting order property on the column definition. And then also go ahead and override the default multi-column sorting key by specifying the multi-sort key prop on the AG Grid React component.

So for this exercise, again, we'll kind of do this one together, and this will be the last one we'll do together. And then I'll kind of hand it off to you going forward. So what we want to do here, here's our same kind of where we left off last time. And I've got my sortable property and I've got my field here of name. And by default, yeah. So the sorting is enabled by default. So I clicked on it. So now it's ascending. It's descending. I click again. It goes back to null or no sorting order. And so the order is going to be based on the values that I've set up for the row data. And I can also do, I can hold the shift key, and I can set multiple sorting here. So if I have kind of two that match, there might be some matches in here. Hold this correctly. Now it'll first sort by name, and then secondly sort by color. And we can override that by setting the multi-sort key. So let's go ahead and let's just kind of play around with this a little bit. We'll set sortable to false. And now if I go to click, I'm clicking on the name and nothing happens, but I can still sort by color. And I can also do, let's get rid of this, and let's do the sorting order. I'm going to give that an array. I'm going to say ascending, descending. And now I can go ascending, descending. And then notice when I click a third time, it doesn't go back to that null sorting order. It doesn't change back. It's always just going to be ascending or descending. This one, because I haven't specified the sorting order, it will go ascending, descending, and then back to whatever the order was previously. And I can come down here and I can set up that multi-sort key. And I'm going to set this to control. And so now if I'm holding the shift key, which I am doing, and I click between these, it's not doing multi-sort, but I now have to hold down the command key on my macOS keyboard, and now I get multi-column sort.

Great. Why don't you go ahead and I kind of just kind of, that was more of a demo than an exercise. Hopefully that all was pretty easy to follow along with. And yeah. Yeah. So you can set the multi-sort key to things other than control. In the documentation, I believe they have kind of the, so you can set it to control here. And then you can set it to multi-column. And then you can kind of the, so you can set it to control here. I thought you could set it to other keys as well. Maybe it is just control. I'm seeing in the TypeScript that they just had this as like optional and control. That might be it. That's a good question, Florian. It looks like based on the TypeScript definition, it's just control. We can always pull up this and we'll go to the docs and we'll look at the. It looks like it's just control. So it's either shift or control is what it looks like. So it's shift out of the box. And you can change the default to use the control key instead by setting it to control. Yeah. So it looks like those are kind of your two options. One of the things that's cool, like that's certainly like what kind of comes out of the box, Florian. Let's just say like your users or your customer or whatever is like, no, it has to be whatever. I don't know, the number one or the tilde key or some other key. You could always set up a custom header. You could add some event binding to that event listener for those custom keys or for that key down type event. Filter that out. Check for that key. And then you can use what's called the grid API. We haven't got into that much, but you always have like kind of programmatic access to the grid. And so you could use a grid API to actually then tell the grid, hey, now sort by this column ascending or something like that. So if you really needed to override it, you probably could. Might be a little bit more effort than it's worth potentially, but kind of the hooks are there for you, but just not out of the box. You can only set it, it looks like to control by just using the multi-sort key.

Great. Here's our solution. Just kind of laying that out. Any questions, any other questions? Go ahead and drop those in the chat. Otherwise we're going to keep moving along. The next thing that we want to talk about is the default column definition. So you could certainly in the column definition for each of your columns, you could set, let's say for all the columns you want to disable sorting, and you want to set sortable to false. And so you could go in, let's say you have 20 columns. You could set sortable false, sortable false, sortable false, all of these things. But that's kind of repetitive. And we don't want to do that. And so they have what's called a default column definition. So by default, what will happen is, so when the column is being kind of wired up by AG grid, first they're going to look at the default column definition, and they're going to apply those behaviors or those properties. And then next, they're going to look at the specific column definition for that column. And you can always override anything from the default column definition if you want.

So it kind of has a little chain of inheritance there. So every column will inherit the default column definition, and then each column definition can override those default values. So let's take a look at an example. So here I'm setting a default called def property here. So I've just got default called def, and this is going to be of type, it's a column definition. I'm going to specify the T data generic to be row data, and I'm going to set sortable to true. Because my example is a little incorrect here, and I apologize for that, we'll change this in the challenge when we get playing with this. And what we'll do is, we'll just set this to sortable false. So that way, we can just kind of disable it on all of the columns if we want. And then I bring in my default called def. I specify the prop, and I'm going to bind that to my default called def variable up here at the top.

Here are the steps to follow for the exercise: go ahead and define a new default called def constant in the component function. The default column definition will be an object of type called def. We're going to set that sortable property to false instead of true. And then we're going to bind the default called def const to the default called def prop in the AgGrid React component. And then go ahead in one of the columns, kind of override that sortable prop. So let's pull up this exercise, get this out of the way. And first thing you're going to do is, you're going to come in here, and you're going to set up your default column definition, wire that up into your component. And then if you want, you can override things in the column definition itself. So I'm going to let you guys run with that. Why don't you take, I don't know, two minutes, three minutes. Should be pretty easy. Set up a default column definition, bind that to the AgGrid React component, to the default called def prop. And then as you want, override things in your specific column definitions, and you'll see how that works. Do you have any questions? Go ahead and drop those in the chat. Whether it's related to the challenge or not, happy to take any questions.

AgGrid provides default column definitions that can be inherited by each column. This allows for overriding the default values in each specific column definition. For example, a default column definition can be set with the sortable property as true. This default definition can then be inherited by all columns, but individual columns can override this behavior by setting sortable to false. In the exercise, a new default column definition called def is defined with sortable set to false. This is then bound to the default called def prop in the AgGrid React component. Specific columns can override this default behavior by setting their own sortable property. This allows for efficient and reusable column definition settings without repetitive code.

And so, when the user clicks on the header to sort, it basically will invoke a callback function. Maybe it's an object with an object with a property on it or something like that, I forget. But it'll basically say, hey, I need you to sort the data and then give it back to me. Let me know when that data has been sorted. And so you could, you would kind of delegate that off to the server. But I don't think that there's a way, out of the box, to sort only the visible data when using pagination. And I think you could kind of hack it together if you needed to, because you can get like the grid API, you'll know, the page, and you'll know, your offset, so to speak. And so you'd be able to kind of wire that up and mutate the row data. So there's a way to do it, but not out of the box, I don't think. And that might be kind of the, for some of these questions, it's, you know, certainly they've built kind of the common use cases. But one of the things that I appreciate about ADG Grid is kind of the extensibility of it. Because you've got the grid API and the column API and similar things that they kind of expose to you. You do have fairly full control over what's kind of happening. You just might have to kind of reach into the, go down a layer, so to speak, and kind of hook things up that way. Good question. Yeah.

Alright, let's go ahead and I'll do the, we'll do the challenge together. So here we wanted to set up the default column definitions. I'm going to call this like default coldef, and this is going to be a column definition of row data. And I'm going to set sortable to false. And I'll come down here. Set that up. Now if I'm clicking on these headers, which I'm doing, it's hard to tell, but I'm clicking on the header and no sorting is happening. But I want to say just for this column, go ahead and allow sorting. And so now I can sort by name, but I cannot sort by color. And because the default column definition is a column definition object, anything that's available in this column definition, you can set in the default. So let's say that sorting order, you know, let's just say I want to do only ascending. And so now when I click on this, it'll just go to ascending. And if I click again, it doesn't do anything, because it just kind of locks it into ascending. I can also change this. And I can say, okay, by default, we're going to go descending first, and then ascending, and then back to the original state. And so now I can kind of change that up. So it'll go to descending first, and then ascending, and then back to the original state. Great. I hope everybody was able to kind of play along with that exercise. Alright, we're going to get into filtering. Let me take a look. We're going to do filtering. And then we'll pause for a small break, kind of let everybody step away if you need to, or answer a Slack message or whatever you need to do. So I'm going to go through filtering. And then we'll see what time we have. And we'll probably take about a five or ten minute break just to give you a chance to step away if you need to, stretch your legs, get some water, whatever. So here is the filtering. So AgGrid ships with several provided filters. There's the text filter, the number filter, the date filter, and there's also the provided set filter. But as we saw earlier, when we were looking at the documentation, the set filter is for the end of the filter, the enterprise edition only. Again, let me kind of pull that up for those of you maybe that missed that. If I come in here and I take a look at filtering, you'd see that I get text filtering, I get number filtering, date filtering. But if I want to use set filtering, there's this little red E. And that tells me that this is an enterprise edition feature. So that's where I need to purchase a license to AgGrid. Okay. The text filter is a default. So if I just enable filtering by default, the text filter is what we get. Then we can kind of change that if we want to do filtering for numbers or for dates. And then sets is kind of its own thing. We can also, right, so we can enable filtering by setting the filter column definition property to true. So let's take a look at that. So if we come into our column definition for the name column, and we just simply set filter to true, boom, done. Now, all of a sudden we have text filtering. We could also like explicitly tell AgGrid to use the text column filter. So true is the same as this. So true basically says, yeah, go ahead and filter this. And I want to filter by the text column filter. If I can also explicitly say, hey, for the filtering, I want you to use the AgTextColumnFilter. And we'll see that they also have for date, it's the AgDateColumnFilter. And we'll have to set that as the key for this filter property. So this previous slide, where filter set to true, in this slide where we're setting the filter to the text column filter, this is going to provide the same behavior to your users. Here's the number filter. Pretty easy. We just set the filter property, and we set that to AgNumberColumnFilter. And now we'll get the provided number column filter from AgGrid. And of course the date filter. Here we set, this is the date of order column, we're going to set the filter to be the AgDateColumnFilter. And they kind of use this prefix, Ag, to avoid, so you can build your own filters and register them. And they use this Ag prefix to avoid any collision there. Okay, so here we've got the date column filter, and that'll use the date filtering out of the box. So pretty easy to set those up. Not a lot of, not a lot here to dive into details on. So let's do a quick exercise, have you opened this up on StackBlitz, and why don't you set up a couple of filters. So open up the exercise on StackBlitz. We're going to set the customer name column to use the default text filter. Remember, you can just set filter to true for that one. For the account number column, we're going to use the number filter, and you'll have to actually specify AgNumberColumnFilter. For the date of order column, we're going to use the provided date filter, so that's AgDateColumnFilter. And then for the total column, let's again just use the provided text filter. So why don't we take a couple of minutes, have you work on that. And you can see our row data has got a little bit of a more complex because I'm bringing in date of order and some other things. So my row data looks a little bit different.

So my row data looks a little bit different. And then here I've got a couple more columns. So you're going to add the filtering to these columns, and then you don't don't worry too much about what we have going on down here in this row data value. I'm using the use memo hook to calculate the data because I'm plucking data out of different parts and matching some stuff up. We'll take a closer look at this in a second. And then down at the bottom, we still have our column definitions in our row data.

Okay, so I've got a customer name column, I've got an account number, date of order, and a total column. And I want to allow some filtering on these columns. So right off the bat, right here, I'm going to set filter to true. And now you can see that when I hover over the column, the column header, I get this little menu. And now I can type in filtering. So, say I want to filter by LLC. Now I can see that these different customers have LLC. And the provided text filter gives you some filtering capabilities in terms of whether it starts with or ends with contains that kind of thing. And then you can build up an expression if you will and say, hey, I want it to start with this and contain that, that kind of thing. Again, it's just doing text filtering here. And when I have filtering applied, I can also see that there's a little icon that shows up in my column header that indicates that this column is currently being filtered. And then I can go ahead and delete that. And it goes back and sets it to whatever it was before. If I click on account number, I don't have any filtering available to me for these because I haven't allowed it. So with account number, we want to do a number value filter. So I'm going to do a filter, and I'm going to do the AG number column filter. And now for the account number I come in. You know, this is a little bit different because it's expecting numbers. So now it can say equal or does not equal, greater than, less than, that kind of thing. And so let's just do like a, let's do greater than, I guess. And these are really long account numbers. Equal, what was it? Eight, I think. Yeah, two, six, seven, four, five. Go ahead. Yeah, you put only seven digits, probably that. Eight digits. Yeah, yeah. Obviously you got to punch in the whole number here. I think you get the gist of it. So there are a little, maybe we'll get to the next one when we do the total. It'll be a little bit easier to kind of demo that. Okay. So for date we'll do the date column filter. So we'll do filter, AG date column filter. And then total, let's also set up the number. AG number column filter. Cool. So for date of order, if I come here, I get the same thing. Notice it's going to use the browser's kind of date display. So if you don't like that, you have to kind of build something different on your own. And we'll take a look at how to build your own cell editors and cell renders. Yeah, we'll do both. You can also kind of build your own date filter if you want, if that's something you want to do. And then here on the total, we could say greater than 200. But these may not be numbers. So yeah, so we're kind of running into a good thing here. So I said I want to filter this, I want it to be a number filter greater than 200. But these values for the total filter are actually strings. And so because my, I'm pretty sure, I can double check this. But because my totals are not, they're just string values. We have to kind of make sure that when we're setting these up, that we have the right property, like the right values. And certainly that comes into play for the dates. And we'll see this here in a second. I actually think we have some slides about this. Yeah. So when it comes to doing date filtering and timestamps, you might be wondering, what about like date filtering with timestamps? And the date filter works as is when the row data uses a JavaScript date object. So if you want to use the provided date filter, it'll work as is, kind of out of the box, as long as the row data uses JavaScript date objects. But if you've got a string in there, even if it's like an iso string, then you're going to need to specify a comparator function. So if the date is provided using another method, such as iso strings, then we have to specify the comparator function. Now let's take a quick look at that. So here I've got my date of order column. And I've specified the filter to be the date of order. But that date of order is a iso string. And so by using the ag date column filter, it's not going to work, because these aren't date objects. So I can either, A, change it so my data that I'm providing to the grid uses JavaScript date objects, and then I'm good to go. Or B, I can specify the comparator property. So on the filter params object there's a comparator function, which is different than the sorting comparator. This is why this is underneath the filter params. And the comparator function is going to be similar to the array sort method. It's a little bit different. But basically, I'm going to be, this is a callback function that's going to be invoked by ag grid. The first argument to this function is going to be the filter. So the filter, well, the user sets the local date at midnight. And then for each row in that column, it's going to give me the value. And what I need to do is I need to return either a negative one, a one, or a zero, just like array.prototype.sort where I'm telling the ag grid, I'm telling it how to actually sort this. Whether this is less than the filter local date at midnight, greater than the filter local date at midnight, or equal. And I'm going to return that negative one, one or zero. Yeah, so Christos has a question in here. Show us the exact type of date column filter, column data. So if it's a JavaScript date object, like here, for the values in my row data, then the ag grid date column filter works out of the box. If the value of those is not, then we use the comparator function. And the comparator function, I got to do whatever I want. Because I get that cell value. So here, I'm expecting that cell value to be that ISO string, new in an update object.

I'm going to go ahead and set the hours to zero, so that way I'm comparing midnight to midnight. And then I'm going to do that comparison and return a negative one, zero, or one. We kind of talked about this. Yeah, the negative one, one or zero, is the comparison between the cell value and the provided filter local date at midnight value that's given to you by ag grid. So when the user selects January 1st, it's going to give you that local date at midnight as the value to this first parameter. That's the answer to Ali's question.

Alright, so that gets us through all of the filtering content. And then the next content that we're going to get into is cell rendering. And we've got a couple of sections around there. OK, so we did a great job. We got started this morning. We did this afternoon, whatever for you. But we did install an ag grid with React. We looked at how simple it is to get started with installing ag grid. Installing those two node modules, the ag grid case, ag grid community, as well as ag grid react modules, kind of npm install those. We also looked at column definitions and getting started with ag grid. So we set our column definitions, we set row data. And we looked at sorting. We looked at providing the default column definition. And then we also looked at filtering. And for filtering, we looked at the provided filters that come with ag grid. We looked at the text column filter, the number column filter, and the date column filter. And we talked a little bit about some of the nuances around that. So specifically around the date column filter, how we either need to provide date objects to use the date column filter that comes with ag grid. Or we need to provide to the filter params object a comparator callback function. And that callback function is what allows us to tell ag grid how to do the filtering for the date values. In this example, we had our date values were ISO strings, and so we were able to basically kind of parse that ISO string. We set the time to be midnight, or the hour, minute, seconds, milliseconds to be zero. And then we did our comparison between the cell value that is – and that comparator function is invoked by ag grid for each cell to determine that. And we would compare that to the user input for the filter at midnight.

Next, we're going to take a look at cell rendering. And specifically for cell rendering, we're going to take a look at the value getter, the value formatter, and the cell renderer function. So without any customization, and in the simplest form, each cell in ag grid is rendered as a string based on the field specified in the provided row data. However, oftentimes, an ag grid implementation is certainly not going to be that simple. And that's where we can leverage the pipeline for rendering cells. So we have the value getter, the value formatter, and a cell renderer function or component. And we'll take a look at the cell renderer function. You can also build custom React components and register and provide those as cell renderers, where you actually get a React component inside that cell. And you can use hooks and events and all of that that come with a component. But you can also just use a simple function as well to render complex or to render HTML and to add event listeners and things like that. So let's dive right into the value getter. So the value getter function allows us to get the row data for columns, where the use of the field property is not an option. We can also use the value getter function to maybe perhaps mutate the data prior to providing the data to the grid. Again, think back to our date filtering. Let's say the data that we get from our backend is going to be, again, those iso strings. And we want to mutate that data prior to providing it to the data prior to providing the data to the grid. And we want to actually provide a JavaScript data object as part of that. And so I could use the value getter function to do that. So the value getter is a function that's going to be invoked by aggrid for each cell. And I'm going to wire that up in my column definition. And the function is invoked with the value getter params object. So we're going to specify that function, the value getter function. And the parameter is going to be the value getter params object. And the generic is the T data. So whatever I've set up for my row data. Dive into this a little bit closer here. So let's take a look at the value getter params interface. So this is the object that my value getter function is going to be called with. It's going to be provided this parameter. And this is going to come from aggrid. And this value getter params object has a bunch of really helpful things on it. I've kind of alluded to or, you know, referenced the grid API. And you can look up more information about that in the documentation. But when I'm using the value getter function, I may need to have access to the API to do something else. And so I'm provided that. So I've got the grid API. I've got the column definition. So the actual column definition that I set up. So if I need to reference that, I can. I've got the column object. I've also got the column API, which is slightly different than the grid API. There's also this context, which you can use to kind of wire up a global context inside of aggrid. And that's something that you need to do. You'll be provided that as well. You'll also be given the data. So all of the data for that row. So again, a value getter specific to a cell. And we wire it up for in the column definition. But I'm also given access to the data. So whatever the data is for the entire row, as it's kind of iterating over the array of objects. Right. So I can always reference other pieces of data, which is really helpful. And that'll be of type T data, which is that generic type that we specified for the column definition. I also have a get value callback. And I can invoke this get value function and provide it with a field, a string. And it'll give me the value that is in that cell. So if I want to reference another cell value, I can use the get value function to do that. I also have access to what's called the row node. And we won't dive into that. But just know that there's also this concept of a row node.

And that gives us a little bit more exposure to things in the grid that we may need. OK. And I already kind of broke those down for us. I do want to note the get value function. This utility method allows you to get column values. You can also use that same dot notation that I reference in the beginning for the field property. So if you need to get a value, you can do that as well. The grid API is extremely useful. And we use that for things like programmatically interacting with the grid, maybe adding event listeners to the grid, accessing clipboard features, and many more things. The column API is useful for interacting with specific columns, maybe moving a column programmatically, pinning, sizing, etc. And you can explore all of the methods and things like that on the column API in the documentation. A row node represents a single row in the grid. This is useful for things like the row selection API, updating row data, and adding event listeners to the row.

OK. So now that we've talked a little bit about how the value getter function is invoked by Agigrid, let's take a quick look at an example. So here I've got my column definitions. And here I'm looking at the price column. So I've set the header name to be price. I need to kind of set that because you'll notice that I'm not using the field property. I'm not using the field property anymore. I'm using the value getter to provide the value back to Agigrid. And so I need to kind of specify a header name because there's nothing to title case here because I haven't provided a field. And the value getter, I'm going to provide this callback function. And this callback function is going to be invoked with the value getter params. And the first thing I want to do is I want to just check that I have data. If you're using things like grouping and maybe pivot tables, there's a couple specific instances within Agigrid where your row or your cell may not have any data because you're doing things like grouping. And grouping will probably specify one cell in the row will have data. And then when you open that group, then now you see all the data. And so I want to basically check against that. So if the data is undefined, in this instance, for the price, I'm going to just return zero. You might want to return an empty string or something like that. And what that means is we don't want to calculate, do math.round undefined and get a runtime exception because data can be undefined. So if I do have data for this particular cell for the column, for the price column, I'm going to go ahead and just round that price. So I'm going to use math.round. On the param's object, that value getter param's object, I've got the data. And then I'm going to access the price property within that data object.

OK, let's do an exercise. So go ahead and open up the exercise on StackBlitz. And then note that the total column is currently empty. I want you to use a value getter to sum the total for each order. You might want to look ahead at the solution on this one because summing is a little bit complex because you've got to kind of do some filtering, mapping, and reducing. And I don't want you to have to type all of that in. So you might want to poke ahead at the solution because the total for an order is going to be based on looking up. Remember, we looked at the data earlier. You need to look up the products and the product price and sum that all up for that particular order. And I don't want you to get bogged down with the complexity in doing that calculation. So you might want to take a look at kind of set up the value getter and then come in here and copy paste this value. If you really want to code it up yourself, go for it. But I just wanted to point that out to you. So go ahead and open up that exercise. And then on the total column, let's do a value getter. Again, in this instance, I can't just use field because for my order, I don't have just a total field in this instance. So I need to kind of sum the total for each order. And so we're going to use the value getter function to do that. And I've got some information here in terms of some hints on doing that. Why don't we go ahead and take three or four minutes? Have you work on that exercise once you're finished with the exercise or you're ready to move on. Just give me a thumbs up in the chat. And then we'll go over the solution together.

Yes, we've got a question here. I have a confusion. Value getter function get the value for each cell. That's correct. You kind of set the value getter on a per column basis. So we're going to set the value getter property on the column definition object. So I'm going to say for the total column, this is how I want you to use this value getter. This is callback function. This is how you're going to get the value that's going to be displayed inside each cell. Each row of the data that's being displayed in the grid. So, yeah, so the value getter is like configured on a per column basis, but the function is going to be invoked for each cell in that as it's going down. So the grid is going to iterate loop over, you know, each row that you're providing in the row data. And then when it comes to that column, rather than looking up the field out of the row data, it says, oh, you've got a value getter here. Let me invoke that function. It expects that function to return that value. And then that value is what's set as the inner text inside the development. And again, we're going to next, we're going to get into the value formatter. So there is a kind of in the pipeline for rendering a cell. First, you have the value getter, which is going to return the value that is going to be in the cell. But if you wanted to format that value, let's say for this total column, rather than returning a number, you wanted to say, you know, you wanted to put like a currency symbol, you wanted to have like, euro, you know, two, two euros or whatever it is that's going to be in there. That's where you would then lean on the value formatter. And you can use both of them in conjunction. You can say the value getter, here's how you get the value of the cell. And then next, aggrid will say, Oh, do you want me to format this? Rather than just stuffing the value and is the inner text in this development. And that's where you can have another callback function we're going to get to next called value formatter, which will be called with the value, however it was retrieved either through the field property, the value getter or else. And then it'll call that value formatter. And then you can, you know, you format it accordingly. So, yeah, so the value getter is getting the value for each cell in the column that you've specified for that value getter property.

All right, let's take a look at the exercise. So I'm going to open this up on StackBlitz. I'm also going to come back here, and I'm going to skip ahead and grab this code because I don't want to type it all out. Okay, so here I've got my params coming in. I've got access to the data, and I'm getting those order items. So we go back and look at our data model again. And we go to data.JSON, and take a look at that. Here's my customers, and I'm looping over my orders. And in our orders, we've got order items, and we've got orders. And in order to calculate the total, what we want to do is we want to take those order items and we want to filter them out to get the items for the order, and then we're going to map them to a product based on the product ID from that order item. And then we're going to sum those all up using array.reduce. And so we're going to take the price of the product and kind of sum those all up based on the total price. So for all of the items that are in the order, get the product, get the product price, and sum it all up, which gives us our order total. And what we can see now here is now our total column has the proper order total. This is an example that kind of pulls from this sample dataset that we're working with. But obviously, with ValueGetter, this is a callback function that you can use to basically populate the data into the grid when you're not using the field property. So pretty helpful. And you can always pull that solution on StackBlitz if you wanted to get directly to it. The next thing I want to kind of show you is how maybe we might use a reusable ValueGetter. So providing the ValueGetter function inline is definitely very reasonable, easy to use. However, you may want to have a more reusable solution. Let's say you've got lots of grids that you're displaying throughout your application. And this concept of getting, let's say, an order total is quite common. You might have multiple grids where you're displaying order details or things like that for a customer. Maybe one on an order page, maybe one on a customer page where you show all of their orders or what have you. And you might want to have a reusable ValueGetter. Now, these are just functions. So it's really easy to kind of take this function out of the column definition and make that a reusable or a higher-order function. And so what we're going to do here in this example is we're going to take a look at a multiplier ValueGetter function. So this is a higher-order function that's going to – we're going to call this multiplier ValueGetter as a function. And we're going to provide it with a value and a multiplier. And that's going to return the ValueGetter function. So it's a higher-order function. So it's a function that returns this function that is then provided to AgGrid that's going to basically multiply the value based on the multiplier that I provide. There's a bit of TypeScript stuff going on here. So don't worry too much about that. What's nice about this is, first of all, this is nice and very easy to test. I've got a function here. I can write a unit test around this.

And you can always pull that solution on StackBlitz if you wanted to get directly to it. So that way, you can see a working version of that.

The next thing I want to kind of show you is how maybe we might use a reusable ValueGetter. So providing the ValueGetter function inline is definitely very reasonable, easy to use. However, you may want to have a more reusable solution. Let's say you've got lots of grids that you're displaying throughout your application. And this concept of getting, let's say, an order total is quite common. You might have multiple grids where you're displaying order details or things like that for a customer. Maybe one on an order page, maybe one on a customer page where you show all of their orders or what have you. And you might want to have a reusable ValueGetter. Now, these are just functions. So it's really easy to kind of take this function out of the column definition and make that a reusable or a higher-order function.

What we're going to do here in this example is we're going to take a look at a multiplier ValueGetter function. So this is a higher-order function that's going to – we're going to call this multiplier ValueGetter as a function. And we're going to provide it with a value and a multiplier. And that's going to return the ValueGetter function. So it's a higher-order function that returns this function that is then provided to AgGrid that's going to basically multiply the value based on the multiplier that I provide.

So it's a function that returns this function that is then provided to AgGrid that's going to basically multiply the value based on the multiplier that I provide. There's a bit of TypeScript stuff going on here. So don't worry too much about that. What's nice about this is, first of all, this is nice and very easy to test. I've got a function here. I can write a unit test around this. I can put this in.ts or.js file. I can import this module and use this multiplier ValueGetter all over the place throughout my application. It's a pure function. It's easy to test. It's kind of isolated, which is nice and reusable. We can use a higher-order function to do something like this.

I don't think we have an exercise around that, because it's not really complex, but just because of the nature of it. But it's a good example. And you can always feel free to reference that as you need. As promised, we're going to take a look at the value formatter next. So after the cell value is known, or computed, or retrieved, the OptionalValueFormatter callback function enables us to format the value inside that cell. The ValueFormatter function is also invoked by AGGrid for each cell. It's configured in the column definition. The function is invoked. This time, instead of the ValueGetter params object, it's invoked with the ValueFormatter params object.

And we're going to take a look at this example in StackBlitz. This is a nice, just kind of reusable ValueGetter. So inside the source directory now, I have a couple of different directories in here. We're going to take a look at these. But we've got some reusable ValueGetters, some reusable ValueFormatters, and some cell renderers that we're going to get into. And in here, in this ValueGetter, I can see that I've got this MultiplierValueGetter, very similar, it's a little bit different here, maybe a little more expanded and doing some more checks. That's going to take that value that's a key of our tdata and our multiplier. And it's going to do that multiplication for us. And so then, if I come back into our price, now I can see that the price for these products, and now we're just looking at a specific product, not an order. So the awesome frozen pants, which sound amazing, and they come in the color white, we can see that the price is 55.56. And that includes the tax. So if we go back to our grid.tsx file, now I can see that I'm using the MultiplierValueGetter. And down here in the price column for the ValueGetter, I've specified the MultiplierValueGetter function, specified the row data as the generic. And I'm saying, go ahead and use the price value for each cell, and then multiply it by the tax rate. And that tax rate is also coming from the row data. So that's an example of where you could write a higher order function for each cell. And then, we'll look at the same thing for value formatters here in a second.

I don't think we have an exercise around that, because it's not really complex, but just because of the nature of it. But it's a good example. And you can always feel free to reference that as you need.

As promised, we're going to take a look at the value formatter next. So after the cell value is known, or computed, or retrieved, the OptionalValueFormatter callback function enables us to format the value inside that cell. The ValueFormatter function is also invoked by AGGrid for each cell. It's configured in the column definition. The function is invoked. This time, instead of the ValueGetter params object, it's invoked with the ValueFormatter params object. Let's take a look at that.

So the ValueFormatter params object looks like this. And we have a lot of the same props on this. We have an API, the column definition, the column itself, column API, context, data. The difference is, rather than having a getValue function, we have a value itself. Because we've already retrieved the value for that cell in the column that we've configured the ValueFormatter for. So in the instance of our total column, the value has been retrieved or computed for the value. But now, maybe I want to format it. Again, maybe I want to put a currency symbol in front of it or an icon or something else inside of that cell. And so now, I can actually return from the ValueFormatter. I can format that value as necessary based on the value. So I could, whatever, round it, all kinds of things.

If you have any questions, drop those in the chat. Happy to take a look at them. Otherwise, we're going to keep moving on. I also have a reusable value formatter here. I'm going to quickly kind of go over this. This is very similar to the multiplier value getter higher order function that I showed you previously. So this is a higher order function. Again, nice and reusable, easy to test because it's just a pure function. So it's something that I can share across all my grids.

So I'm going to check for that value, just to make sure before I call it, if it is indeed undefined. It's possible that our value getter returned undefined or that the field value is undefined. And then I'm going to return, I'm going to invoke the format method on the formatter with the value from the params object. So I've got the ValueFormatter params object. And I'm using that value property and formatting that value for my price column.

So let's take a quick exercise, have you get some practice with this one. So the goal of this exercise is to learn how to use a value getter function. So open up the exercise on StackBlitz. I want you to add a value formatter to the total column to format the value using that number format class. So just like I did. So if you want to refer back to the slides, if you haven't used that before, or you can always just jump ahead, take a look at the solution. If you don't want to code this up, feel free to grab that. And I'm going to do the same things so you don't have to watch me type. So I want you to use the value formatter to format the total column. I'm going to from the solution, come in here and grab this, at least this part of it. Yeah, we're just using a number formatter here. You could use your favorite lib if you want, Lux and whatever, moment. Yeah, date fns. Well, I guess that's more for dates than really the numbers, I guess. But if you were doing date formatting, yeah, all that kind of stuff. Value formatter. All right, we've got a bunch of people that are finished and ready to move on. So I'm going to go ahead and get started with this exercise. So close this down. Go back to our exercise and open that up. All right. And I'm just going to make sure that I have the right table. So I'm just going to go ahead and get started with this exercise. All right. And we want to add that value formatter function to the total column. So I'm going to come down here into the total. New value formatter. I'm going to get the params object. You could use object destructuring here too, if you want to just pluck out the value or whatever. I'm going to say if not params.data or whatever. I'm going to return an empty string. Otherwise, I want to return this value formatter. I'm just going to use international number format and new that up here. I'm using the English US locale, the currency and the USD and then calling the format method on that with the params.value. And if we come over here, now I can see that I get a nice currency formatted with dollars and cents and all that kind of stuff. So perfect. Pretty easy to use. Again, keep in mind, we're kind of going in order here because the value getter is called first, right? So if I didn't have a field here, I could specify value getter. And then from that value, then the value formatter is next. And so that gives us an opportunity after the value is computed or calculated or whatever. Now I can actually format that value. And on the params object on the value formatter params, instead of a get value function that accepts a field, there is an actual value property. And that value property is going to be the value itself for that cell. All right. Great. If you have any questions, drop those in the chat. Happy to take a look at them. Otherwise, we're going to keep moving on. I also have a reusable value formatter here. I'm going to quickly kind of go over this. This is very similar to the multiplier value getter higher order function that I showed you previously. So this is a higher order function. Again, nice and reusable, easy to test because it's just a pure function. So it's something that I can share across all my grids.

See you later, Sergio. Thanks, man. Yeah. So this is just kind of a reusable value formatter. And we've got an example of this. I've got a kind of a breakdown in case you're curious of some of the TypeScript generics and kind of how this is built out. This is how we would use this.

Finally, in the cell rendering pipeline, we have the value getter, value formatter, and then we have a cell renderer. So after the value for a cell is determined and we've optionally formatted the value, we can also use a cell renderer to basically have full control over how the cell is rendered in ADGrid. It's important to know that we really only want to use these cell renderers when necessary because oftentimes these can come with performance implications.

The cell renderer for a column definition basically accepts the following values. We can provide undefined, which will render the cell's value as it is using that text content. So we can override that. We can also specify a string that references a registered cell renderer, where you're using like a component, or we can actually provide a reference to a component itself.

And then I'm also saying for the value formatter, again, I could just write a function here. And that's all well and good. But let's just say I'm using this all over the place. And I want a nice reusable one, nice high, you know, I can test it and ensure that it's good to use across all my grids. Now I've got my decimal value formatter here for price. And we can see here that I've got two decimal places. Again, we can do a currency value formatter or something like that if you wanted to. Pretty easy to imagine how you might build these out. I like to write them as higher order functions so that way you can kind of compose them between your grids.

Finally, in the cell rendering pipeline, we have the value getter, value formatter, and then we have a cell renderer. So after the value for a cell is determined and we've optionally formatted the value, we can also use a cell renderer to basically have full control over how the cell is rendered in ADGrid. It's important to know that we really only want to use these cell renderers when necessary because oftentimes these can come with performance implications. So by default, the text content of the cell HTMLElements, just a div, is set to the optionally formatted value. So after the value is calculated and optionally formatted, ADGrid just sets that text content into that div element. And that's just what gets rendered inside the cell. And then there's some padding and all of that. But let's just say we wanted to add additional things to that cell. We wanted maybe to make it interactive or we wanted to add an icon in the cell or whatever it is. We want to have full control over it. And we do because it's just stuffing HTML, or if you want, a component inside of that HTML div element that is the cell itself. And so that's where the cell renderer comes into play. And we can use a cell renderer with a callback function and we can also register custom components with cell renderers and then render a component inside each cell if we want.

The cell renderer for a column definition basically accepts the following values. We can provide undefined, which will render the cell's value as it is using that text content. So we can override that. We can also specify a string that references a registered cell renderer, where you're using like a component, or we can actually provide reference to a component itself.

But we wanted to override that for whatever reason. We could just set cell renderer to undefined and it won't use any inherited cell renderer. It'll just go back to the default behavior of stuffing the value into the text content, setting text content equal to that value. We can also specify a string that references a registered cell renderer, where you're using like a component, or we can actually provide reference to a component itself.

So we'll take a look at a couple of these. So let's take a look at the cell renderer function. Actually, I guess this slide needs to be updated because I also can have a function that is invoked by AG Grid that returns HTML or an HTML element that is rendered inside of the cell. When I use the function rather than a component, I can, again, this is not a React function. It's just a vanilla JS function that gets invoked by AG Grid that returns either HTML string that is set as the inner HTML property on the dev element, that is the cell, or HTML element object, vanilla JavaScript HTML element, that then is set as the child, I think, in inside that div is like the child element.

When we use a cell renderer function, it's going to be invoked by AG Grid, and it's going to be invoked with a cell renderer params object. And here's what that interface looks like. So again, it gets called with the API and the column definition, the column, the column API. I get the data, the node, and the value. So let's take a look at an example of a cell renderer function. In this example, I'm looking at the price column, and I want to do some custom rendering. In this very contrived example, all I'm doing is formatting, but I've taken the same code from the value formatter and stuffed it into the cell renderer, and we can see that this is going to work, because this is going to return a string that's going to then get put into the cell renderer. I can also return HTML, and I can also return an HTML object. So I think what we want to do here, this... Yeah, okay. Let's go through this exercise real quick together, because I think this example that I showed here, it shows how we can just use the cell renderer, and it gets called. But it almost looks like a formatter, so I want to show you how we can actually return an HTML string. So we're going to go through this exercise together. Let me show you this.

So what we want to do is we want to add a cell renderer to the date of order column. We're going to check the value if it's undefined, and if not, we're going to return some JSX that includes a material icon next to the formatted date string, and so I'm going to render that using this. Actually, let me just bump ahead and get the whole bit here, so you don't have to watch me type it all out. All right, so let's go to the date of order. Where is that date of order? Here we go. So we're going to say for the cell renderer, I want to use this callback function that's going to return JSX. I'm going to say if not params.data, then I'm just going to return, I think, is it null or a string? I forget. Yeah, you can return null. I think you can return a string as well, or a fragment perhaps. In this instance, what I want to do is I want to return some JSX, and I'm going to set a container div, and then inside that I want to have a material icon, and then here I'm going to format the date. So what I've done, I could have just used a cell formatter. All I wanted to do was format the date, but in this instance, I wanted to display some additional HTML. I wanted to display an icon next to that. Next to that. Now if I come over, I take a look at that, I can see here that I've got my icon, and I've got my date of order. I could also add maybe some gap here, and give it like a 10 pixel, 20 pixel gap, and now we have a little spacing between the two. What's nice about the cell renderer is I get to control everything that's inside of that cell. It's just an HTML element, but now I get full control over it. I can make this interactive. I can add event listeners, all kinds of things in here. If we come in and we take a look at this, you can see here, let me bump the size of my dev tools up a little bit. So here is, it's a little hard because it's all wrapped and stuff, but here's the div of the actual cell. Normally, if we look at, for example, if we look at the previous element here, we can see that this has just got the value of the account number right here. We can see the account number, and it's just set, the AG grid in this div has set the text content to be that value that's optionally formatted, that we've wired up. But in this instance, we have provided the HTML, and in this case, the JSX, that's going to be rendered inside of this div element. So rather than just text content, again, I can kind of do whatever I want here, right? So I've got this div with some styling on it. I've got my icon and my date. And so we can see that this is nicely displayed inside of here. So the cell renderers are really powerful in that if I want to make a cell interactive, I want to really design it. I want to kind of do whatever I want inside of the cell. That's where I can use a cell renderer to have full control over it. So again, here's the solution. Take a look at that if you want. But that kind of brings us to the end of the cell renderer. Let me know if you have any questions. I'm going to get into cell editing in the last little bit here.

So we enable cell editing using the editable property on the column definition. And we set that to a Boolean to enable or disable the editing of the cell value. We set the editable to a function, if we want, to determine if editing is enabled. So we can either set it to a simple Boolean, or we can provide a callback function that returns that Boolean that determines whether the cell can be edited or not. And you could do that like let's say you have some sort of master toggle where editing is enabled or disabled. And you could use that editable function in the default column definition to toggle whether cell editing is enabled or not in the grid. Finally, you can also control it via the grid API. So programmatically, you can set whether a cell is editable or not using that grid API.

Yeah, so great question. So that's where you can use a cell renderer. And you're going to use a cell renderer that's going to get invoked with those params. You have access to the data and to the value. And then you can set that. Set it to like a, just use like Flexbox. Set it to column, display, and then you can set it to a column, and then you can do a column depth. Just use like Flexbox, set it to column, display, flex, and set the flex direction to column and that kind of thing. And then you can have those kind of dates on top of each other. It's important to know, though, as you start to get into like the height of a row, you can overflow. And you've got to do a little bit of CSS there, right? So then now you've got to deal with maybe like the height of each row if you're going to expand that out to be a little taller or something like that. And you can do that with AAPDgrid. Definitely check out the docs.

So let's take a look at cell editing. So we enable cell editing using the editable property on the column definition. And we set that to a Boolean to enable or disable the editing of the cell value. We set the editable to a function, if we want, to determine if editing is enabled. So we can either set it to a simple Boolean, or we can provide a callback function that returns that Boolean that determines whether the cell can be edited or not. And you could do that like let's say you have some sort of master toggle where editing is enabled or disabled. And you could use that editable function in the default column definition to toggle whether cell editing is enabled or not in the grid. Finally, you can also control it via the grid API. So programmatically, you can set whether a cell is editable or not using that grid API.

So let's enable cell editing using the column definition. So pretty simple here. We're just going to have on our customer name column, we've got our header and our field, and we're going to set editable to false. Excuse me, true. Which will allow the user to change the value. We can also enable it via the grid API. So once I have a handle on the grid API, which you can get either when the grid is ready through the aggrid-react-component that will be invoked and provide you a reference to the grid API. Or in some of these other instances where we've seen we get provided as the params object, we get provided an instance, a reference to that grid API. We can call the start editing cell method. And we provide it with the row index as well as the column key. So you'll notice previously on this column I specified the column ID. So the column ID is generated by aggrid by default, if you don't provide it. Otherwise, you can explicitly provide the column ID. And then I can use that when I'm in order to reference that specific column programmatically when I'm editing a cell, or I want to start or stop editing. This will start editing that cell. And then on the grid API, there's also a stop editing method, which will kind of go back to just the view mode of that cell. Let's take a look at some of the provided cell editors. So aggrid provides the following, very similar to when we looked at filtering. So you've got a text editor, a large text editor, a date editor, a select editor. And there's also a rich select editor that requires an enterprise license. So the text editor is the default. So when we use the cell editor column definition property to specify a provided or custom cell editor, we can use the text cell editor. We can also specify the large text cell editor. So these are very similar to what we did with the filtering, where we had like agnumber column filter, or agtext column filter. Same thing is true here for the cell editor property on the column definition. I can set this cell editor property. And here I'm saying, I want to allow editing of this cell. Well, I've allowed editing via the editable, and set that to the boolean value true. And then for cell editor, I've said, I want to use this cell editor. If I don't provide a cell editor property, by default, it'll use the text cell editor. Here I'm using the large text cell editor, which will show the value, which will show the value kind of in a small pop-up, on top of the, located on top of, or underneath the cell itself. So rather than inline editing, if you will, it kind of does a separate large kind of pop-up. Again, you could kind of, you have control over sizing and display of this with CSS and these kinds of things. But then that allows the user to enter more content, should they need to do so. We can also specify the built-in select cell editor. And like I said, there's also the rich select cell editor that requires an enterprise license.

Let's jump into a challenge again. Let's open this up on StackBlitz. We want to enable cell editing for the customer name column. And let's go ahead and use the large text cell editor for the account number column.

Good question. So we have a question in the chat. Is cell editing also change the date in the products array? Yeah, so by default, the cell editor is going to mutate the value. Yeah, and so we're going to get into persisting here at the end. And I'm going to reference some options that you have in terms of persisting the values. And we'll talk about, you can set the grid into a, if not read-only mode, like a specific mode, we'll get to it, I'll point it out to you, where you can prevent the mutating of that data. But there's also a callback function. So when the data does get changed, you get notified about it. And then you can persist that, you know, to your back end or whatever needs to happen. And so, yeah. So when you just do cell editing, it's going to change the data in the products array, it's going to mutate that data. You can use redux, that's your thing. There's a couple different solutions around this. So AG grid is kind of, defers to you to make the choice in terms of how you want to handle the persisting of that data and whether you want it to be mutated or not. And once you're done with the exercise, you're ready to move on. Just give me a thumbs up in the chat and we'll get started on the exercise together. OK, we've got another question. Let's see. Is there some built-in validation check performed after a cell is edited? I don't believe there's any built-in validation. Type, OK, for that we use different code. It's just show editing on a cell. Right, yeah, yeah. For the kind of the persisting stuff that's different code. We'll get to that at the end of this. And we don't have any, like, concrete examples to show you in this particular workshop for persisting of those values. But you can you can imagine how you would use it.

And we don't have any, like, concrete examples to show you in this particular workshop for persisting of those values. But you can you can imagine how you would use it. You know, you could say, OK, we have a cell here that's persisting and we're going to But you can you can imagine how you would use those callback functions to kind of wire up that persistent, you know, to your back end or what have you. Yes, so numbers will be treated as strings by the editor. Yes, so we're using the text cell editor. That's right. If we go back a little bit on our slides here. Yes, so there's no number editor. There's a date editor and a select editor, but no number editor. So when you get that value change, that's when you could format it or kind of parse that as a number, things like that. Yeah, that's exactly right. So it'll basically stuff that value back in is like the in the it'll mutate the value, stuff that in, set that, and it'll call that same pipeline after the values changed. Right. It'll call the formatter and then the cell renderer. All right, let's take a look at our example. So we're going to enable cell editing on the customer name column. So let's come down here, customer name, I've got filter true. I'm going to do editable, set that to true. Right. And now for the customer name, if I double click on it, you can see here that I've got a change here. I'm going to put my name in there and it's changed the value. And now that's what's displayed. So it's like a double click. I think you can enter as well. So if I highlight, you know, I can also arrow kind of around and I think tab maybe. Oops, you can kind of tab around these as well, kind of what you would expect in terms of like focus ability. And then if I, if I go over to customer, if I hit enter, that'll enable editing, hit escape, that'll disable enter editing. You're going to come up in here and change those values. The next thing we wanted to do was also enable editing for the account number, and we're going to use a large text editor. So we're going to come in here, set this to true, and then now we're going to do cell editor AG, large text. Uh, I forget the name of it, large text cell editor, large text, so editor. So that's what the account numbers now. And I double click, I get this. Uh, it's not very well formatted. Uh, it's not a good example because I've got the editor in here. I like, I can't even scroll this. It's hard to show this here. Like this. Versus this, you know, I don't know if maybe I did something in the styling. Um, uh, cause usually this is I get this right. Do you large text cell editor? That looks right to me. It usually, maybe it's this theme that I changed the, I just, the, the court steam is, is it is pretty new and I like it. Um, oops, I didn't mean to do that. Let's see. Yeah. The, the large text cell editor, maybe it's just because this is a string. It's not overflowing correctly. Um, maybe there's a better demo on the AG grid website of this, but this is usually, you know, usually comes up as like a larger, um, kind of pop over here. Um, yeah, anyways. Uh, I guess it's the nice thing that we can, the learning takeaway here is that we've got some optionality around the provided text cell editor and we've got kind of the inline versus the large, um, and yeah, it pops out correctly for you. Isn't that weird? Like that doesn't look right to me. I don't know what's going on, but okay. I'm glad it worked for you, Patrick. Yeah. I see the cell fine. Maybe refresh. Yeah. Weird. Huh? Yeah. Okay. Strange. Okay. So we've got a couple of cell editors. Um, here's our solution here. Oh, you know what? I forgot. That's it. I forgot to set the pop-up to true. That's why. Yeah. Let's open up this, this solution real quick. We'll take a look at this. Uh, let, that boot up. And that will come down here. We should see that. I've got the pop-up set that true. That's what I was missing. Apologies. So now there that's much better. So now I'm saying, Hey, I want you to use the large text cell editor and I want you to throw it in a pop-up. And now this is obviously you can imagine, let's say you had a much, you know, this is just an account number, but if you had a lot of data, you were putting in here now, I get like a full text area, uh, and you can edit it, uh, that way. So definitely. Definitely a much more pleasant user experience than what I was running into there previously. Sweet. Okay. Let's take a look at the custom cell editor component. So the provided cell editors are definitely like adequate. They work pretty well, but we can also build a custom cell editor to meet the user requirements of our application. And we can leverage a framework such as react Angular review. Again, AG grid works with all of those out of the box and solid, I believe now. Um, and so we can build a custom cell editor component.

So what we want to do is we want to build a custom color cell editor component. We're going to use react of course, and we're going to use the browser's built-in color input. So before we create the component, we're going to look at the imperative API. Sounds good. See ya. Thanks for attending.

We're going to use the imperative API interface that establishes the code contract between our custom component in AG grid. And so I'm going to declare an interface called the eye cell editor, and I'm going to have a function on that called get value. That's going to return any, and the get value method is going to be invoked after the editing is complete to provide the value to the grid. And that'll make sense as we kind of dive in here a little bit more. So let's, let's take a look at creating this.

So we're going to establish the communication with AG grid is going to require us to build an imperative handler from the ref that's forwarded by AG grid. So we're gonna use a forward ref function. And this forward ref function is going to use the use imperative handle, a hook, which returns that, what do we call it? Eye cell editor interface. So it returns an object that meets that interface. And you can see that I've provided that as a TypeScript generic here. I'm also using state for the value. I'm getting the value from the props that are passed to this color editor function, this component. And then I'm going to return my JSX.

So here I've got an input. I'm using the built in hype equals color input provided by my browser. I've got the value that's being the prop is coming from my state. And then on change, I'm going to call set value and get the value from the color picker. But I've got this imperative handle that is going to be used by AG grid to actually get the value from this component. So let's create a custom cell editor using the browser's color picker. So a little bit, we're going to take this a little bit further. So here I've got that same forward ref. I've got my value. And now I've got an input ref that I'm used to have the use ref hook for. And that TypeScript generic is going to be the HTML input element. And I've got my ref set here. I've got my use imperative handle hook that's going to return an object with the get value property. That's a function that returns the value from my state. And that will be used as a contract between this color picker editor and AG grid. I've also got an initial use effect hook that's going to be notice there's no depths. And I'm going to basically say, if I've got an input ref, go ahead and focus on it. And that'll make it so when the user starts begins editing the cell, I'm going to initially focus on the input, which will cause the browser to display the color picker. Let's take a look at this example on StackBlitz. So here's my color editor. Here's that same code that we just had before. And if I come down and I take a look at my grid, now for my color, you can see that for the cell editor, rather than using one of the provided cell editors, I'm giving reference to my component. That uses the forward ref. And so I've got my color editor here. And that's what's going to be used as the editor when the user begins editing that particular cell. And I'm going to use that get value. This has to be used in order to as part of the contract with AG grid. So when the cell editing stops, it'll invoke that get value to actually get the value to set that as the value for the cell in the grid. Take a look at the demo on this, but come over to color. I'm also using a custom cell renderer, and I've got a color render here. And if I double click on this, I can see that I can come in here and I could pick a different color. And now I had escaped, sorry. It's a little the in browser color editing is never great. So now when I hit enter instead of escape, I can see that now I've changed the value to be the hex for that particular color. And I can do the same thing over here and maybe change this to like a nice hot pink. And now I've changed the value using kind of a custom cell editor. So I've also got a custom cell render here. If you want to take a look at that, we can come in and take a look at our color renderer. And I can see that I've got a custom cell renderer here. And if I click on this, that's what I'm going to be using. And here's our color renderer, where it's returning this JSX of this dev element. And it's specifying the background color and kind of a hard coded height and width to actually display the color in the grid itself. So maybe this is the color. This would be more appropriate on the product rather than the customer name. But kind of an example here of showing what that looks like with a custom cell renderer as well as a custom cell editor. And this cell editor here uses that imperative interface in order to provide the value back to AG Grid. So that's pretty important. Don't forget about that part when you get into building these cell editors. Yeah, I've got some additional stuff you can read up here in the course content around what we're doing. There's also a couple different ways to register this, either whether it's a cell renderer or a cell editor. Back in our example, you'll note that I'm specifying a reference to the component itself, right, to that function. And so that's all well and good in this example. But you might be asking yourself, well, what if I want to take this column definition and I want the user to be able to like change things. Like maybe the user can kind of control how that column is displayed. Maybe the order of the column or whether it's pinned or whether the column is not pinned. Or whether the column is edited or not or something like that. And maybe I wanted to persist in some applications. It's the case where the requirement is to persist this column definition state into a database or into the back end. And so you want this to be serializable. And we can't serialize these. And so what we can do is rather than referencing or registering these by just a reference to a function, we can actually use a string definition and then register those strings to these renderers or editors which will allow us to serialize the column definition and then persist that into our database or maybe local storage or something like that. So in that instance here, you can see that the data editor. That, I think, is the wrong snippet of code. Let's kind of oops. I hit the back button. Dang it. This is the wrong snippet of code here, I think. So the data editor component, I think I need to fix this. I apologize. We can pull up the documentation for this. We can register a component associated to a string constant.

And then when we say like cell render, instead of using like a g as the prefix, we could use whatever you want for your prefix. You could say like my color renderer. And so when we come into see if we can pull this up real quick. Okay. So here underneath the documentation we can see that we can use a direct reference. Just like we did here in the cell renderer. We referenced this cube component. But we can also do it with kind of a string and you can see here that I'm saying in the cell renderer to use like cube component as a string. And then notice in this components, that I bind down to the components prop. I've set the cube component to be equal to this cube component that I've imported up here. And the nice part about that is now I can serialize the column definitions because I've got just a string value here. So that's kind of the takeaway there that I wanted you to walk away with.

OK. Let's take a look at we're going to do an exercise. So once you pull up this exercise and this is an exercise on creating a custom cell editor component. So this one is pretty fun. So you're going to open up the exercise in StackBlitz. Implement the useState hook to capture the initial value from the props. You're going to implement the getValue method in the imperative handle to return the value captured by the useState hook and update the column definition for the color field to be editable using the color editor as the column editor. So if we open this up on StackBlitz. Come over here. I've already set up a lot of this for you. So don't worry. You don't have to set up the whole thing. I've already created the forward ref and I've got my color editor. It's going to be called with props. And so what I need you to do is I need you to use the value from the props to set the initial value. And then we're going to implement the getValue here. And that will hopefully help reinforce a little bit of the learning here. I don't want you typing a bunch of code, just setting up the syntax around this for the forward ref. That'll give you a good example of how to use this for building a custom cell editor. I'll back up a little bit.

OK, so we set on the—what did we do? On useState, we're getting the value from the props. I'm also going to implement the getValue method to return the value to the input. So here, I'm just going to say getValue. And I'm going to return the value from my state. I've got this all set up down below. I'm going to come over to the grid file, grid.tsx. I'm going to set editable to true. I'm going to set the cell editor to be the color editor. And let me just make sure I reload that. Now, if I double-click on that column, I get my cell editor. And now I can click on and change the value of this. And we can kind of have our cell editor changed over here, change it to a nice, nice bright orange or whatever. So, yeah, so there's a couple of things in this. We need to make sure that we set the initial state value from our props. We need to implement the useImperative handle hook and implement the iCellEditor interface here that returns an object with the property getValue that is a function that's going to be invoked by AGGrid when the cell editing stops that provides the value back to the grid. And in the grid itself, for the column definition on the color column, I'm going to set edible to true, so that way the user can edit the value. And I'm going to use a custom cell editor rather than the provided text editor. And then this instance, I'm going to set a reference to my color editor function or component. Cool. So that's how we build kind of a custom cell editor. Again, what's nice about AGGrid is the extensibility. So you can build these cell editors and these cell renders. They're all just components. You know, and so this cell editor can be used anywhere else. You need a color editor in this, you know, in whatever grid you need it in. Also nice and easy to test as well.

So now that we've allowed the user to make changes to the values in our grid, we have a couple of options for persisting that data. So by default, whatever field that's bound to the row data is going to be updated or mutated. We talked a little bit about this earlier because we had a question about it. We also have a couple of options after the row data is changed. There's also a value setter function that is invoked optionally by AGGrid to actually set the value or to persist that value into the row data. There's also a grid API on cell value changed event that we can wire up and we can listen to value changed events. And there's also a cell edit request event that allows us to also hook into the editing flow of AGGrid where we can have control over that editing and persist the data. Let's take a look at the value setter function. So in this instance, the data is still managed by the grid, meaning the values in the row data is still being mutated, right? This is kind of you can think of this as the inverse of the value getter function. It's going to be invoked by AGGrid with the value setter params object. And we need to tell AGGrid at the end of this function, we need to either return true or false, and we need to tell AGGrid what we want it to do. So if we return true, we're indicating to the grid the value has been updated successfully and we want it to go ahead and refresh the cell. And that'll trigger AGGrid to go ahead and get the value, optionally format it and render it. If we return false, for whatever reason, from the value setter function, that tells AGGrid that the value is not updated. And this is where we have, perhaps, if we wanted to do some sort of parsing of the data or something before we allow the data to be set or mutated into the data that's being managed by the grid. So let's say if we wanted to have some sort of verification or validation or whatever, if it doesn't meet that criteria, we can return false and then nothing happens. The value is not updated or mutated by the grid and the rendering is also not triggered. Let's take a look at an example. So here, I've set the editable property to true and I've also implemented a value setter. And this is going to be a function that is invoked by AGGrid with the value setter params object. There's two properties on this object which are kind of important. That's the old value and the new value. And if the old value equals the new value, it might be that I just don't want to do anything. I don't want to go through the cell rendering pipeline, change the value and redo it. There's no point because they're the same. The user started editing and they escaped or whatever. And so the values are the same. So I'm just going to return false from my value setter. If the value has changed on my props to my grid function, I might want to call some callback function and let a parent component know. So I might call a callback function, called on name change, that gets invoked with the data. And then I'm going to return true.

And then I'm going to return true. So in this instance, I'm going to let some parent component. I'm going to basically say, hey, the name has changed. Invoke the callback function that was provided as a prop to this grid function. I'm going to give it the data. And I'm going to return true because I'm still going to allow AGGrid to mutate the data and then re-render the data inside the grid. But this gives me an opportunity to let that parent component know that the customer name has changed and to go do something. Maybe fire off a request to my API or my back end or whatever it is. Persist that value.

The next option we have for persisting value is called on cell value changed. So again, in this instance, the data is being managed by the grid. And the on cell value change event is emitted whenever a cell value has been updated after the user has completed editing of that value. An important note here is that on cell value changed is only updated or invoked when or omitted, whatever you want to think of that. It's an event, so I guess we'll say omitted. That on cell value changed event is emitted only when the user has actually updated through a user edit through the UI, not if they've pasted data from the clipboard. And so there is clipboard. You can use like copy paste with AgGrid. And you can allow the user to change values in the grid using the clipboard, but that won't trigger the on cell value changed event. So just be aware of that. So we're going to use the on cell value change prop binding on the AgGrid React component. And that will emit the cell value changed event object with those generic T data and T value. And that will contain the old value and the new value.

Finally, we also have the on cell edit request event. This event submitted when the cell value has changed after editing. To use this, the data is not being managed by the grid anymore. This is where you might think of like using something like Redux, where you have immutable data. So the grid must use read only mode. And so I'll show you how to do that. We need to put the grid in read only mode. And we'll use the on cell release event. And so that's going to be a request event. And we'll use the on cell edit request prop binding on the aggrid react component. And that's going to emit the cell edit request event object. And here's what that looks like. So here I'm going to set read only edit to true. So that way I've kind of entered this immutable data state telling aggrid, I don't want you to manage the data here. I got it. Let me do it. And then I'm going to provide the on cell edit request event. Or prop that's going to get called with the cell edit request event. And again, I'm just going to log out the values inside of here. Yes, I kind of walked through that. So you might be wondering, but wait a second. How is the cell value updated in that last example? But because we're only logging out the data, the cell value is never updated. So we need to use a strategy for updating that cell value. Again, if we go back here, on cell edit request, because we're in read only edit mode, I have to kind of implement how the values actually change, because aggrid is not going to mutate it for me anymore. So I need to implement that.

So you might be wondering, but wait a second. How is the cell value updated in that last example? But because we're only logging out the data, the cell value is never updated. So we need to use a strategy for updating that cell value. Again, if we go back here, on cell edit request, because we're in read only edit mode, I have to kind of implement how the values actually change, because aggrid is not going to mutate it for me anymore. So I need to implement that. And there's a couple of different ways we can do that. We can use the on cell edit request along with what's called the get row ID function, which uses immutable data. Again, you can use something like Redux. You can use the grid API to actually set the row data. Or you can also use what's called transactions, where you're mutating chunks of data via the grid API into that grid data. The important part here is when you're using this on cell edit request, aggrid is no longer managing the data. You are, which means you've got to kind of wire some things up. And so you can use the get row ID function with immutable data. You can use the set row data method. Or you can apply a transaction. And in this workshop, I don't dive into those. You can definitely check out the docs on the set row data and how you implement get row ID with immutable data and how you can trigger, I think, what they call change detection inside aggrid, which will actually trigger the data when that immutable, that object reference is changed, will trigger a change to the grid, which will invoke re-rendering of the entire row.

Okay. Sweet. We're almost done. We only got a couple of minutes left. I want to be conscious of our time here. I think there might be a couple of exercises in this or maybe not. So I'm going to kind of go through some of the different options for formatting and editing, or excuse me, for formatting and styling. So when it comes to formatting or styling aggrid, you've got a couple of different options. So aggrid comes with several pre-built themes that you can use, and we'll take a look at those. And those themes are customizable via CSS variables, and there's also a CSS or SAS wrapper around that if you want to use that. You can also override global CSS styles. aggrid exposes those to you and allows you and encourages you to change those CSS styles, like ag-row, ag-row, ag-row-even, ag-row-odd, that kind of thing, if you want to do some striping of the rows. You can also do custom styling of specific cells as well as styling of rows. I do want to note here real quick, whenever you're overriding the global CSS styles, be aware not to change the following, position, overflow, or pointer events, because aggrid uses those CSS styles specifically to deal with scrolling and positioning and user interaction of the grid. And if you start to muck with those CSS styles, you're going to run into some issues, so just be forewarned. Let's take a look at the cell styling. Cell styling allows us to specify cell styles in the column definition. We can add classes using the cell class property, and then we can add and remove classes using the cell class rules property. So here, we can specify cell style for the customer name for the column, for customer name, and we're going to set the color in the background color. Excuse me. We can also add a class to these particular cells. So in that div element for each cell in that column, you know, each row in that column all the way up and down, we're going to add a class to that called customer-name, and then we can have CSS associated with that class to style those however we want. We can also provide a function that's invoked with the cell class params object. Again, cell class only adds classes and never removes classes. So keep that in mind. So here, I can say, okay, for the value, if I don't have any value, I want an error class. Otherwise, I want the customer-name class on this cell. Maybe I want to style this different to bring attention to that for the user. The cell class rules property is an object mapping of classes to predicate functions that are invoked with the cell class params object. These cell classes are going to be added or removed every time the value changes. So whenever the value changes, similar to like value formatter, whenever the value changes, it's going to invoke these predicate functions. If they return true, the cell, this class is applied to that div element, to that cell. If the predicate function returns false, this class is removed from that development. So if you need to be toggling on and off those classes based on the value, you need to use cell class rules, not just cell class. If you just use cell class, it's only going to add that class. It's never going to remove it. So it's an important thing to know.

Yeah. Sergio points out, yeah, this is great for column size, especially dynamic width, depending on the data being pulled in. Yeah, absolutely. So that's cell styling. For row styling, it's very similar. We have a row style, we're just like hard code, it's almost like inline style, right? We get hard code on that div element that contains all of the columns, or all of the cells in that row. We're going to apply a style via row style. We can use get row style as a class. So we can say, okay, I'm going to get row style. Use get row style as a callback to conditionally add styles. We can use row class to set the classes for all rows. We can get row class for a callback to conditionally add classes. And again, if we need to add and remove, we can use row class rules. So let's take a look at those. So here, I'm going to kind of wire up a callback function for get row class. I'm hard coding a row class to a const. I've got some row class rules, or I can just inline an object and set the row style. Here's what that row class rules might look like. Again, this is just an object where the property is the class that is conditionally applied based on the predicate function is going to be invoked. I think it's another interface, maybe like cell class rules, params, or something like that. I'm plucking off, I'm destructuring the object and getting the data. And I'm checking if the total is greater than 100. I want you to highlight it, or maybe in this case, if the date is less than, or is an old order, then highlight this perhaps with a danger class. And those will get toggled on and off because I'm using cell class rules. If I just use a callback function called get row class, this is just going to add either the row highlight class or in this instance, nothing. I'm just returning an empty string. I can use that to conditionally apply classes to the row element, but never remove them. This row highlight might never be removed. That's where if you need to add and remove classes on the row, you're going to use that row class rules.

Alright. Last section, how about row selection? Is there any change on that? Yes, so with row selection, there's also a class that you can use, just globally, you can style it. Like I think it's agrow selected. If you go in and you look at the demo, Sergio, in the docs, you can see for row selection. So you can definitely change when a row is selected with like a class name. Row is selected with like a either programmatically or like a checkbox, something like that. You know, user selects a row, kind of like maybe in your inbox in Gmail, you select a row, you can highlight it, you can change the background color, border, all that kind of stuff. You have control over that div element. And then inside is the divs for each cell. And so it adds, agrid will toggle a class on that and you could just target that class if you want. So makes it super easy. They also have classes for like odd and even. So if you want to like stripe your rows or something like that, you can target like odd and even. In fact, if you just kind of come in real quick, and we'll look at this before we get to our themes. Here's my row. You can see. Let me bump this up a little bit for you. It's a little hard to read here. But you can see this as agrow, I can target that class. It's an even, so agrow even. It kind of has some level on it. Yeah, so there's a couple of different classes that I can toggle on there and selection is one of them.

Okay, we're about two minutes over. I'm going to just wrap this up real quick just so we can get through all the content. Hopefully, we haven't gone too far over. But for the final thing we want to talk about is just the themes that come with agrid. Out of the box, agrid provides several themes. You've got the original ballham theme. It's very dense. It's been around for a while. It's very good if you're just playing a lot of data because it's quite dense. There's not a lot of padding and white space. There's also Google's material design. So you can theme it that way if you want for folks that are using that already and are familiar with it. That's definitely not dense, lots of padding, very spacious. Easy to use but you're not going to get a lot of data on the screen if you're working on, again, like a banking application or something where you're showing like a ledger or something. It's going to have a lot of spacing. The quartz theme is the newest. It's modern, high contrast, spacious. It's a nice theme that they've built. I like it. Then they also have an alpine theme they came out with a few years ago. They recommend using the quartz theme today. It's still available if you want to use alpine. It's very similar. Modern, pretty spacious, got some good padding to it. But don't reach for the alpine theme today. Reach for the quartz theme if you're looking for something that has that look. And all those themes come with dark mode options. And you can also customize the heck out of these themes. They have full documentation for CSS variables. You can apply CSS rules and they have a SCSS or SAS wrapper that you can use. The CSS variables were introduced in version 28. So keep that in mind if you have an older install. Previous to that, you can go back in their documentation to previous versions and you can still customize things. It's just a little bit different because they didn't use CSS variables. You had to use more of the SCSS like mixins and things like that and variables. Yeah. So here I can target the AGI theme quartz. And here I'm going to override like the background color, the foreground color, and maybe the border color. And so I can set those CSS variables. There is a full list of all of the CSS variable options, a reference documentation available on the AG grid website. So go check that out when you're using these and you want to start theming stuff. You can also just basically have like CSS rules. You also this allows you to use the existing CSS variables and override things as you kind of target a little deeper inside the grid. You always want to prefix it with the theme. So here I'm going to say for the AG theme quartz, I want to override the header cell elements. And I want the background color and border to be styled appropriately. And here I can reference the AG background color CSS variable. Here's an example of the even rows. Maybe I want to change the styling for even rows on that. Finally, we also have a SCSS wrapper for those that kind of prefer this approach. So you need to bring in the SCSS wrapper and you kind of have to include that and set the theme up and then you can start overriding stuff. Again, this is a very small example. Definitely check out the documentation if you want to use SCSS. The recommended approach is certainly to use CSS variables and CSS rules for styling of the grid. And with that, that brings us to the end of the content. And we just want a couple minutes over. So thanks to everybody for hanging out. If you have any questions, I'll hang out for a couple more minutes. Happy to answer any questions. If you want to get a hold of me, you can check us out on liveloveapp.com. And you can contact us if you're looking for help with the AG grid. Happy to help. Just get a hold of us. We do a lot of consulting, a lot of really heavy, complex implementations using AG grid. And you can also follow me on Twitter. I'll drop that. I guess it's x. I don't want the login flow. Well, I'll drop it directly in the chat here. So with that, thanks, everybody, for coming. If you have any questions, I'll stick around.

SERGIO GUADANCHESEA Hey, thanks, Ryan. This is Sergio. I wanted to ask you one of the sometimes challenging tasks was to do infinite row rendering, you know? Yeah. We had to, I think we had to do some special things to do that. Is there any change from version 26? I haven't checked the latest versions, but any easiest way to implement the row model?

What was the question again? So around the infinite row model? I mean, you know, try to implement one is the kind of like the limited row pooling, and the other one is the infinite row model that you're showing here? And is there any improvement on that? On the infinite row? I don't know that there's been any improvement in the last major on this. The nice thing is infinite row is in the community edition. So MIT license. You can use it. You know, it's basically all it is, you know, it's the client side row model, just with chunking is what I would call it, or blocking, right? Where you're blocking in the data. Keep in mind that ag grid already virtualizes columns and rows. So even if you have like 10,000 rows, it doesn't display 10,000 rows in the DOM. Like it's still like they call it virtualization. I think it's a fairly good word for it. But they'll only, they'll add and remove elements as the user is scrolling down through the grid and just kind of based on the viewport and all of that of the grid. But I'm not aware of, I think the answer to your question specifically, I'm not aware of any big changes to the infinite row model in the last version. Okay. Yeah, it's infinite row is kind of like a mute. It's like half client side row model, half server side row model, and then you have to set up this data source. And then the data source is a class or an object that gets, it kind of has these callback functions that get called on this interface. Compromise of making API calls to the backend and the backend can resolve the returning certain amount of rows from the database and all the, sorry, all the logging and stuff. You know, it's kind of like a compromise on that. Yeah. Yeah, it is. And, you know, as I'm scrolling down through it, you can see some blank rows as I'm like just really scrolling fast. I don't know if it shows up on zoom. But yeah, the nice thing about this is you can still fetch stuff from the backend, I think because you still get the ability to get things by block. But I'm trying to remember, I've used the infinite row model in the past. Yeah. And I think it's still, like it's asynchronous in that you have this like success callback or fail callback. If I were to be critical of the API, like I'd rather I just be like truly like a promise based and truly async. But you do have the ability to use the infinite row model to like asynchronously fetch data for a given block or chunk and then call this callback like when it's successful. Yeah, always with the goal of the performance, you know, because in when you have so many, I mean, the traffic is high and the user expects, you know, things to be rendered in less than a minute, sometimes. Yeah. And it's, yeah, I'm just checking if there's any, but it's, you know, it's a lot of things doing custom things but developing and, you know, with the community version, I don't know if the premium or the enterprise version has any improvements on that, maybe. The server side row model is kind of a whole different beast. It's similar to infinite row model, but much different. But you still are, like, you still have kind of whatever the, you know, you're still doing a lot of asynchronous data fetching. And you, there's lots of strategies, you can like start pre-fetching data, all kinds of things to try to like make it more performant. But you're still doing a lot of back-end front-end, like you're going back and getting data. You know, and you can control the block size, you know, so you can set the block size. Yeah, exactly. Yeah, exactly. There's a, yeah, there's some properties that you can set, like, for example, exactly, there's a hundred rows or 150 rows per chunks or something like that, and it depends on your user requirements. Yeah. Totally, yeah, agreed. Yep. Thanks so much, Bryan. And it's been great to refresh, get a refresh. Yeah. Cool, man, great to connect with you. Thanks. Yeah. We got another question here from Christopher, as a Google Dev Expert, have you used AG group with Firebase data sources? Yep, you betcha. I've done, there's a company out there called SaberSim, they do, it's kind of a US thing. I'm not sure where you're located, Christopher, but they do, they do, it's a, like a sports betting optimizer. Optimizer, and they heavily use AG grid and they use Firebase data sources for sure. And so I don't think I'm leaking anything sensitive. I have used, so we've used, used it with both the real time database as well as the, just Firestore. Yeah, and so yeah, you can definitely, in this instance, that's an Angular project. So they're using Firebase with Angular. So they're using a lot of RxJS for like binding of data and stuff like that. And so you're getting that data from Firebase kind of streaming in asynchronously through a web socket that comes in. Do they, I don't know if Firestore actually uses a web socket or more polling, but anyways, it doesn't matter. There's a project called AngularFire, which I haven't used in a bit, but provides like an RxJS compatibility layer around the Firebase JavaScript SDK that allows you to like more easily use RxJS for streaming data asynchronously into into your application. And all of that to say you can definitely stream data into AG grid from Firebase, whether you're just using vanilla JavaScript in the Firebase JavaScript SDK, or if you're using something more fancier like RxJS. Of course, there's other libraries you don't have to use RxJS, but Angular kind of RxJS is close, kind of close to the metal with Angular. And so you can it just kind of works well together, Firebase. Firebase AngularFire, which again is just like an RxJS wrapper, so to speak, around or provides some RxJS functionality around the JavaScript APIs for Firebase that allows you to stream data into AG grid. So, yeah, definitely. And if you're running into problems on that, Christopher, I'm not trying to sell anything here. But if you do want some help, man, reach out to me. I'm happy to help you out with that or something like that. So I've definitely used that with a Firebase data sources. So it works pretty well, which is nice. Works really well. And like I said, there's I'm not plugging them at all, but there's a company I've worked with them in years past called Saber Sam. And they do it's a optimizer for like daily sports fantasy leagues and stuff like that for sports betting. And so they have built a tool and you can actually see it right here. This is AG grid right here in this in this picture here. Doesn't quite look it. But this is a grid that they built out and does a lot of gives you a lot of functionality because you're dealing with tons of data if you're into sports and all of this stuff with projections and all kinds of stuff, ownerships and all that. And yeah, you can kind of optimize some of your things around that. And so, yeah, a lot of this data comes from a back end, certainly like a more persistent back end, more scalable infrastructure for some of that. But then a lot of the users, you're using the application and changing and overriding data. They use Firebase for all of that, and it works really fast and really well. You can stream in data, which is pretty cool. Pleasure to meet everybody. Thanks for attending. And yeah, check out you can follow me on Twitter if you want or check out the website. And yeah, good luck with AG grid and hope everything goes well. Thanks, everybody.