Adding an arrow to ag-grid agRichSelectCellEditor to make the drop-down feature more intuitive

Question

At base, the agRichSelectCellEditor does not contain any indication that it is an actual drop-down, and I'd like to add a down arrow to cel display cell to make it more intuitive. I've searched through the docs and haven't found anything

Answer 1

You can use the cellClass property of the column definition to show an arrow symbol on the cell.

.drop-down-style {
  &::after {
    content: '\f0d7';
    font-family: 'Font Awesome 5 Free';
  }
}

In this example you need to have Font Awesome imported in your code. But custom css will also work. You can position the arrow also using css.

Set the css property like given below on the column definition of the required column.

{
  headerName: 'dropown column',
  cellClass: 'qft-select-cell'
}