How to disable selection of cells in ag-grid?

Question

I have a simple ag-grid in an Angular project and want to disable selection of cells in one of its columns. Simply removing the default blue outline during selection would

Answer 1

Try this one it's work for me

::ng-deep .ag-cell-focus,.ag-cell-no-focus{
border:none !important;
}
::ng-deep .no-border.ag-cell:focus{
border:none !important;
outline: none;
}

Answer 2

You can try this css hack. no custom flags needed.

.ag-cell-focus, .ag-cell {
    border: none !important;
}

Example - https://stackblitz.com/edit/aggrid-want-to-disable-cell-selection-answer?file=src%2Fstyles.css

Answer 3

Note that if we set gridOption.suppressCellSelection = true we can disable cell selection for all columns' cells.

Here the question is regarding not showing a specific column's cell's highlighted border when it is selected.

You can achieve this by bit of CSS and cellClass property of ColDef.

You'll need to add below CSS.

.ag-cell-focus,.ag-cell-no-focus{
  border:none !important;
}
/* This CSS is to not apply the border for the column having 'no-border' class */
.no-border.ag-cell:focus{
  border:none !important;
  outline: none;
}

And use the same class as cellClass in ColDef

suppressNavigable: true,
cellClass: 'no-border'

Live example: aggrid-want-to-disable-cell-selection
This won't show border for the cell you even focus using mouse click.

Answer 4

I'd suggest to use the suppressCellSelection option in gridOptions. A CSS quick fix is not something that I'd suggest to go for.

this.gridOptions = {
  // Your grid options here....
  suppressCellSelection: true
};

Answer 5

You can also use cellStyle to remove the selection dynamically. Here is an example:

{
  headerName: "Is Selectable",
  cellStyle: (params) => {
    if (!params.value) {
      return { border: "none" };
    }
    return null;
  },
  ...
},
{
  headerName: "UnSelectable",
  cellStyle: { border: "none" },
  ...
}

Live Demo