Coloring cell in AG-Grid depending on it's content by using justpy web framework

Question

I encountered a problem using AG-Grid in combination with justpy web framework.

JustPy is an object-oriented, component based, high-level Python Web Framework that requires no front-end programming. With a few lines of only Python code, you can create interactive websites without any JavaScript programming.

I want to change the color of a cell into the grid depending on it's value. The grid consists of 22 columns with several rows. The initialization of the grid is as follows:

#table Analysis
gridAnalysis = jp.AgGrid(style=styleTableAnalysis, a=divTableAnalysisdata)

I found a solution for JS on the official AG-Grid documentation JavaScript Data Grid: Cell Styles. In this documentation, the variant of using the Cellstyle and the CellClassRule are listed. With the Cellstyle I can only change the color of the whole column and not a special cell. The CellClassRule doesn't work at all bc I can't include the JS for that rule by using justpy.

Here is my approach for coloring the cells depending on it's value

#list with dict for the data of two rows
gridAnalysisRowContent = [
    {'C': 0.0206, 'Si': 0.003, 'Mn': 0.079, 'P': 0.007, 'S': 0.005, 'Al': 0.0, 'N2': 0.0, ...}, 
    {'C': 0.053, 'Si': 0.011, 'Mn': 0.851, 'P': 0.009, 'S': 0.0025, 'Al': 0.032, 'N2': 0.0, ...}
]

#turn list into pandas dataframe
gridAnalysisRowContentDF = pd.json_normalize(gridAnalysisRowContent)
            
#load dataframe data into the grid
gridAnalysis.load_pandas_frame(gridAnalysisRowContentDF)

#list for the keys of the dicts from list gridAnalysisRowContent
keys = ['C', 'Si', 'Mn', 'P', 'S', 'Al', 'N2', ...]

#iteration for coloring the cells depending on the cell value.
#if the value is less than the maximum value, the cell should be colored
for row in gridAnalysisRowContent:      #iteration for the two rows
    for k in range(len(keys)):          #iteration for the keys
        element = keys[k]               #current element
        maxValue = 0.5                  #max value
        contentElement = row[element]   #value of the current element
        if contentElement < maxValue:
            #coloring the cell
            gridAnalysis.options['columnDefs'][k]['cellStyle'] = {'background-color': 'lightblue'}

This works fine but it colors the whole column and not the separate cell.

How can I color a cell depending on its content?

Answer 1

Solution

I found a solution to color single cells of an AG-Grid in combination with justpy web framework.

For that solution I used the CellClassRule propertie of the AG-Grid. You just need to add a cellClassRules propertie to the columnDefs of the cell you want to change it's backgroundcolor depending on it's own value. The code below shows an small example.

import justpy as jp
import pandas as pd

#list with dict for the data of two rows
gridAnalysisRowContent = [
  {'C': 0.0206, 'Si': 0.003, 'Mn': 0.079, 'P': 0.007, 'S': 0.005, 'Al': 0.0, 'N2': 0.0}, 
  {'C': 0.053, 'Si': 0.011, 'Mn': 0.851, 'P': 0.009, 'S': 0.0025, 'Al': 0.032, 'N2': 0.0}
]

#turn list into pandas dataframe
gridAnalysisRowContentDF = pd.json_normalize(gridAnalysisRowContent)

def grid_test():
  wp = jp.WebPage() #create wp
  gridAnalysis = jp.AgGrid(a=wp)  #create grid

  #turn list into pandas dataframe
  gridAnalysisRowContentDF = pd.json_normalize(gridAnalysisRowContent)
              
  #load dataframe data into the grid
  gridAnalysis.load_pandas_frame(gridAnalysisRowContentDF)

  #iterate through all columnDefs
  for column_defs in gridAnalysis.options['columnDefs']: 
    maxValue = 0.05 #set max value
    minValue = 0.02 #set min value
    #define the cellClass Rules (only works with background color as tailwindcss class)
    column_defs['cellClassRules'] = {
      'bg-red-300': 'x > {max}'.format(max = maxValue), #set background color to red if cell value is greater than maxValue
      'bg-blue-300': 'x < {min}'.format(min = minValue) #set background color to blue if cell value is smaller than minValue
    }
  return wp

jp.justpy(grid_test)

Notice: the cellClassRule propertie only works with the background color as tailwindcss class in this example 'bg-red-300' and 'bg-blue-300'. The x represent the cell value.

Answer 2

Are you using AdapTable with AG Grid?

If so then you can use their Conditional Styling which will style cells based on their values using whichever rules you provide.

See: https://docs.adaptabletools.com/guide/handbook-conditional-styling