Highlight the columns/rows for the cells clicked or moved

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

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

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?

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.


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


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

app = Dash(__name__)

df = pd.read_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(
                "resizable": True,              
                'headerClass': {'function': 'activeColumn(params)'}

    style={"margin": 20, "display": "flex"},

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

if __name__ == "__main__":

.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'


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.