Highlight the columns/rows for the cells clicked or moved

Dash Python
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'
  }
}


"""
3 Likes