It's worth noting that the value getter function is gonna be called by default every time agent grid needs that value. So yeah, it's gonna be called for sorting. It's be called for rendering or display. And that can have a pretty big overhead with big dasets.
Agent grid does come with the ability to do something called value caching. You can kind of opt in to the value cache. So if you turn on the value cache, then each time a value getter is executed, it's gonna kind of cache that value and only call your value getter once. So this is for a fairly advanced use cases where you know, you're having performance problems or you know, you're doing time sensitive tasks inside of your value getter function. But I just I kinda want to point out that there is a value caching mechanism built into AG grid. If you have a concern about the performance of the subreg pipeline.
And Kate, can you customize the size of that cache? I know you can customize the size of it and how long it's going to take to like expire. Or how long, yeah. Yeah, just like a kind of a normal caching solution. Yeah, and you can also customize like the blocking and the virtualization and some of that as well. If you need to, if you want more or less in the DOM, you could turn on and turn off column virtualization as well. That's something that you need to do.
All right, Brian, you gonna walk through this exercise? Yes, yeah. Let me get my Chrome up here, we're in the value formatters, there's our exercise. Pull this up. All right, so what we wanna do is we want to add a value formatter to our total column. So I'm gonna come down here, we're gonna add our value formatter and we're gonna get a params object. And inside of here, what we wanna do is we wanna first just make sure that we have data. So we're gonna say, if we don't have any data, let's just return zero. Otherwise, what we wanna do is we're gonna use the international number format and we're gonna use the ENUS locale and then we're gonna customize this, we're gonna say the style is gonna be currency and the currency is gonna be USD. And then we're gonna call the format method on that and give it to the value. And so now when we come over, we should get a nicely formatted USD currency. And of course, you can use international number format to format this and other currencies in the styles. Just like I mentioned, with the valueGetter, you can also create higher order functions for value formatters. I'm not gonna dive into this one, kind of the details of the implementation of it. But I think the takeaway here is, I can create a reusable value formatter, high order function, that allows me to do maybe a decimal value formatter. And then I can use that down below and say, hey, use this decimal value formatter. I'm gonna do some TypeScript to kind of get some type safety here. And then I want you to have, you know, two as the number of digits. And then we could use, you know, it's just a function. So you could just reuse that anywhere you need in your application. Or if you're doing some kind of fancy monorepo, you could share that across applications and projects. All right, cool. Let's go on. Oh, should we take a break, Mike? What do you think? Yeah, it's like just a short break. Yeah, let's do seven minutes. So we'll start back up at five after. All right, let's dive back into it. Mike, you want to teach us about the cell render function and how we can customize the rendering of cells in the AG grid? Yes.
Okay, so as part of the cell rendering pipeline, we have so far learned about the ability to calculate values using the value getter and then format values using the value formatter. But what we might want to do is like really do something advanced in terms of the way we render the values, maybe show complex controls, complex elements or styling. In those cases, that's where you want to break into a cell renderer. So after the value for a cell is determined and we have format of the value, those two things have run. We can then use a cell renderer to have full control over how that cell gets rendered by AG grid.
It's important to know that we only wanna use these when absolutely necessary. Because what's really gonna happen here is that we're gonna be adding additional elements, event listeners, you know, things that might slow down your grid is what we're producing the cell renderers. And so we all wanna use them when absolutely necessarily, and when necessary because this is one of these areas in which you can start to really impact the performance of your grid when you're working with really large data sets.
So the cell renderer for a column definition accepts the following values. So it can accept undefined, which basically means, hey, just render the value that we've calculated and formatted for you as a string, as the text content in the cell. It can also accept a string that references a registered cell renderer. This would be handy if you wanted to make your column definitions serializable. Or it can be a React component, and that can be either a function component or a class component. We're gonna really just be looking at function components in this particular workshop.
Before we dive into it, again, let's talk about some of the pieces of information that we're gonna get inside of these cell renderer. So we're gonna be getting the cell renderer params, and these are very similar to what we're getting inside of the value formatter params. Except it's worth noting that when we're talking about the value at this point, we're really talking about the value after it's been calculated using the value getter and formatted using value formatter. Again, like the other functions we've looked at so far, these you can get access to some of the programmatic APIs for controlling the grid, the column or the node itself, along with some of the configuration that we've already set up for the grid.
So let's take a look at an example of a cell renderer function. And in this case, I'm gonna do something very similar to what we've already done, just to give you an idea of kind of where we're going with this. We're gonna look at some more complex examples, of course, as we get more into this. But, here in the cell renderer, what we're gonna be doing is, we're gonna be looking again at formatting some values. But it's important to note that we're doing this as a cell renderer rather than a cell formatter. And this, as we'll see in an upcoming example, is gonna let us do some interesting things in terms of controlling the template. So cell renderers will be a function or a react component class. So here, we're testing to see if we have a value. If we don't, we return null.