Using ag-Grid with React: Data

Value Getters


This video and the next three are based on the aggr-data starting point.

A Value Getter is a function that gets called allowing values to be pulled from literally anywhere, including executing any expressions you wish along the way. Use value getters when retrieving the data requires more logic, including executing your own expressions (similar to what a spreadsheet would do).

In this video, we create an address value getter to concatenate the various address fields in our data. The only thing we need to do is update our Address column definition in App.js:

// src/App.js
columnDefs: [
  // rest unchanged
     headerName: "Address",
     valueGetter: ({ data }) =>
        `${data.address.street1} ${}, ${data.address.state} ${}`

By the way, in the video I mention the Value Cache. The value cache is used for the results of value getters. You'll want to read the Value Cache section of the docs to understand more about how value getters can impact performance and how to optimize them.

This works great for data that is either a string or a number. What if we need to do something more complicated? For that, we can use Cell Renderers. Let's learn about that in the next video.


I finished! On to the next chapter