Dash AG Grid: Accessing full column data inside valueFormatter function

Dash Python
1

Hey folks!

I’m using Dash AQ Grid, and I’m trying to create a valueFormatter function for one of my columns to highlight the background colour of the column based on a decimal between 0-1. While I’ve got the basic mechanism working, I now need to make the highlighted color normalized based on the range of the values in this column. eg for a given set of data the range could be say 0.2-0.7.

Is there a way I can access the entire column’s data within my valueFormatter JavaScript function, so that I can get the min and max values dynamicly? So far I’ve only seen examples where the current row’s values have been used.

The closest thing I’ve come across is the last example on this page: Styling Cells | Dash for Python Documentation | Plotly. This uses the cellRendererParams of the target column, and giving it min and max values. However these values have been generated up front in Python using the grid’s initial data. My data is dynamic, being updated by a callback, so this approach won’t work, unless I have the callback also dynamically update the columnDefs prop of the Dash AgGrid component.

I imagine this approach should work, but it it would be much cleaner if I could derive min/max values dynamically inside the valueFormatter JavaScript function. Does anyone know if this is possible?

2

Hello @nedned,

Long time, no see. :grin:

Yes, this is possible, however it will require querying all the data in the grid for each cell, so depending upon size, it will become performance hungry.

I’d recommend creating a function that you can call and memorize the outcome for like half a second.

Anyways, something like this should work:

function queryAllData(api) {
     var allData = api.forEachNode((node => node.data)
    return allData 
}

And then to call:

params.value ? queryAllData(params.api) : null

And this is just to get you started, you have options here:

3

Hey hey!

ahh awesome, thanks! that’s a good point about keeping in mind performance considerations. the app I’m working on only has in the order of a couple hundred rows at most, so likely not a concern in my case. I’ll take that approach for a spin!

1 Like