Search code examples
reactjsag-gridag-grid-react

How to customize select outline of React AG-Grid cell?

In AG-Grid, by default, selecting a cell by clicking on it gives a blue outline:

However, I have added a border to all my cells by modifying the cellStyle property for defaultColDef:

cellStyle: (params) => {
    return {
        border: '1px solid #cccaca',
    }
},

The cells end up looking like this, but clicking on them does not show a blue outline (I'm guessing it is hidden by the borders):

Is there a way to customize cells to have both a border and a selection outline?

Solution

  • Using this class

    .ag-cell-focus {
  border: 1px solid red !important;
}

    By doing so, your focused cell will be red bordered.

    Playground: https://plnkr.co/edit/jicOlLIWOldJPMhD?preview (Look for age column)

    UPDATE

    To clear borders when clicked outside

    .ag-has-focus .ag-cell-focus {
  border: 1px solid red !important;
}