Highlight the columns/rows for the cells clicked or moved

Dash Python
1

Hi Dash Community:

I understand that, in AgGrid, if we hover on a cell, we can highlight the column/row by what is described here:

If we use excel, if we a) select the cell, or b) move selected cell by using the arrows (up/down/left/right) in the keyboard, we can see the first row and first column of the selected cell being highlighted. Is there a way to do this in Aggrid? I think maybe one way is to use the cellClicked callback but am not sure. Thanks

2

Hello @entropy_l,

Yes, this is possible, however, you’d be doing this with css and not a callback.

I can’t remember what the class is called that determines it is active.

1 Like
3

sorry, I tried to look it up but indeed didn’t find the answer.
I am trying to mimic the behavior like this:
when navigate the table by using left/right/up/down arrows on the keyboard, the corresponding row number and cell under the column is highlighted. With this, the behavior of Ag Grid is closer to excel and easier for people to reference for the cells.
Can you please elaborate more on how to make this change in css?

image
image911×485 6.03 KB

4

Hello @entropy_l,

There isnt a way to do the column, but you can do the cell and row:

ag-cell-focus and ag-row-focus are the two class names that you will need in order to do the styling.

5

@entropy_l

Here is a minimal app to get you started. Note that if your grid has sort or filter enabled, you would have to refresh the grid to make the row highlight correct.

Note - this is mostly a @jinnyzor solution

ag-grid-highlight-headers-on-focus



import dash_ag_grid as dag
import pandas as pd
from dash import Dash, html, Output, Input

app = Dash(__name__)

df = pd.read_csv(
    "https://raw.githubusercontent.com/plotly/datasets/master/ag-grid/olympic-winners.csv"
)


columnDefs = [
    {
        "headerName": "Row",
        "colId": "Row",
        "maxWidth": 100,
        "valueGetter": {"function": "params.node ? params.node.rowIndex + 1: null;"},
        'cellClass': {"function": "activeRow(params)"},
    },
    {"field": "country"},
    {"field": "year"},
    {"field": "sport"},
    {"field": "gold"},
    {"field": "silver"},
    {"field": "bronze"},
]

app.layout = html.Div(
    [
        dag.AgGrid(
            columnDefs=columnDefs,
            rowData=df.to_dict("records"),
            columnSize="sizeToFit",
            defaultColDef={
                "resizable": True,              
                'headerClass': {'function': 'activeColumn(params)'}
            },


            id='grid'
        )
    ],
    style={"margin": 20, "display": "flex"},
)


app.clientside_callback(
    """    
    function (id) {
      dash_ag_grid.getApiAsync(id).then((grid) =>
        grid.addEventListener("cellFocused", (params) => {
          params.api.refreshHeader();
          grid.refreshCells({force: true, columns: ['Row']})
        }),
      );
      return dash_clientside.no_update
    }
    """,
    Output('grid', 'id'),
    Input('grid', 'id')
)

if __name__ == "__main__":
    app.run_server(debug=True)


"""
.css file

.regular {
  background-color: whitesmoke;
}

.active {
  background-color: silver;
}

---------

Add to dashAgGridFunctions.js

dagfuncs.activeColumn = (params) => {
  var activeCell = params.api.getFocusedCell()
  if (activeCell) {
    activeCell.column.colDef == params.colDef ? "active" : "regular"
  }
}

dagfuncs.activeRow = (params) => {
  var activeCell = params.api.getFocusedCell()
  if (activeCell) {
    activeCell.rowIndex == params.node.rowIndex ? 'active' : 'regular'
  }
}


"""
2 Likes
6

Thank you so much @AnnMarieW. I get great answers from you and @jinnyzor all the time. Sorry for the late response, I just able to log back and see this in details.

2 Likes