Is there an easier way to highlight a clicked cell with Dash AG Grid?

Dash Python
1

Hi! I have a Dash AG Grid table in my app. I already have a bunch of working cell styles that will apply given styles based on a condition. I’d also like to “highlight” the clicked cell by applying something like {“borderColor”: “#ff0000”} to the previously-clicked cell (via Dash AG Grid’s cellClicked keyword). This was a behavior that existed natively with DataTable.

The issue I have is that only one cellStyle applies to a given cell at a time, so if I have something like

defaultColDef: {
  cellStyle: {
    styleConditions: {[
      {condition: "params.colDef.field == 'col1' && params.data.col1_color == 'Blue'", 
      style: {'color': 'Blue', 'fontSize': 14, 'fontFamily': 'sans-serif'},},
      {condition: f"params.colDef.field == '{CLICKED_COL_ID}' && params.rowIndex == {CLICKED_ROW_IDX}", 
      style: {"borderColor": "#ff0000"},},
    ]}
  }
}

If both of the above conditions apply to the same cell, only one of the styles works. This is a simple example, my actual list of styleConditions is significantly longer.

I think a bruth force way to do it would be to copy each styleConditions and have a version where it has f"params.colDef.field == '{CLICKED_COL_ID}' && params.rowIndex == {CLICKED_ROW_IDX}" in it, but I’m afraid that that will get messy really quickly.

Has anyone found an easier way of doing this?

2

Hello @spicycactus,

What’s the difference for your purposes between cellFocused and cellClicked?

3

@jinnyzor I’m not super familiar with how to use cellClicked & javascript here. My purpose for using cellClicked was to change the style, so similar to

@callback(
    Output("my-table", "defaultColDef"),
    Input("my-table", "cellClicked"),
    State("my-table", "id"),
    State("my-table", "defaultColDef"),
)
def update_style(...) {
  # generate new style including
  # {
  #   condition: f"params.colDef.field == '{CLICKED_COL_ID}' && params.rowIndex == {CLICKED_ROW_IDX}",
  #   style: {"borderColor": "#ff0000"},
  # }
  new_style = {...}
  return new_style
}

would there be a way to use cellFocused to update borderColor while keeping other styles related to the same cell? If it helps, I never change borderColor in any other place, so cellClicked/cellFocused would be the only situation where borderColor changes

4

cellFocused already has a border around it, you just want to change it to colors that you want?

This is default by AG Grid.

You can target this class with no major adjustments to your code, just a stylesheet addition:

.ag-theme-alpine.ag-theme-custom-class .ag-cell-focus {
    border: 2pt solid #f7ce87 !important;
}
5

@jinnyzor sorry I should’ve clarified - it seems like by default with AG Grid, the border color of the focused cell changes, but it doesn’t stay changed if the mouse is clicked outside of the table. With Datatable it seems like the border color will stay changed until a different cell in that table is clicked, which is the behavior I want.

6

The above styling will stay, unless you have something to clear the focused cell. :slight_smile:

7

@jinnyzor I didn’t know that that was the intended behavior! So this is behavior in this video is unexpected?

Video: Imgur: The magic of the Internet

If so, there must be something else hidden that isn’t obvious to me right now. I created a barebones AG Grid with this code

df = pd.read_csv(        "https://raw.githubusercontent.com/plotly/datasets/master/2011_february_us_airport_traffic.csv"
)
dag.AgGrid(
    id={
        "component_type": "table",
        "type": "get-started-example-basic",
    },
    rowData=df.to_dict("records"),
    columnDefs=columnDefs,
),
8

That is the default behavior, please try the stylesheet that I provided…

9

Sorry I completely misunderstood the last message. Overriding .ag-cell-focus worked for me, thank you so much!

2 Likes